Babel 轉碼器 § es6轉換es5
Babel 轉碼器 § es6轉換es5 實時轉碼 / Repl -babel-node / babel-register(自動轉碼引入babel-register模塊)
配置文件.babelrc
1、Babel 的配置文件是.babelrc
,存放在項目的根目錄下。使用 Babel 的第一步,就是配置這個文件。
該文件用來設置轉碼規則和插件,基本格式如下。
{
"presets": [],
"plugins": []
}
2、presets
字段設定轉碼規則,官方提供以下的規則集,你可以根據需要安裝。
# 最新轉碼規則(必須)
$ npm install --save-dev babel-preset-latest
# react 轉碼規則(必須)
$ npm install --save-dev babel-preset-react
# 不同階段語法提案的轉碼規則(共有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
3、然後,將這些規則加入.babelrc
。
{
"presets": [
"latest",
"react",
"stage-2"
],
"plugins": []
}
註意,以下所有 Babel工具和模塊的使用,都必須先寫好.babelrc
。
命令行轉碼babel-cli
1、Babel提供babel-cli
工具,用於命令行轉碼。
它的安裝命令如下。
$ npm install --global babel-cli
2、基本用法如下。
# 轉碼結果輸出到標準輸出
$ babel example.js
# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ babel index.js --out-file indexEs5.js //可以將指定的es6的文件轉碼成es5的新文件 index.js 是es6的文件語法 indexEs5.js 是轉換後的es5語法
# 或者 babel index.js --watch --out-file indexEs5.js //可以時刻的監聽index.js中的變化然後 轉換成實時的轉換成es5的語法到 inedxEs5.js 文件中
# 或者
$ babel index.js -o indexEs5.js
# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 參數生成source map文件
$ babel src -d lib -s
3、上面代碼是在全局環境下,進行 Babel 轉碼。這意味著,如果項目要運行,全局環境必須有 Babel,也就是說項目產生了對環境的依賴。另一方面,這樣做也無法支持不同項目使用不同版本的 Babel。
一個解決辦法是將babel-cli
安裝在項目之中。
# 安裝
$ npm install --save-dev babel-cli
4、我們還可以配置package.json讓我們每次轉換的時候 不用每次都寫 “轉換文件” 和 “被轉換文件”
然後,改寫package.json
。
{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"es6-es5": "babel index.js --out-file indexEs5.js"
},
}
轉碼的時候,就執行下面的命令。
$ npm run es6-es5
babel-node
1、babel-cli
工具自帶一個babel-node
命令,提供一個支持ES6的REPL環境。它支持Node的REPL環境的所有功能,而且可以直接運行ES6代碼。
它不用單獨安裝,而是隨babel-cli
一起安裝。然後,執行babel-node
就進入REPL環境。
$ babel-node
> (x => x * 2)(1)
2
2、babel-node
命令可以直接運行ES6腳本。將上面的代碼放入腳本文件es6.js
,然後直接運行。
$ babel-node es6.js
2
3、babel-node
也可以安裝在項目中。
$ npm install --save-dev babel-cli
4、然後,改寫package.json
。
{
"scripts": {
"script-name": "babel-node script.js"
}
}
上面代碼中,使用babel-node
替代node
,這樣script.js
本身就不用做任何轉碼處理。
babel-register
babel-register
模塊改寫require
命令,為它加上一個鉤子。此後,每當使用require
加載.js
、.jsx
、.es
和.es6
後綴名的文件,就會先用Babel進行轉碼。
$ npm install --save-dev babel-register
使用時,必須首先加載babel-register
。
require("babel-register");
require("./index.js");
然後,就不需要手動對index.js
轉碼了。
需要註意的是,babel-register
只會對require
命令加載的文件轉碼,而不會對當前文件轉碼。另外,由於它是實時轉碼,所以只適合在開發環境使用。
第一步:index.js 入口文件 引入babel-register 引入轉換文件 num.js num這個模塊是一個求和功能的模塊
第二步:編寫es6求和功能模塊
第三步:node的repl環境運行index.js文件
Babel 轉碼器 § es6轉換es5