ES6开发环境的搭建

现在的Chrome浏览器已经支持ES6了，但是有些低版本的浏览器还是不支持ES6的语法，这就需要我们把ES6的语法自动的转变成ES5的语法

搭建步骤

1、全局安装babel-cli

npm install -g babel-cli

2、本地安装babel-preset-es2015 和 babel-cli

npm install --save-dev babel-preset-es2015 babel-cli

3、创建babel配置文件.babelrc

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

4、编写es6语法，并编译为es5语法文件

babel es6文件地址 -o 要转换的es5文件地址

5、简化命令
在package.json文件中scripts添加命令，如：

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }
}

修改好后，就可以用npm run build进行转换

实例

1、创建如下所示的文件目录结构

2、用es6语法编写代码，最终这个文件需要被转化为es5语法

3、npm init -y命令初始化package.json文件，-y为使用默认选项创建package.json，跳过文件信息自定义

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4、全局安装babel-cli

npm install -g babel-cli

5、本地安装babel-preset-es2015 和 babel-cli，安装babel-preset-es2015时提示有新版本更新，如旧版本使用babel-preset-es2015想升级，参考https://juejin.im/entry/59c4f9dd6fb9a00a4c271167

npm install --save-dev babel-preset-es2015 babel-cli

执行完后

6、在根目录下新建.babelrc文件，并打开录入下面的代码

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

7、运行编译命令

babel src/index.js -o dist/index.js

8、简化命令

此时运行npm run test即可

名词解释

1、babel
javascript在不断的发展，各种新的标准和提案层出不穷，但是由于浏览器的多样性，导致可能几年之内都无法广泛普及，babel可以让你提前使用这些语言特性，他是一种用途很多的javascript编译器，他把最新版的javascript编译成当下可以执行的版本，简言之，利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6，甚至es7的语法。说白了就是把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言。
2、.babelrc文件
.babelrc是Babel的配置文件，放在项目根目录下，使用Babel的第一步就是配置这个文件。
该文件用来设置转码规则和插件，基本格式如下。

{
"presets": [],
"plugins": []
}

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

ES2015转码规则
$ npm install --save-dev babel-preset-es2015
react转码规则
$ npm install --save-dev babel-preset-react
ES7不同阶段语法提案的转码规则(共有4个阶段)，选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
然后，将这些规则加入.babelrc。

{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}

presets 其实就是一堆plugins的预设起到了方便的作用 如果不采用 presets 完全可以单独引用某个功能

{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"],
"comments": false
}