你是不是也在為可以使用ES6的新特性而興奮，卻不太確定應該從哪開始，或者如何開始？不止你一個人這樣！我已經花了一年半的時間去解決這個幸福的難題。在這段時間裡 JavaScript 工具鏈中有幾個令人興奮的突破。
這些突破讓我們可以用ES6書寫完全的JS模組，而不會為了一些基本的條件而妥協，比如testing，linting 和（最重要的）其他人可以輕易理解我們所寫的程式碼。
在這篇文章中，我們集中精力在如何用ES6構建JS模組，並且無論你在你的網站或者app中使用CommonJS，AMD（asynchronous module definition）或者普通的網頁script引入，這個模組都可以輕易被引用。
The Tools
在這個系列文章的第一部分和第二部分，我們來看一下這些卓越的工具們。在這篇文章中，我們詳細說明如何編寫，編譯，打包程式碼；而在第二篇文章會集中在linting，formatting 和 testing（利用 JSCS，ESLint，mocha，Chai，Karma 和 Istanbul）。讓我們來看看在這篇文章中涉及到的工具：
- Babel(剛剛度過了它的第一個生日)可以把ES6程式碼轉化為ES5程式碼，不僅簡單，而且優雅。
- Webpack，webpack平寂了我們組裡的“模組戰爭”，我們每個人都鎮定得使用著webpack來應付一切(CommonJS，AMD 和 ES6)。它也在打包獨立的ES6庫方面做得非常棒——這是我們在過去一直渴望看到的。
- Gulp一個強大的自動化構建工具。
The Goal
WRITE IN ES6, USE IN ES5
我們將要討論的是書寫客戶端（client-side）ES6 libraries，而不是整個網站或者 app 。（無論是在你的開源專案裡或者是在你工作中的軟體專案，這是可以在不同的專案中可複用的程式碼。）”等一下！“，你可能會想：”這個難道不是在瀏覽器支援ES6之後才能實現的嗎？“
你是對的！然而，我們利用上面提到的Babel可以把ES6程式碼轉化為ES5程式碼，在大多數情況下現在就可以實現我們的目標。
MAKE IT EASY FOR ANYONE TO CONSUME
我們目標的第二部分是寫一個無論在什麼模組規範下都可以使用的JS模組。AMD死忠飯？你會得到一個可用的模組。CommonJS 加 browserify 才是你的最愛？沒問題！你會得到一個可用的模組。或者你對AMD和CommonJS不感冒，你只是想要在你的頁面上加一個<script>引用並且成功執行？你也會得到一個可用的模組。Webpack會把我們的程式碼打包成UMD（ universal module definition）模組規範，使我們的程式碼在任何程式碼規範中都可用。
Setting Up Our Project
在接下來的幾分鐘，我們將要完成這些程式碼。我經常用src/，spec/ 和 lib/資料夾來構建專案。在src/目錄裡，你會看到一個有趣的示例模組，這個模組是提供樂高電影裡的樂高角色的隨機語錄。這個示例會用到ES6的classes，modules，const，destructuring，generator等--這些可以被安全轉化為ES5程式碼的新特性。
這篇文章的主要目的是討論如何利用 Babel 和 Webpack 來編譯和打包 ES6 library。然而我還是想簡要的介紹我們的示例程式碼以證明我們切實在用 ES6。
Note: 你如果是 ES6 新手，不必擔心。這個示例足夠簡單到你們會看懂。
The LegoCharacter Class
在 LegoCharacter.js 模組中，我們可以看到如下程式碼（檢視註釋瞭解更多）：
// LegoCharacter.js
// Let's import only the getRandom method from utils.js
import { getRandom } from "./utils";
// the LegoCharacter class is the default export of the module, similar
// in concept to how many node module authors would export a single value
export default class LegoCharacter {
// We use destructuring to match properties on the object
// passed into separate variables for character and actor
constructor( { character, actor } ) {
this.actor = actor;
this.name = character;
this.sayings = [
"I haven't been given any funny quotes yet."
];
}
// shorthand method syntax, FOR THE WIN
// I've been making this typo for years, it's finally valid syntax :)
saySomething() {
return this.sayings[ getRandom( 0, this.sayings.length - 1 ) ];
}
}複製程式碼這些程式碼本身很無聊--class意味著可以被繼承，就像我們在 Emmet.js 模組裡做的：
// emmet.js
import LegoCharacter from "./LegoCharacter";
// Here we use the extends keyword to make
// Emmet inherit from LegoCharacter
export default class Emmet extends LegoCharacter {
constructor() {
// super lets us call the LegoCharacter's constructor
super( { actor: "Chris Pratt", character: "Emmet" } );
this.sayings = [
"Introducing the double-decker couch!",
"So everyone can watch TV together and be buddies!",
"We're going to crash into the sun!",
"Hey, Abraham Lincoln, you bring your space chair right back!",
"Overpriced coffee! Yes!"
];
}
}複製程式碼在我們的專案中，LegoCharacter.js 和 emmet.js 都是分開的單獨的檔案--這是我們示例程式碼中的典型例子。跟你之前寫的 JavaScript 程式碼相比，我們的示例程式碼可能比較陌生。然而，在我們完成我們一系列的工作之後，我們將會得到一個 將這些程式碼打包到一起的‘built’版本。
The index.js
我們專案中的另一個檔案-- index.js --是我們專案的主入口。在這個檔案中 import 了一些 Lego 角色的類，生成他們的例項，並且提供了一個生成器函式（generator function），這個生成器函式來 yield 一個隨機的語錄：
// index.js
// Notice that lodash isn't being imported via a relative path
// but all the other modules are. More on that in a bit :)
import _ from "lodash";
import Emmet from "./emmet";
import Wyldstyle from "./wyldstyle";
import Benny from "./benny";
import { getRandom } from "./utils";
// Taking advantage of new scope controls in ES6
// once a const is assigned, the reference cannot change.
// Of course, transpiling to ES5, this becomes a var, but
// a linter that understands ES6 can warn you if you
// attempt to re-assign a const value, which is useful.
const emmet = new Emmet();
const wyldstyle = new Wyldstyle();
const benny = new Benny();
const characters = { emmet, wyldstyle, benny };
// Pointless generator function that picks a random character
// and asks for a random quote and then yields it to the caller
function* randomQuote() {
const chars = _.values( characters );
const character = chars[ getRandom( 0, chars.length - 1 ) ];
yield `${character.name}: ${character.saySomething()}`;
}
// Using object literal shorthand syntax, FTW
export default {
characters,
getRandomQuote() {
return randomQuote().next().value;
}
};複製程式碼在這個程式碼塊中，index.js 引入了lodash，我們的三個Lego角色的類，和一個實用函式（utility function）。然後生成三個類的例項，匯出（exports）這三個例項和getRandomQuote方法。一切都很完美，當程式碼被轉化為ES5程式碼後依然會有一樣的作用。
OK. Now What?
我們已經運用了ES6的一些閃亮的新特性，那麼如何才能轉化為ES5的程式碼呢？首先，我們需要通過 npm來安裝Babel:
npm install -g babel複製程式碼在全域性安裝Babel會提供我們一個babel 命令列工具（command line interface (CLI) option）。如果在專案的根目錄寫下如下命令，我們可以編譯我們的模組程式碼為ES5程式碼，並且把他們放到lib/目錄：
babel ./src -d ./lib/複製程式碼現在看一下lib/目錄，我們將看到如下檔案列表：
LegoCharacter.js
benny.js
emmet.js
index.js
utils.js
wyldstyle.js複製程式碼還記得上面我們提到的嗎？Babel把每一個模組程式碼轉化為ES5程式碼，並且以同樣的目錄結構放入lib/目錄。看一下這些檔案可以告訴我們兩個事情：
- 首先，在node環境中只要依賴 babel/register執行時，這些檔案就可以馬上使用。在這篇文章結束之前，你會看到一個在node中執行的例子。
- 第二，我們還有很多工作要做，以使這些檔案打包進一個檔案中，並且以UMD(universal module definition )規範打包，並且可以在瀏覽器環境中使用。
Enter webpack
我打賭你已經聽說過Webpack，它被描述為“一個JavaScript和其他靜態資源打包工具”。Webpack的典型應用場景就是作為你的網站應用的載入器和打包器，可以打包你的JavaScript程式碼和其他靜態資源，比如CSS檔案和模板檔案，將它們打包為一個（或者更多）檔案。webpack有一個非常棒的生態系統，叫做“loaders”，它可以使webpack對你的程式碼進行一些變換。打包一個UMD規範的檔案並不是webpack最用途廣泛的應用，我們還可以用webpack loader將ES6程式碼轉化為ES5程式碼，並且把我們的示例程式碼打包為一個輸出檔案。
LOADERS
在webpack中，loaders可以做很多事情，比如轉化ES6程式碼為ES5，把LESS編譯為CSS，載入JSON檔案，載入模板檔案，等等。Loaders為將要轉化的檔案一個test模式。很多loaders也有自己額外的配置資訊。（好奇有多少loaders存在？看這個列表）
我們首先在全域性環境安裝webpack（它將給我們一個webpack命令列工具（CLI））:
npm install -g webpack複製程式碼接下來為我們本地專案安裝babel-loader。這個loader可以載入我們的ES6模組並且把它們轉化為ES5。我們可以在開發模式安裝它，它將出現在package.json檔案的devDependencies中：
npm install --save-dev babel-loader複製程式碼在我們開始使用webpack之前，我們需要生成一個webpack的配置檔案，以告訴webpack我們希望它對我們的檔案做些什麼工作。這個檔案經常被命名為webpack.config.js，它是一個node模組格式的檔案，輸出一系列我們需要webpack怎麼做的配置資訊。
下面是初始化的webpack.config.js，我已經做了很多註釋，我們也會討論一些重要的細節：
module.exports = {
// entry is the "main" source file we want to include/import
entry: "./src/index.js",
// output tells webpack where to put the bundle it creates
output: {
// in the case of a "plain global browser library", this
// will be used as the reference to our module that is
// hung off of the window object.
library: "legoQuotes",
// We want webpack to build a UMD wrapper for our module
libraryTarget: "umd",
// the destination file name
filename: "lib/legoQuotes.js"
},
// externals let you tell webpack about external dependencies
// that shouldn't be resolved by webpack.
externals: [
{
// We're not only webpack that lodash should be an
// external dependency, but we're also specifying how
// lodash should be loaded in different scenarios
// (more on that below)
lodash: {
root: "_",
commonjs: "lodash",
commonjs2: "lodash",
amd: "lodash"
}
}
],
module: {
loaders: [
// babel loader, testing for files that have a .js extension
// (except for files in our node_modules folder!).
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel",
query: {
compact: false // because I want readable output
}
}
]
}
};複製程式碼讓我們來看一些關鍵的配置資訊。
Output
一個wenpack的配置檔案應該有一個output物件，來描述webpack如何build 和 package我們的程式碼。在上面的例子中，我們需要打包一個UMD規範的檔案到lib/目錄中。
Externals
你應該注意到我們的示例中使用了lodash。我們從外部引入依賴lodash用來更好的構建我們的專案，而不是直接在output中include進來lodash本身。externals選項讓我們具體宣告一個外部依賴。在lodash的例子中，它的global property key（_）跟它的名字（”lodash“）是不一樣的，所以我們上面的配置告訴webpack如何在不同的規範中依賴lodash(CommonJS, AMD and browser root)。
The Babel Loader
你可能注意到我們把 babel-loader 直接寫成了“babel”。這是webpack的命名規範：如果外掛命名為“myLoaderName-loader”格式，那麼我們在用的時候就可以直接寫做”myLoaderName“。
除了在node_modules/目錄下的.js檔案,loader會作用到任何其他.js檔案。compact選項中的配置表示我們不需要壓縮編譯過的檔案，因為我想要我的程式碼具有可讀性（一會我們會壓縮我們的程式碼）。
如果我們在專案根目錄中執行webpack命令，它將根據webpack.config.js檔案來build我們的程式碼，並且在命令列裡輸出如下的內容：
» webpack
Hash: f33a1067ef2c63b81060
Version: webpack 1.12.1
Time: 758ms
Asset Size Chunks Chunk Names
lib/legoQuotes.js 12.5 kB 0 [emitted] main
+ 7 hidden modules複製程式碼現在如果我們檢視lib/目錄，我們會發現一個嶄新的legoQuotes.js檔案，並且它是符合webpack的UMD規範的程式碼，就像下面的程式碼片段：
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("lodash"));
else if(typeof define === 'function' && define.amd)
define(["lodash"], factory);
else if(typeof exports === 'object')
exports["legoQuotes"] = factory(require("lodash"));
else
root["legoQuotes"] = factory(root["_"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
// MODULE CODE HERE
});複製程式碼UMD規範首先檢查是否是CommonJS規範，然後再檢查是否是AMD規範，然後再檢查另一種CommonJS規範，最後回落到純瀏覽器引用。你可以發現首先在CommonJS或者AMD環境中檢查是否以“lodash”載入lodash，然後在瀏覽器中是否以_代表lodash。
What Happened, Exactly？
當我們在命令列裡執行webpack命令，它首先去尋找配置檔案的預設名字（webpack.config.js），然後閱讀這些配置資訊。它會發現src/index.js是主入口檔案，然後開始載入這個檔案和這個檔案的依賴項（除了lodash，我們已經告訴webpack這是外部依賴）。每一個依賴檔案都是.js檔案，所以babel loader會作用在每一個檔案，把他們從ES6程式碼轉化為ES5。然後所有的檔案打包成為一個輸出檔案，legoQuotes.js，然後把它放到lib目錄中。
觀察程式碼會發現ES6程式碼確實已經被轉化為ES5.比如，LegoCharacter類中有一個ES5建構函式：
// around line 179
var LegoCharacter = (function () {
function LegoCharacter(_ref) {
var character = _ref.character;
var actor = _ref.actor;
_classCallCheck(this, LegoCharacter);
this.actor = actor;
this.name = character;
this.sayings = ["I haven't been given any funny quotes yet."];
}
_createClass(LegoCharacter, [{
key: "saySomething",
value: function saySomething() {
return this.sayings[(0, _utils.getRandom)(0, this.sayings.length - 1)];
}
}]);
return LegoCharacter;
})();複製程式碼It’s Usable!
這時我們就可以include這個打包好的檔案到所有的瀏覽器（IE9+，當然~）中，也可以在node中執行完美，只要babel執行時依賴完美。
如果我們想在瀏覽器使用，它看起來會像下面的樣子：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lego Quote Module Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<blockquote id="quote"></blockquote>
<button id="btnMore">Get Another Quote</button>
</div>
<script src="../node_modules/lodash/index.js"></script>
<script src="../node_modules/babel-core/browser-polyfill.js"></script>
<script src="../lib/legoQuotes.js"></script>
<script src="./main.js"></script>
</body>
</html>複製程式碼你會看到我們已經依賴legoQuotes.js（就在babel的browser-polyfill.js下面），就像其他依賴一樣使用<script>標籤。我們的main.js使用了legoQuotes庫，看起來是這個樣子：
// main.js
( function( legoQuotes ) {
var btn = document.getElementById( "btnMore" );
var quote = document.getElementById( "quote" );
function writeQuoteToDom() {
quote.innerHTML = legoQuotes.getRandomQuote();
}
btn.addEventListener( "click", writeQuoteToDom );
writeQuoteToDom();
} )( legoQuotes );複製程式碼在node環境中使用，是這個樣子：
require("babel/polyfill");
var lego = require("./lib/legoQuotes.js");
console.log(lego.getRandomQuote());
// > Wyldstyle: Come with me if you want to not die.複製程式碼Moving To Gulp
Babel和webpack的命令列工具都非常有用和高效，但是我更傾向於用類似於Gulp的自動化構建工具來執行其他類似的任務。如果你有很多專案，那麼你會體會到構建命令一致性所帶來的好處，我們只需要記住類似gulp someTaskName的命令，而不需要記很多其他命令。在大多數情況下，這無所謂對與錯，如果你喜歡其他的命令列工具，就去使用它。在我看來使用Gulp是一個簡單而高效的選擇。
###SETTING UP A BUILD TASK
首先，我們要安裝Gulp：
npm install -g gulp複製程式碼接下來我們建立一個gulpfile配置檔案。然後我們執行npm install --save-dev webpack-stream命令，來安裝和使用webpack-streamgulp 外掛。這個外掛可以讓webpack在gulp任務中完美執行。
// gulpfile.js
var gulp = require( "gulp" );
var webpack = require( "webpack-stream" );
gulp.task( "build", function() {
return gulp.src( "src/index.js" )
.pipe( webpack( require( "./webpack.config.js" ) ) )
.pipe( gulp.dest( "./lib" ) )
} );複製程式碼現在我已經把index.js放到了gulp的src中並且寫入了output目錄，那麼我需要修改webpack.config.js檔案，我刪除了entry並且更新了filename。我還新增了devtool配置，它的值為#inline-source-map（這將會在一個檔案末尾寫入一個source map）：
// webpack.config.js
module.exports = {
output: {
library: "legoQuotes",
libraryTarget: "umd",
filename: "legoQuotes.js"
},
devtool: "#inline-source-map",
externals: [
{
lodash: {
root: "_",
commonjs: "lodash",
commonjs2: "lodash",
amd: "lodash"
}
}
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel",
query: {
compact: false
}
}
]
}
};複製程式碼WHAT ABOUT MINIFYING?
我很高興你問了這個問題！我們用gulp-uglify，配合使用gulp-sourcemaps(給我們的min檔案生成source map)，gulp-rename(我們給壓縮檔案重新命名，這樣就不會覆蓋未壓縮的原始檔案)，來完成程式碼壓縮工作。我們新增它們到我們的專案中：
npm install --save-dev gulp-uglify gulp-sourcemaps gulp-rename複製程式碼我們的未壓縮檔案依然有行內的source map，但是gulp-sourcemaps的作用是為壓縮檔案生成一個單獨的source map檔案：
// gulpfile.js
var gulp = require( "gulp" );
var webpack = require( "webpack-stream" );
var sourcemaps = require( "gulp-sourcemaps" );
var rename = require( "gulp-rename" );
var uglify = require( "gulp-uglify" );
gulp.task( "build", function() {
return gulp.src( "src/index.js" )
.pipe( webpack( require( "./webpack.config.js" ) ) )
.pipe( gulp.dest( "./lib" ) )
.pipe( sourcemaps.init( { loadMaps: true } ) )
.pipe( uglify() )
.pipe( rename( "legoQuotes.min.js" ) )
.pipe( sourcemaps.write( "./" ) )
.pipe( gulp.dest( "lib/" ) );
} );複製程式碼現在在命令列裡執行gulp build，我們會看到如下輸出：
» gulp build
[19:08:25] Using gulpfile ~/git/oss/next-gen-js/gulpfile.js
[19:08:25] Starting 'build'...
[19:08:26] Version: webpack 1.12.1
Asset Size Chunks Chunk Names
legoQuotes.js 23.3 kB 0 [emitted] main
[19:08:26] Finished 'build' after 1.28 s複製程式碼現在在lib/目錄裡有三個檔案：legoQuotes.js，legoQuotes.min.js 和 legoQuotes.min.js.map。
Webpack Banner Plugin
如果你需要在你打包好的檔案頭部新增licence等註釋資訊，webpack可以簡單實現。我更新了webpack.config.js檔案，新增了BannerPlugin。我不喜歡親自去編輯這些註釋資訊，所以我引入了package.json檔案來獲取這些關於庫的資訊。我還把webpack.config.js寫成了ES6的格式，可以使用新特性template string來書寫這些資訊。在webpack.config.js檔案底部可以看到我們新增了plugins屬性，目前BannerPlugin使我們唯一使用的外掛：
// webpack.config.js
import webpack from "webpack";
import pkg from "./package.json";
var banner = `
${pkg.name} - ${pkg.description}
Author: ${pkg.author}
Version: v${pkg.version}
Url: ${pkg.homepage}
License(s): ${pkg.license}
`;
export default {
output: {
library: pkg.name,
libraryTarget: "umd",
filename: `${pkg.name}.js`
},
devtool: "#inline-source-map",
externals: [
{
lodash: {
root: "_",
commonjs: "lodash",
commonjs2: "lodash",
amd: "lodash"
}
}
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel",
query: {
compact: false
}
}
]
},
plugins: [
new webpack.BannerPlugin( banner )
]
};複製程式碼(Note: 值得注意的是當我把webpack.config.js寫成ES6，就不能再使用webpack命令列工具來執行它了。)
我們的gulpfile.js也做了兩個更新：在第一行新增了babel register hook；我們傳入了gulp-uglify 的配置資訊：
// gulpfile.js
require("babel/register");
var gulp = require( "gulp" );
var webpack = require( "webpack-stream" );
var sourcemaps = require( "gulp-sourcemaps" );
var rename = require( "gulp-rename" );
var uglify = require( "gulp-uglify" );
gulp.task( "build", function() {
return gulp.src( "src/index.js" )
.pipe( webpack( require( "./webpack.config.js" ) ) )
.pipe( gulp.dest( "./lib" ) )
.pipe( sourcemaps.init( { loadMaps: true } ) )
.pipe( uglify( {
// This keeps the banner in the minified output
preserveComments: "license",
compress: {
// just a personal preference of mine
negate_iife: false
}
} ) )
.pipe( rename( "legoQuotes.min.js" ) )
.pipe( sourcemaps.write( "./" ) )
.pipe( gulp.dest( "lib/" ) );
} );複製程式碼What’s Next?
我們已經為我們的旅途開了個好頭！！到目前為止我們已經用Babel 和 webpack命令列工具構建了我們的專案，然後我們用gulp(和相關外掛)自動化構建打包我們的專案。這篇文章的程式碼包含了example/資料夾，在其中有瀏覽器端和node端的示例。在下一篇文章中，我們將用 ESLint 和 JSCS 來檢查我們的程式碼，用 mocha 和 chai 來書寫測試，用 Karma 來跑這些測試，用 istanbul 來計量測試的覆蓋面。同時，你可以看另一篇非常棒的文章--Designing Better JavaScript APIs，它可以幫助你寫出更好的模組程式碼。
譯自Writing Next Generation Reusable JavaScript Modules in ECMAScript 6