JavaScript 的格局日新月异，网站和应用的依赖关系也随之而变。
这篇文章适合那些大量使用 script 标签来加载 JS 的程序员，随着网页数目增多和项目规模的扩大，他们感觉到依赖管理变得越来越笨重。
如果想要深入了解每一个细节，同时想对 CommonJS 和 AMD 规范做比较的话，请参考 Axel Rauschmayer 的 Exploring ES6 book , 尤其是第 17 章。
什么是 JavaScript 模块？
JavaScript 模块允许我们把项目中的代码分散成一个个单独的文件，或者使用通过 npm 安装的开源模块。用模块化的方式写代码有助于（项目的）组织、维护、测试，以及最重要的依赖管理。
当我们编写 JavaScript 时，理想情况是保障每个模块都专注一件事并把这件事做好。这种分工可以让我们在需要某个模块时再去做相应的加载。模块化是是 npm 背后的核心原则。当需要某个特定的功能时，我们能安装相应的模块并加载到应用当中。
随着时间推移，我们发现那种大而全的框架变少了，看到更多的是 专注一件事并把这件事做好 的小型模块。
举个例子，大部分人都用过 jQuery。这个库包含了从 CSS 操作到 ajax 调用几乎全部的方法。现如今，很多人开始迁移到 React 这类库上，我们常常需要加载额外的模块来完成一些任务如 ajax 或路由。
这篇文章将会带你大致了解 npm 和 ES6 模块的使用。对于其它一些的包管理（如 Bower） 和模块加载工具（如 CommonJS 和 AMD），已经有大量的文章和话题在讨论了。
不管你是做 Node 开发还是前端开发，我相信 ES6 模块和 npm 是未来的方向。如果你去看当下流行的开源项目，像 React 或 lodash，你会发现他们都采用了 ES6 模块 ＋ npm。
当前的开发流程
很多 JavaScript 的开发流程是这样的：
- 找一个符合要求的插件或库然后从 GitHub 上下载。
- 通过 script 标签加载到网站。
- 用全局变量调用或以 jQuery 插件的方式调用。
这类开发流程这么多年来表现一直不错，除了这几个问题：
- 插件必须手动升级 － 很难及时得知（该插件）何时修复了严重的bug或是有哪些新功能可用。
- 混乱的源代码版本控制 － 所有依赖都要加入源代码，当库更新时会导致非常不愉快的结果（版本问题）。
- 基本没有依赖管理 － 很多脚本的功能是重复的，如果分成小模块则可以很轻松的实现共享。
- 代码污染和潜在的全局命名空间冲突。
编写模块化的 JavaScript 这种理念并不新鲜，不过随着 ES6 的到来和业界将 npm 作为 JavaScript 的首选包管理工具，我们看到大量的开发摒弃了从前的工作流程，迁移到使用 ES6 和 npm 的标准化流程上来。
等等，npm？那不是 Node 专用的吗？
很久以前，npm 是作为 Node.js 的包管理工具起步的，如今它已经进化为JavaScript和前端开发的包管理工具。现在，我们可以把库的安装过程简化为 2 个步骤：
- 从 npm 安装依赖，例如：
1npm install lodash --save - 在当前文件中导入刚才的依赖，例如：
1import _ from 'lodash';
这套开发流程还需要很多的工作要做，同时关于模块的导入导出也有很多需要学习，现在让我们来深入了解一下吧。
模块背后的理念
我们使用导入和导出语句来在文件之间共享代码（变量、函数、数据、任何代码），而不是把所有代码加载到全局命名空间下。每一个模块导入需要的依赖，也可以为其它文件导出需要的代码。
让代码在浏览器运行还需要一个打包的步骤，我们会在文章的后面加以讨论，现在，让我们专注于 JavaScript 模块背后的核心理念。
创建自己的模块
假设我们正在构建一个在线购物的应用，需要一个文件存放所有的辅助函数。我们可以创建一个模块命名为 helpers.js ，文件包含一些辅助函数 － formatPrice(price)、 addTax(price) 和 discountPrice(price, percentage)，还有一些关于该在线商城的变量。
我们的 helpers.js 文件看起来如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const taxRate = 0.13; const couponCodes = ['BLACKFRIDAY', 'FREESHIP', 'HOHOHO']; function formatPrice(price) { // .. 做一些格式化 return formattedPrice; } function addTax(price) { return price * (1 + taxRate); } function discountPrice(price, percentage) { return price * (1 - percentage); } |
现在，每个文件都持有自己的本地函数和变量，只要没有明确地导出，它们绝不会渗透到其它文件的作用域中。在上面的例子里，我们可能不想让其它模块访问 taxRate 变量，但在模块内部确实需要这个变量。
我们怎么让其它模块访问到这些函数和变量呢？答案是导出它们。在 ES6 中有两种导出方式，命名导出和默认导出。由于需要让多个函数和 couponCodes 变量被访问到，我们使用命名导出。稍后我们会加以详述。
从模块导出代码，最简单直白的方式就是在行首加上 export 关键字，像这样：
|
1 2 3 4 5 6 7 8 9 10 |
const taxRate = 0.13; export const couponCodes = ['BLACKFRIDAY', 'FREESHIP', 'HOHOHO']; export function formatPrice(price) { // .. 做一些格式化 return formattedPrice; } // ... |
我们也可以在最后再导出：
|
1 2 3 4 |
export couponCodes; export formatPrice; export addTax; export discountPrice; |
或者里一次性导出：
|
1 |
export { couponCodes, formatPrice, addTax, discountPrice }; |
还有很多其它很便捷的导出方式，如果碰到有些情形无法满足你的工作需求，请查看 MDN 的文档。
默认导出
前面提到，从模块中有两种导出方式 － 命名或默认。上面的例子用了命名导出。如果要让其它模块导入这些出口，我们必须要知道我们希望导入的变量/函数的名称 － 接下来会有一个例子说明。使用命名导出的好处是你可以从一个模块中导出多项内容。
另一种导出方式是默认导出。当需要导出多个变量／函数时，可以用命名导出，当你的模块只需要导出一个变量/函数的时候，使用默认导出就行了。尽管你可以在一个模块中同时使用默认导出和命名导出，我还是建议你每个模块只采用一种方式。
默认导出的例子是一个单独的 StorePicker React 组件，或者是某个数组。例如，下面这个数组需要让其它组件访问到，我们可以用默认导出。
|
1 2 3 4 5 6 |
// people.js const fullNames = ['Drew Minns', 'Heather Payne', 'Kristen Spencer', 'Wes Bos', 'Ryan Christiani']; const Wes Bos', 'Ryan Christiani']; const ų系也随之而变。
这篇文章适合那些大量使用 script 标签来加载 JS 的程序员，随着网页数目增多和项目规模的扩大，他们感觉到依赖管理变得越来越笨重。 如果想要深入了解每一个细节，同时想对 CommonJS 和 AMD 规范做比较的话，请参考 Axel Rauschmayer 的 Exploring ES6 book , 尤其是第 17 章。 什么是 JavaScript 模块？JavaScript 模块允许我们把项目中的代码分散成一个个单独的文件，或者使用通过 当我们编写 JavaScript 时，理想情况是保障每个模块都专注一件事并把这件事做好。这种分工可以让我们在需要某个模块时再去做相应的加载。模块化是是 随着时间推移，我们发现那种大而全的框架变少了，看到更多的是 专注一件事并把这件事做好 的小型模块。 举个例子，大部分人都用过 jQuery。这个库包含了从 CSS 操作到 ajax 调用几乎全部的方法。现如今，很多人开始迁移到 React 这类库上，我们常常需要加载额外的模块来完成一些任务如 ajax 或路由。 这篇文章将会带你大致了解 不管你是做 Node 开发还是前端开发，我相信 ES6 模块和 当前的开发流程很多 JavaScript 的开发流程是这样的：
这类开发流程这么多年来表现一直不错，除了这几个问题：
编写模块化的 JavaScript 这种理念并不新鲜，不过随着 ES6 的到来和业界将 npm 作为 JavaScript 的首选包管理工具，我们看到大量的开发摒弃了从前的工作流程，迁移到使用 ES6 和 npm 的标准化流程上来。 等等，npm？那不是 Node 专用的吗？很久以前，npm 是作为 Node.js 的包管理工具起步的，如今它已经进化为JavaScript和前端开发的包管理工具。现在，我们可以把库的安装过程简化为 2 个步骤：
这套开发流程还需要很多的工作要做，同时关于模块的导入导出也有很多需要学习，现在让我们来深入了解一下吧。 模块背后的理念我们使用导入和导出语句来在文件之间共享代码（变量、函数、数据、任何代码），而不是把所有代码加载到全局命名空间下。每一个模块导入需要的依赖，也可以为其它文件导出需要的代码。 让代码在浏览器运行还需要一个打包的步骤，我们会在文章的后面加以讨论，现在，让我们专注于 JavaScript 模块背后的核心理念。 创建自己的模块假设我们正在构建一个在线购物的应用，需要一个文件存放所有的辅助函数。我们可以创建一个模块命名为 helpers.js ，文件包含一些辅助函数 － formatPrice(price)、 addTax(price) 和 discountPrice(price, percentage)，还有一些关于该在线商城的变量。 我们的 helpers.js 文件看起来如下：
现在，每个文件都持有自己的本地函数和变量，只要没有明确地导出，它们绝不会渗透到其它文件的作用域中。在上面的例子里，我们可能不想让其它模块访问 taxRate 变量，但在模块内部确实需要这个变量。 我们怎么让其它模块访问到这些函数和变量呢？答案是导出它们。在 ES6 中有两种导出方式，命名导出和默认导出。由于需要让多个函数和 couponCodes 变量被访问到，我们使用命名导出。稍后我们会加以详述。 从模块导出代码，最简单直白的方式就是在行首加上 export 关键字，像这样：
我们也可以在最后再导出：
或者里一次性导出：
还有很多其它很便捷的导出方式，如果碰到有些情形无法满足你的工作需求，请查看 MDN 的文档。 默认导出前面提到，从模块中有两种导出方式 － 命名或默认。上面的例子用了命名导出。如果要让其它模块导入这些出口，我们必须要知道我们希望导入的变量/函数的名称 － 接下来会有一个例子说明。使用命名导出的好处是你可以从一个模块中导出多项内容。 另一种导出方式是默认导出。当需要导出多个变量／函数时，可以用命名导出，当你的模块只需要导出一个变量/函数的时候，使用默认导出就行了。尽管你可以在一个模块中同时使用默认导出和命名导出，我还是建议你每个模块只采用一种方式。 默认导出的例子是一个单独的 StorePicker React 组件，或者是某个数组。例如，下面这个数组需要让其它组件访问到，我们可以用默认导出。
|
