前言
babel 6与之前版本的区别:
之前版本只要安装一个babel就可以用了,所以之前的版本包含了一大堆的东西,这也导致了下载一堆不必要的东西。但在babel6中,将babel拆分成两个包:
babel-cli
和babel-core
。如果你想要在CLI(终端或REPL)使用babel就下载babel-cli
,如果想要在node中使用就下载babel-core
。
babel 6已结尽可能的模块化了,如果还用babel 6之前的方法转换ES6,它会原样输出,并不会转化,因为需要安装插件。
Babel提供
babel-cli
工具,用于命令行转码。以下摘自阮一峰。
它的安装命令如下。
代码语言:javascript复制$ npm install --global babel-cli
基本用法如下:
代码语言:javascript复制# 转码结果输出到标准输出
$ babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 参数生成source map文件
$ babel src -d lib -s
上面代码是在全局环境下,进行Babel转码。这意味着,如果项目要运行,全局环境必须有Babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的Babel。
一个解决办法是将babel-cli安装在项目之中。
代码语言:javascript复制$ npm install --save-dev babel-cli
然后改写package.json
代码语言:javascript复制{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel src -d lib"
},
}
转码时执行:
代码语言:javascript复制npm run build
如果某些代码需要调用Babel的API进行转码,就要使用
babel-core
模块。以下摘自阮一峰。
它的安装命令如下。
代码语言:javascript复制$ npm install babel-core --save
然后,在项目中就可以调用babel-core
。
var babel = require('babel-core');
// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }
// 文件转码(异步)
babel.transformFile('filename.js', options, function(err, result) {
result; // => { code, map, ast }
});
// 文件转码(同步)
babel.transformFileSync('filename.js', options);
// => { code, map, ast }
// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }
例子:
代码语言:javascript复制var es6Code = 'let x = n => n 1';
var es5Code = require('babel-core')
.transform(es6Code, {
presets: ['es2015']
})
.code;
// '"use strict";nnvar x = function x(n) {n return n 1;n};'
上面代码中,transform方法的第一个参数是一个字符串,表示需要转换的ES6代码,第二个参数是转换的配置对象。 **
Demo:1.工具(gulp)转换法
项目目录结构:
① 在项目中安装 gulp执行:
代码语言:javascript复制npm install gulp --save-dev
② 安装转码规则:
代码语言:javascript复制npm install --save-dev gulp-babel babel-preset-es2015
此时的package.josn文件:
③ 编写gulpfile.js文件,文件内容如下所示:
代码语言:javascript复制var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default",function(){
return gulp.src("js/a.js").pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest("lib"));
})
当我们在当前项目目录下运行
代码语言:javascript复制gulp
命令后,会发现原本在src文件夹中的a.js(按照ES6标准编写的)文件已经被转码成ES5标准的a.js,并放在了lib文件夹里面。
可能报错和原因
package.json文件不应该是空的。
如果你有空的包json文件,只需添加{}。
然后再试一次就行。 **
Demo:2.不使用工具
你得有.babelrc文件。Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。 该文件用来设置转码规则和插件,基本格式如下。
代码语言:javascript复制# 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-cli
包:
$ npm install --global babel-cli
③ 执行命令:
代码语言:javascript复制# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel js -d lib
之后,你会看到js文件夹下的.js文件,全部转码到lib文件夹下,检查一下lib文件夹中的.js是否已经变为es5了。