1. 進入ES6的項目,執行
npm init // 初始化package.json
2. 在與package.json同一目錄下編寫配置文件 .babelrc
{ "presets": [], "plugins": [] }
安裝babel
// 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-0" ], "plugins": [] }
安裝 babel-cli 工具,用於命令行轉碼
npm install --global babel-cli
// 轉碼輸出文件
example.js
[1,2,3].map(x => x*x);
// 執行轉碼
babel example.js -o compile.js --presets es2015
轉碼后的compiled.js文件:
"use strict"; [1, 2, 3].map(function (x) { return x * x; });
實時監聽編譯文件:
To compile a file every time that you change it, use the --watch
or -w
option:
$ babel example.js --watch -o compiled.js --presets es2015
babel在線轉碼工具: