使用babel将es6转换为es5

一、直接安装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"

   }

}

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

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

 

三、 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": []
}

到此配置完成，能够开始转码了

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

 

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

$ 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