ES6 环境的搭建

安装babel

npm install --g babel-cli

在项目目录下输入

npm init -y

会自动创建package.json文件

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

你会发现，在dist目录下确实生产了index.js文件，但是文件并没有变化，还是使用了ES6的语法。因为我们还需要安装转换包才能成功转换

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

cnpm install --save-dev babel-preset-es2015 babel-cli 很慢

安装完成后，我们可以看一下我们的package.json文件，已经多了devDependencies选项。

"devDependencies": { "babel-cli": "^6.24.1", "babel-preset-es2015": "^6.24.1" }

新建.babelrc

在根目录下新建.babelrc文件(注意，以点开头的文件是隐藏文件，需要在linux环境通过命令创建)，并打开录入下面的代码

{

"presets":[

"es2015"

],

"plugins":[]

}

这个文件我们建立完成后，现在可以在终端输入的转换命令了，这次ES6成功转化为ES5的语法。

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

简化转化命令

在学习vue 的时候，可以使用npm run build 直接利用webpack进行打包，在这里也希望利用这种方式完成转换。打开package.json文件，把文件修改成下面的样子。

{

"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 来进行转换了。