譯-為你的Node.js配置babel 6

RaymondCall 8年前發布 | 50K 次閱讀 Babel Node.js Node.js 開發

來自: 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也支持大多數構建工具例如 Gruntgulp . 你可以在 Babel Website 了解到相關信息。

這兒有一些資源可以幫助你在Bable的世界里打怪升級:

源碼、貢獻和感謝

本教程的源碼在 這個倉庫

如果你發現一下錯別字或者有一些更新,請使用issues或者給 我們的Github 倉庫 發起PR。

我也非常感謝 Fabrício Matté 審閱這篇文章并且把它發布在 JS Rocks 并且也做了一些更正。

文章來自 http://www.hacke2.cn

</code></code></code></code></div>

 本文由用戶 RaymondCall 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!