babel 6与之前版本的区别：
之前版本只要安装一个babel就可以用了，所以之前的版本包含了一大堆的东西，这也导致了下载一堆不必要的东西。但在babel 6中，将babel拆分成两个包：babel-cli和babel-core。如果你想要在CLI(终端或REPL)使用babel就下载babel-cli，如果想要在node中使用就下载babel-core。 babel 6已结尽可能的模块化了，如果还用babel 6之前的方法转换ES6，它会原样输出，并不会转化，因为需要安装插件。如果你想使用箭头函数，那就得安装箭头函数插件npm install babel-plugin-transform-es2015-arrow-functions。
1）首先全局安装Babel并保存在所用项目的package.json文件夹里
$npm i -g babel-core --save-dev
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
babel-preset-env 是一个新的 preset，可以根据配置的目标运行环境（environment）自动启用需要的 babel 插件。
目前我们写 javascript 代码时，需要使用 N 个 preset，比如：babel-preset-es2015、babel-preset-es2016。es2015 可以把 ES6 代码编译为 ES5，es2016 可以把 ES2016 代码编译为 ES6。babel-preset-latest 可以编译 stage 4 进度的 ECMAScript 代码。
4）babel-preset-env
babel-preset-env 是一个新的 preset，可以根据配置的目标运行环境（environment）自动启用需要的 babel 插件。
目前我们写 javascript 代码时，需要使用 N 个 preset，比如：babel-preset-es2015、babel-preset-es2016。es2015 可以把 ES6 代码编译为 ES5，es2016 可以把 ES2016 代码编译为 ES6。babel-preset-latest 可以编译 stage 4 进度的 ECMAScript 代码。
5）转码、转码的规则：
# 转码结果输出到标准输出
$ 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
6）.配置工具
安装gulp-babel
npm install --save-dev gulp-babel
配置gulpfile.js文件
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"));
});
网友评论