声明:这些文章是自己记笔记用的!!
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提供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文件:
附
安装
1
2
|
npm install babel-cli --save-dev
npm install babel-cli -g
|
安装 babel-preset-es2015
ES2015转码规则
1
|
npm install babel-preset-es2015 --save-dev
|
新建 .babelrc文件
复制如下内容到文件中
1
|
{ "presets": [ "es2015" ], "plugins": [] }
|
新建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
1
2
|
npm install babel-core -g
npm 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);
|
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
};
|
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
|