[译] 用 ES6 构建新一代可复用 JS 模块

摘要：我们已经运用了的一些闪亮的新特性，那么如何才能转化为的代码呢首先，我们需要通过来安装在全局安装会提供我们一个命令行工具。

你是不是也在为可以使用ES6的新特性而兴奋，却不太确定应该从哪开始，或者如何开始？不止你一个人这样！我已经花了一年半的时间去解决这个幸福的难题。在这段时间里 JavaScript 工具链中有几个令人兴奋的突破。

这些突破让我们可以用ES6书写完全的JS模块，而不会为了一些基本的条件而妥协，比如testing，linting 和（最重要的）其他人可以轻易理解我们所写的代码。

在这篇文章中，我们集中精力在如何用ES6构建JS模块，并且无论你在你的网站或者app中使用CommonJS，AMD（asynchronous module definition）或者普通的网页script引入，这个模块都可以轻易被引用。

在这个系列文章的第一部分和第二部分，我们来看一下这些卓越的工具们。在这篇文章中，我们详细说明如何编写，编译，打包代码；而在第二篇文章会集中在linting，formatting 和 testing（利用 JSCS，ESLint，mocha，Chai，Karma 和 Istanbul）。让我们来看看在这篇文章中涉及到的工具：

Babel(刚刚度过了它的第一个生日)可以把ES6代码转化为ES5代码，不仅简单，而且优雅。

Webpack，webpack平寂了我们组里的“模块战争”，我们每个人都镇定得使用着webpack来应付_一切_(CommonJS，AMD 和 ES6)。它也在打包独立的ES6库方面做得非常棒——这是我们在过去一直渴望看到的。

Gulp一个强大的自动化构建工具。

我们将要讨论的是书写客户端（client-side）ES6 _libraries_，而不是整个网站或者 app 。（无论是在你的开源项目里或者是在你工作中的软件项目，这是可以在不同的项目中可复用的代码。）”等一下！“，你可能会想：”这个难道不是在浏览器支持ES6之后才能实现的吗？“

你是对的！然而，我们利用上面提到的Babel可以把ES6代码转化为ES5代码，在大多数情况下现在就可以实现我们的目标。

我们目标的第二部分是写一个无论在什么模块规范下都可以使用的JS模块。AMD死忠饭？你会得到一个可用的模块。CommonJS 加 browserify 才是你的最爱？没问题！你会得到一个可用的模块。或者你对AMD和CommonJS不感冒，你只是想要在你的页面上加一个

你会看到我们已经依赖legoQuotes.js（就在babel的browser-polyfill.js下面），就像其他依赖一样使用