## Babel > Babel是一個 JavaScript 編譯器，可以將ES6代碼轉化為ES5，從而在瀏覽器或其他環境執行。 ### 命令行環境 安裝 ``` $ npm install --global babel-cli $ npm install --save babel-preset-es2015 ``` 然后在當前目錄新建配置文件 .babelrc。 ``` // .babelrc { "presets": ['es2015'] } ``` Babel自帶一個babel-node命令，提供支持ES6的REPL環境。，可以直接運行ES6代碼。 ``` $ babel-node > > console.log([1,2,3].map(x=> x * x)) > [1,4,9] ``` babel命令可以將ES6代碼轉換為ES5代碼。 ``` $ babel es6.js "use strict" console.log([1,2,3,].map(function(x) { return x * x })) ``` -o參數（或--out-file）可將轉換后的代碼從標準輸出重定向到文件。 ``` $ babel es6.js -o es5.js ``` -d參數用于轉換整個目錄。-d參數后面是輸出目錄。 ``` $ babel -d build-dir source-dir ``` -s參數用于生產source map 文件。 ``` $ bebel -d build-dir source-dir -s ``` ### 瀏覽器環境 Babel可以用于瀏覽器環境，但從Babel 6開始不再直接提供瀏覽器版本，要用構建工具實現。不使用構建工具則只能通過安裝5.x版本的babel-core模塊獲取。 ``` $ npm install babel-core5 ``` 安裝后，在目錄的node\_module/babel-core/子目錄找到babel的瀏覽器版本browser.j和browser.min.js，并插入代碼。 ``` <script src="node_module/babel-core/browser.js"></script> <script type="text/babel"> //ES6 代碼 </script> ``` 上面的代碼，browser.js是Babel提供的轉換器腳本，可以用在瀏覽器運行。自己寫的ES6代碼放在script標簽，但要注明type="text/babel"。 Babel配合Browserify可以生成瀏覽器能夠直接運行的腳本。 ``` $ npm install --save-dev babelify babel-preset-2015 $ browserify script -o bundle.js -t [ babelify --presets [ es2015 react ] ] ``` 上面的代碼用于將ES6腳本script.js轉化為bundle.js。瀏覽器直接加載后者即可。 在package.json加入下面的代碼，不必每次輸入參數 ``` { "browserify": { "transform": [[ babelify --presets [ es2015 react ] ]] } } ``` ### Node.js環境 安裝 ``` $ npm install --save-dev babel-core babel-preset-2015 ``` 在項目根目錄新建 .babelrc 文件 ``` // .babelrc { "presets": ['es2015'] } ``` 最后在腳本中調用babel-core的transform方法。 ``` var es5Code = 'let x = n => n+1' var es6Core = require('babel-core') .transform(es5Code, {presets: [''es20215]}) .code; ``` 上面的代碼好，transform的第一個參數是一個字符串，表示需要轉換的ES5代碼，第二個參數是轉換的配置對象。 在應用入口腳本頭部加入下面的語句 ``` require('babel-core/register') ``` 后面所有通過require命令加載的后綴為.es6、.es、.jsx和.js的腳步都會先通過babel轉碼。 由于 Babel 只轉換語法 \(如箭頭函數\)， 你可以使用 babel-polyfill 支持新的全局變量，例如 Promise 、新的原生方法如 String.padStart \(left-pad\) 等。