現在開始使用 ES6

jopen 9年前發布 | 68K 次閱讀 ES6 JavaScript開發

在 2 月 20 號 ECMAScript 第六版就正式推出了，這門語言一直保持穩定快速的發展而且新功能也在慢慢被現在主流的 JavaScript 引擎所接受。不過要想在瀏覽器端或者 Node 端直接運行 ES6 代碼還得等上一些日子。幸好 TC39 (負責研究開發 EMCAScript 規格的組織) 做了大量工作讓我們現在可以使用 ES6 中的大部分特性了。

代碼轉換

能夠實現 ES6 到 ES5 的代碼轉換多虧了 Babel (以前叫 6to5) 以及 Traceur 之類的項目。這些轉換器 (更準確地說是源代碼到源代碼的編譯器) 可以把你寫的符合 ECMAScript 6 標準的代碼完美地轉換為 ECMAScript 5 標準的代碼，并且可以確保良好地運行在所有主流 JavaScript 引擎中。

我們這里目前在使用 Babel，主要是因為它對 ES6 的支持程度比其它同類更高，而且 Babel 擁有完善的文檔和一個很棒的在線交互式編程環境。

起步

在用 ES6 標準開始一個新項目的時候我們會建立一個目錄結構來確保用 ES6 編寫的代碼能和編譯出的 ES5 代碼區分開。原始的 ES6 代碼我們放在src目錄下，而編譯好的文件就是lib目錄。這樣的命名我們會在本文一直使用。（補充一點，lib目錄應該被加入.gitignore文件中）

安裝 Babel

如果你還沒安裝 Babel 可以使用 npm 來安裝： 

npm install -g babel

Babel 一旦安裝完成就可以開始編譯你的 ES6 代碼了。再確認一遍你已經在src目錄放入了一些 ES6 文件，下面的命令將會把這個目錄下所有.es6,.es和.js后綴的文件編譯成符合 ES5 規范的代碼到lib目錄下： 

babel -d lib/ src/

如果你想在文件有改動的時候自動完成這些編譯工作可以使用這些常用的 JavaScript 構建工具：Grunt, Gulp 和 Brocolli.

給 ES6 標準庫一個"膩子"

Babel 作為一個源到源的編譯器不可能呈現所有 ES6 標準庫中的新特性，例如Map和Set構造器和Array下的一些新方法。要使用這些我們需要一個"膩子"來填補這些不足。現在有很多 ES6 的膩子比如 core-js，它適用與 Node, io.js 和瀏覽器。

譯者注: 本節原始標題為 Polyfilling the standard library，術語 polyfill 來自于一個家裝產品Polyfilla:

Polyfilla 是一個英國產品，在美國稱之為 Spackling Paste (刮墻的,在中國稱為膩子)。記住這一點就行: 把舊的瀏覽器想象成為一面有了裂縫的墻.這些 polyfill 會幫助我們把這面墻的裂縫抹平,還我們一個更好的光滑的墻壁 (瀏覽器)

</blockquote>

編寫 ES6 代碼

現在構建 ES6 代碼的工具已經備齊了那我們就開始真正有趣的部分。我們不會過多著眼于某個新特性，如果你有需要可以閱讀 Luke Hoban 的 feature list.

我們先在src目錄下創建一個叫person.es6的文件： 

import 'core-js/shim';


export default class Person {


constructor( name ) {
    this.name = name;
  }


sayHello() {
    return Hello ${ this.name }!;
  }


sayHelloThreeTimes() {
    let hello = this.sayHello();
    return ${ hello }.repeat(3);
  }
}</pre>


在這個很簡單的例子中我們用了數個需要 Babel 來解決兼容性的語法，還有一個新的方法String#repeat須要由 core-js 處理。你可以用本文開頭給出的 Babel 命令行代碼或者用 REPL 得到運行結果。 


發布到 npm 


目前為止我們可以編寫、編譯和運行 ES6 代碼，不過你也許還想把你的代碼發布到 npm 上。你顯然不能直接發布然后期望每個人都來自己編譯一次。 


幸好，npm 允許你在發布前用 prepublishscript 選項來修改，這個特性在 CoffeeScript 項目中已經被廣泛使用了。 


現在把package.json文件加入到項目根目錄中： 


{
  "name": "person",
  "version": "0.1.0",
  "scripts": {
    "compile": "babel -d lib/ src/",
    "prepublish": "npm run compile"
  },
  "main": "lib/person.js",
  "dependencies": {
    "core-js": "^0.6.0"
  },
  "devDependencies": {
    "babel": "^4.6.0"
  }
}



注意這個compilescript 會直接運行你在右邊提供 Babel 命令，這樣你就可以直接運行npm run compile來編譯而不需要鍵入文件目錄了，而prepublishscript 會在你每次執行npm publish的時候自動運行。 


還有就是為什么 Babel 會被加入 development dependencies 中，這樣如果有人想參與這個項目就不用全局安裝 Babel 了，npm 會把你項目下包含可執行文件的 node_modules 目錄加入到系統環境變量path中。 


.npmignore文件 


最后你需要確保發布的是編譯出的文件而不是原始的 ES6 文件。如果你的項目根目錄有.gitignore而沒有.npmignore那 npm 就會自動忽略你項目中包含在.gitignore里所有的 文件和目錄。添加.npmignore這樣你發布的包里就是編譯好的文件： 


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