原文鏈接:http://es6.ruanyifeng.com/
源碼地址:https://github.com/NalvyBoo/nodesES6/
Babel配置
配置文件 .babelrc
使用Bable的第一步媳拴,在項(xiàng)目根目錄下新建并配置文件 .babelrc
window 環(huán)境下,命名 .babelrc.
生成配置文件
該文件來設(shè)置轉(zhuǎn)碼規(guī)則和插件鸦致,基本格式如下
{
"preset":[],
"plugins":[]
}
preset
字段設(shè)定轉(zhuǎn)碼規(guī)則砚哗,可以根據(jù)需要安裝
# ES2015轉(zhuǎn)碼規(guī)則
$ npm install --save-dev babel-preset-es2015
# react轉(zhuǎn)碼規(guī)則
$ npm install --save-dev babel-preset-react
# ES7不同階段語法提案的轉(zhuǎn)碼規(guī)則(共有4個(gè)階段)嚼鹉,選裝一個(gè)
$ 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
將這些規(guī)則加入 .babelrc
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
以下所有Babel工具和模塊的使用勤婚,都必須先寫好 .babelrc
全局安裝 babel-cli
$ npm install --global babel-cli
基本用法如下
# 轉(zhuǎn)碼結(jié)果輸出到標(biāo)準(zhǔn)輸出
$ babel example.js
# 轉(zhuǎn)碼結(jié)果寫入一個(gè)文件
# --out-file 或 -o 參數(shù)指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整個(gè)目錄轉(zhuǎn)碼
# --out-dir 或 -d 參數(shù)指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 參數(shù)生成source map文件
$ babel src -d lib -s
項(xiàng)目安裝 babel-cli
$ npm install --save-dev babel-cli
配置 package.json
遵班,將 src文件夾
編譯到 js
文件夾
{
// ...
"devDependencies": {
"babel-cli": "^6.24.0"
},
"scripts": {
"build": "babel src -d js"
},
}
轉(zhuǎn)碼執(zhí)行命令
$ npm run build
babel-bode
改寫 package.json
{
"scripts": {
"script-name": "babel-node script.js"
}
}
上面代碼中忧换,使用 babel-node
替代 node
瘾婿,這樣 script.js
本身就不用做任何轉(zhuǎn)碼處理蜻牢。