譯-為你的Node.js配置babel 6
來自: http://www.hacke2.cn/configuring-babel-6-for-node-js/
原文:http://jsrocks.org/2016/01/configuring-babel-6-for-node-js/
</div>
如果你像我一樣在你的Node.js應用上還在使用老的ES5 js代碼,那么你可以拋棄之前的習慣,現在就可以使用JavaScript ES2015的特性和ES2016的標準在你的Node.js應用上。ES2015和ES2016讓JavaScript宛如清風般一樣開發,但是,不是每一個ES2015特性在我們心愛的 Node.js 上支持。
這時候 Babel 就派上用場了。Babel是一個讓ES2015和ES2016代碼轉換成ES5甚至是ES3的編譯器。簡單來說,它會轉換你的JavaScript代碼,讓它在Node.js應用上非常愉悅的用起來。
小記:Node.js已經支持多種ES2015的功能,如果你不想轉化你的ES2015代碼,你可以在啟動Node.js是使用 --harmony 標簽去開啟一些已確定標準化的特性。為了使用更多實驗性特性可以使用更激進的命令: node --v8-options | grep harmony ,但是請注意即便是最新版本的Node.js(在寫本文的時候最新版本是5)也不是所有的特性都被支持。這些特性往往是不穩定或不完整的。所以為了保持可讀性常常不使用這些特性。
下面做一些假設:
- 你了解如何編寫 Node.js 應用。
- 你會使用npm來安裝軟件包。
- 你已經安裝了Node.js和npm。
- 你喜歡使用一些命令行命令。
- 最好也了解一點ES2015的語法,當然這個不是必須的。
一些例子
有沒有一些可運行的例子而不僅僅是閱讀代碼? 這兒有 可運行的例子
安裝和開始學習Babel
有很多方法讓你可以安裝并使用Babel,但這這里我們討論的是如何讓babel-cli運行。
在 code 文件夾 下創建一個簡單的包含ES2015代碼的Index.js文件:
function* jsRocksIsAwesome() {
yield "JS Rocks is Awesome";
yield "JS Rocks says JavaScript Rocks";
return "because JavaScript really rocks";
}
var jsRocks = jsRocksIsAwesome();
console.log(jsRocks.next());
console.log(jsRocks.next());
console.log(jsRocks.next());</code></pre>
我們將在下一個命令下安裝 babel-cli 。他會在當前項目安裝最后一個穩定版本的babel-cli并且也會追加在package.json的devDependencies里。
npm install --save-dev babel-cli
現在如果你運行
babel code/index.js -d build/
你將會看見你寫的相同代碼出現在build/index.js文件夾里,所以Babel的 插件 和 預設 來臨了。
插件和預設
babel本身并沒有做很多事情,但是通過插件和預設可以實現很多功能。我們希望可以通過babel在我們的代碼中使用es2016和es2015所有的優美語法。
為此我們需要安裝兩個預設文件在 devDependencies 里。
運行下面的命令安裝預設文件:
npm install --save-dev babel-preset-es2015 babel-preset-stage-0
babel擁有廣泛的插件在 這邊獲得
現在你需要在執行命令的時候包含這兩個預設。
babel --presets es2015,stage-0 code/index.js -o build/app.js
現在你會看到正常的ES5代碼已經出現在 app.js 了,它也叫 編譯后的代碼 (這是js世界里的一個術語)。你可以使用以下命令運行這些代碼:
node build/app.js
使用Babel來配置一個合適的編譯環境
這是非常神奇的,但是怎么樣才能更好地運用在Node.js開發上?
babel的配置文件: .babelrc
.babelrc 是一個非常簡潔的JSON文件,它可以分離出你的Babel相關的配置。它也是非常易于上手的。以下是本教程的 .babelrc 文件。
{
"plugins": ["es2015", "stage-0"]
}
你可以配置其他 .babelrc 選項 ,確保它和你一樣強大。
對于本教程來說這是非常多的配置。現在,每當我們添加或刪除插件,我們僅僅改變以下配置選項而不是去修改他的運行命令,是不是很簡單!
現在,如果你運行:
babel -w code/ -d build/
他會從 .babelrc 讀取 預設 去編譯在 code/ 里的代碼并且生成編譯好的JavaScript文件在 build/ 文件夾并且不會結束此命令。注意這個 -w 標志:如果你對 code 文件夾修改,它會 監聽 和重新編譯這個文件夾下的代碼,酷!我現在所說的是不是非常神奇。
使用source maps在你的文件
如果你在思考雖然它非常酷和有趣但是非常難于調試編譯后的代碼。你不用對此擔心。Source maps的思想就是出于這個目的。Source maps會告訴Node.js這個錯誤的 源文件 而不是 編譯后的文件 !
這邊有一個 code/error.js 文件會拋出一個異常在生成器的第二次 yield 后。編譯后的代碼完全和源文件是不同的。
function* errorFulGenerator() {
yield "yo";
throw new Error("source maps are awesome");
return "";
}
var errorGen = errorFulGenerator();
errorGen.next();
errorGen.next();</code></pre>
我們使用如下命令去給 編譯后的文件 生成 source maps 。 注意使用 --source-maps 標簽 :
babel code/ -d build/ --source-maps
現在當我們遇到錯誤的時候我們會獲得有用的調試信息,如下:
errorGen.next()
^
Error: source maps are awesome
at errorFulGenerator (/home/programreneur/Programming/githubRepos/babeljs-short-tutorial/code/error.js:3:9)
at next (native)
at Object.<anonymous> (/home/programreneur/Programming/githubRepos/babeljs-short-tutorial/code/error.js:10:10)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at Function.Module.runMain (module.js:457:10)
at startup (node.js:138:18)
at node.js:974:3</pre>
這個就是使用 source maps 的方法。
設置npm命令
為了能每一次都非常簡單的使用編譯命令,你可以更新你的 package.json 文件去為Babel加一個構建命令。在 package.json 的 script 對象你可以如下添加構建命令。
"scripts": {
"build": "babel -w code/ -d build -s"
}
現在,我們運行:
npm run build
從今天開始就應該全面享受 ES2015/ES2016 帶來的好處了!
了解更多關于Babel的知識
這是一個Babel基礎教程,但是Babel的世界才剛剛開始。它有給力的社區作支撐并且已經在IT世界有了響當當的名聲。Babel也支持大多數構建工具例如 Grunt 和 gulp . 你可以在 Babel Website 了解到相關信息。
這兒有一些資源可以幫助你在Bable的世界里打怪升級:
- Learn ES2015 and Babel using this detailed tutorial
- Read the Babel docs on setting up Babel (They’re helpful)
源碼、貢獻和感謝
本教程的源碼在 這個倉庫 。
如果你發現一下錯別字或者有一些更新,請使用issues或者給 我們的Github 倉庫 發起PR。
我也非常感謝 Fabrício Matté 審閱這篇文章并且把它發布在 JS Rocks 并且也做了一些更正。
文章來自 http://www.hacke2.cn
</code></code></code></code></div>