关于ES6转换ES5语法

一、直接安装Babel法：

1. 首先全局安装Babel。

1 2 3 4 5

$ npm install -g babel-cli   //也可以通过直接将Babel安装到项目中，在项目根目录下执行下面命令，同时它会自动在package.json文件中的devDependencies中加入babel-cli //在执行安装到项目中命令之前，要先在项目根目录下新建一个package.json文件。 $ npm install -g babel-cli --save-dev

如果将babel直接安装到项目中，它会自动在package.json文件中的devDependencies中加入babel-cli。如下所示：

1 2 3 4 5 6

//...... {    "devDependencies" : {      "babel-cli" : "^6.22.2"    } }

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

这个文件的完整文件名是 “.babelrc”，注意最前面是有个“.”的。由于我的电脑是Windows系统，所以在新建这个文件的时候老是提示 “必须键入文件名” 的错误。后来百度了下，发现创建这个文件的时候，把文件名改成“.babelrc.”，注意是前后都有一个点，这样就可以保存成功了

1 2 3 4

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

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

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

1 2 3 4 5 6 7 8 9 10 11

# 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

4. 根据官网的提示，当我们用npm安装好这些插件工具之后，我们需要将这些规则加入到.babelrc中去。如下所示：

1 2 3 4 5 6 7 8

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

5. 转码、转码的规则：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

# 转码结果输出到标准输出 $ 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

因为从网上搜的比较杂，然后我就都附到了这篇文章里了，

生成包管理配置文件package.json

?

1	npm init -y

安装转换工具

?

1 2 3

npm i -g babel-cli   npm i --save-dev babel-preset-es2015 babel-cli

在.babelrc文件中写入如下内容

?

1 2 3 4 5 6

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

编译文件

?

1	babel src /test .js -o dist /test .js

二、gulp配置法：

1. 首先，我们需要在项目中安装gulp：

1	$ npm install gulp --save-dev

2. 然后，我们需要在项目中安装gulp-babel：

1	$ npm install --save-dev gulp-babel

当执行完上面的两个命令后，我们会发现根目录下的package.json文件内容已经被自动修改成：

1 2 3 4 5 6 7

{    "devDependencies" : {      "babel-cli" : "^6.22.2" ,      "gulp" : "^3.9.1" ,      "gulp-babel" : "^6.1.2"    } }

3. 编写gulpfile.js文件，文件内容如下所示：

1 2 3 4 5 6 7 8

var  gulp = require( "gulp" ); var  babel = require( "gulp-babel" );   gulp.task( "default" , function  () {    return  gulp.src( "src/a.js" )      .pipe(babel())      .pipe(gulp.dest( "lib" )); });

当我们在当前项目目录下运行如下命令后，会发现原本在src文件夹中的a.js(按照ES6标准编写的)文件已经被转码成ES5标准的a.js，并放在了lib文件夹里面。

1 2 3 4

$ gulp default   #或者用下面的命令也行 $ gulp