Babel神器ES6转ES5
声明：这些文章是自己记笔记用的！！
配置.balbelrc文件
Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。该文件用来设置转码规则和插件，基本格式如下。
注意：文件名为.balbelrc;与
文件中的
一致。
{
"presets": [],
"plugins": []
}presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
# 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然后，将这些规则加入.babelrc。
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}注意：这块中，用到哪个添加哪个，如果添加了如：’react‘而未做相关设置，babel将不能识别切不能正常编译，运行npm run build 时出现：
//.babelrc
{
"presets":[
"es2015",
"react"
],
"plugins":[]
}
注意，以下所有Babel工具和模块的使用，都必须先写好.babelrc。
命令行转码babel-cli
Babel提供babel-cli工具，用于命令行转码。
它的安装命令如下。
$ npm install --global babel-cli基本用法如下。
# 转码结果输出到标准输出
$ 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安装在项目之中。
# 安装
$ npm install --save-dev babel-cli然后，改写package.json。（其实执行了上面的install后会自动在devDependencies中加入babel-cli）
{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel src -d lib"
},
}转码的时候，就执行下面的命令。
$ npm run build例：
简单的一个例子目录： 
pakage.json文件：
附
安装babel
安装
12npm install babel-cli --save-devnpm install babel-cli -g安装 babel-preset-es2015
ES2015转码规则
|
1
|
npm install babel-preset-es2015 --save-dev
|
新建 .babelrc文件
复制如下内容到文件中
|
1
|
{ "presets": [ "es2015" ], "plugins": [] }
|
- babel安装完毕。
测试
新建test.js
|
1
2
3
|
'use strict';
let [a,b,c] = [1,2,3];
console.log(a,b,c);
|
运行
|
1
|
babel-node test
|
输出 1 2 3,说明项目现在应该可以支持基本的es6语法了。
最后
babelrc文件中可以配置其他转换规则,比如 ES7,react转码等
|
1
2
3
4
5
6
7
|
// react转码
npm install --save-dev babel-preset-react
// es7 0-3个版本
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
|
对应的babelrc文件内容变为
|
1
|
"presets": ["es2015", "react", "stage-0"]
|
进阶
为了高效的进行es6转码,我们借助babel-core/register这个钩子,对js,jsx,es6等文件进行babel转码,
babel-core
12npm install babel-core -gnpm install babel-core --save-dev新建babel_reg.js,实例.babelrc
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// enable runtime transpilation to use ES6/7 in node
var fs = require('fs');
var path = require('path');
var babelrc = fs.readFileSync(path.resolve(__dirname, '../.babelrc'));
var config;
try {
config = JSON.parse(babelrc);
} catch (err) {
console.error('==> ERROR: Error parsing your .babelrc.');
console.error(err);
}
require('babel-core/register')(config);
|
- 新建server.babel.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
'use strict';
/**
* Module dependencies.
*/
function start () {
const app = require('../server/main');
const http = require('http');
/**
* Get port from environment and store in Express.
*/
app.set('port', port);
/**
* Create HTTP server.
*/
const server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
}
module.exports = {
start
};
|
- 启动文件sever.js
|
1
2
3
4
|
#!/usr/bin/env node
require('./babel-reg');
var server = require('./server.babel');
server.start();
|
- 运行
|
1
2
|
// nodemon 热加载插件 ,当然你可以用node
nodemon server.js
|