Babel的转码过程

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"));

});

你可能感兴趣的:(Babel的转码过程)