使用babel将es6转换为es5

1、直接安装Babel法：

1.1) 全局安装Babel。

　　npm install -g babel-cli

 

1.2）局部安装，将babel直接安装到项目中，它会自动在package.json文件中的devDependencies中加入babel-cli。

　　npm install -g babel-cli --save-de

注意：如果没有package文件，可以运行下列命令，创建webpack配置文件

　　npm init

 

创建后，将下列代码复制到packge.json

{

  "devDependencies": {

    "babel-cli": "^6.22.2"

  }

}

2、Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。

这个文件的完整文件名是 “.babelrc”，注意最前面是有个“.”的。如果是Windows系统，新建这个文件的时候老会提示 “必须键入文件名” 的错误。把文件名改成“.babelrc.”，注意是前后都有一个点，这样就可以保存成功。

 

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

点击此处到Babel中文官网presets配置页面：Babel Plugins

# 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

这里我们选择安装ES2015转码规则

安装后，在.babelrc配置的内容如下，转换为ES5，所以填写es2015

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

到此配置完成，可以开始转码了

4、按项目需求在下列命令中挑选合适的命令完成转码

 

# 转码结果输出到标准输出

$ babel test.js

 

# 转码结果写入一个文件

# --out-file 或 -o 参数指定输出文件

$ babel a.js --out-file b.js

# 或者

$ babel a.js -o b.js

 

# 整个目录转码

# --out-dir 或 -d 参数指定输出目录

$ babel src --out-dir lib

# 或者

$ babel src -d lib

 

# -s 参数生成source map文件

$ babel src -d lib -s