es6开发环境搭建

一、开发环境实现方案

浏览器不支持es6语法，但是支持低版本的js语法，实现思路就是将高版本的es6语法转换成低版本的js语法，而这个过程需要babel插件支持，我们先来了解一下babel。

二、babel介绍

Babel 是一个 JavaScript 编译器，主要用于将高版本的js代码转换为向后兼容的js语法。举个如下转换的例子：

//转换前
var sum = (num1, num2) => num1 + num2;

//转换后
"use strict";

var sum = function sum(num1, num2) {
  return num1 + num2;
};

转换前代码是一个箭头函数，浏览器支持的不是很好，转换后的代码是常见的函数形式，浏览器可以识别。

三、CDN方式搭建es6开发环境

在html中引入babel的CDN文件即可使用，参考如下案例：

<html>
<body>
<div id="output"></div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">

    const getMessage = () => "Hello World ~~";
    document.getElementById('output').innerHTML = getMessage();

</script> 
<body>
</html>

以上代码中包含了es6的箭头函数和常量定义等语法，然后将函数的结果输出到页面上，在IE，Chrome等浏览器均能正常运行。

四、node.js方式搭建es6开发环境

注意：这里要求对node.js有一定的了解
1、在开发文件夹下执行npm init -y初始化文件夹

npm init -y  //初始化文件夹

2、安装babel

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

3、新建需要存放待转码的文件夹和文件，例如创建src文件夹和index.js文件

//index.js文件内容
let sum = (num1, num2) => num1 + num2;

4、编译es6代码

//执行编译命令
npx babel src --out-dir lib --presets=@babel/env

5、查看转化后的代码效果如下所示：

"use strict";

var sum = function sum(num1, num2) {
  return num1 + num2;
};

五、babel插件和预设的介绍

插件：插件是小型的 JavaScript 程序，只能完成对部分功能的代码进行转换，举个例子如下：

//转换前的代码
let sum = (num1, num2) => num1 + num2

//执行转换的命令
npx babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

//转换后的效果代码
let sum = function (num1, num2) {
  return num1 + num2;
};

可以看到转换后的代码只有一部分es6代码完成了编译，想要完成所有功能完成转换怎么办呢？那就是预设的作用了

预设：是一组预先设定的插件，使用的时候不需要一个接一个地添加所有需要的插件，是插件的功能集合，举个案例说明：

npx babel src --out-dir lib --presets=@babel/env

这里--presets=@babel/env表示代码编译用@babel/env预设，作用是支持所有最新的 JavaScript （ES2015、ES2016 等）特性，用途广泛。效果在前面node开发环境演示。

六、babel配置文件介绍

前面我们编译es6语法的时候，指定babel命令的参数是通过命令行的方式，如果命令参数需要指定的比较多的时候，不够灵活，babel本身支持配置文件的方式配置参数，这也是诸如VUE等各大框架中使用的方式。举例如下：

//在开发文件夹下创建配置文件，名称为.babelrc，内容如下:
{
  "presets": [
     [
        "@babel/env",
        {
          targets: {
            ie: "9",
            firefox: "50",
            chrome: "47",
            safari: "11.1",
          },
        },
     ],
  ]
}
//编译es6语法方式改为：npx babel src --out-dir lib

配置文件中presets表示预设，当前使用的预设是@babel/env，targets表示当前需要支持的浏览器版本

七、简化编译命令

编辑开发文件夹下的package.json文件，在scripts属性中添加一条编译命令如下：

"scripts": {
    "build": "npx babel src --out-dir lib --presets=@babel/env"
  },

//编译es6的命令简化为如下方式：
npm run build

八、CDN方式搭建es6开发环境补充

引入CDN的方式存在一些隐形的问题，比如说babel文件更新，会和自己以前的代码不兼容。我们这里可以使用babel-standalone的开源npm的babel包达到相同的目标。
1、下载babel-standalone的npm包

npm i babel-standalone

2、把下载下来的npm包下的js代码考到自己的开发文件下，包括babel.js文件和src包目录
3、在页面代码中引入babel.js文件，如下所示：

<html>
<body>
<div id="output"></div>
<script src="./babel.js"></script>
<script type="text/babel">

    const getMessage = () => "Hello World ~~";
    document.getElementById('output').innerHTML = getMessage();

</script> 
<body>
</html>