你是否是 JavaScript 新手?并且对模块,模块加载器和模块打包器感到困惑吗?或者你已经编写了一段时间的 JavaScript ,但是没法掌握模块的一些术语?你是否听过 CommonJS、AMD、Browserify、SystemJS、Webpack、JSPM 等等术语,但是不理解我们为什么需要它们?
我会试着解释他们是什么,他们试图解决什么问题,以及他们如何解决这个问题。
示例应用程序
(该图为应用程序运行界面)
在这篇文章中,我将使用一个简单的 web 应用程序来演示模块的概念。应用程序在浏览器中显示数组的和。该应用程序由4个函数和一个 index.html 文件组成。
(该图为函数的依赖示意图)
main 函数计算数组中数字的和,然后把答案显示在 span#answer 中。sum 函数依赖于两个函数:add 和 reduce。add 函数做它名字所做的操作;把两个数相加。reduce 函数遍历数组,并且调用 iteratee 回调函数。
花点时间理解下面的代码。我将会重复多次使用相同的函数。
HTML 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
我们来看看如何把这些代码片段整合在一起,来构建一个应用程序。
使用内嵌脚本
内嵌脚本就是在 标记之间添加 JavaScript 代码。这是我开始学 JavaScript 时的做法。我相信大多数 JavaScript 开发者在其生命中至少做过一次这样的事情。
这是一个很好的入门办法。没有外部文件或依赖关系需要担心。但是这也导致了不可维护的代码,因为:
缺乏代码可重用性:如果需要添加另一个页面,需要从这个页面中获得一些函数,我们就不得不复制粘贴代码。
缺乏依赖解析:你必须保证 main 函数之前已经添加了 add、reduce 和 sum 函数。
全局命名空间污染:所有的函数和变量将都将驻留在全局作用域中。
HTML 代码:
Script 标签引入 JavaScript 文件
这是从嵌入脚本的一个自然过渡。现在我们将大段的 JavaScript 分成更小的代码片段,并用
标签加载它们。
通过将文件分成多个 JavaScript 文件,我们可以重用这些代码。我们不再需要在不同的 html 页面之间复制和粘贴代码。我们只需要将该文件用 script 标签加载就可以了。尽管这是更好的方法,但仍然有以下问题:
缺乏依赖解析:文件的顺序很重要。你必须保证在加载 main.js 文件之前已经加载了 add.js、reduce.js 和 sum.js 文件。
全局命令空间污染:所有的函数和变量依然在全局作用域中。
HTML 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
模块对象和 IIFE(模块模式)
通过使用模块对象和 立即调用的函数表达式(IIFE) ,我们可以减少对全局作用域的污染。在这种方法中,我们只向全局作用域公开一个对象。该对象包含了我们在应用程序中需要的所有方法和值。在本例中,我们只向全局作用域公开了 myApp 对象。所有的函数都将被保存在 myApp 对象中。
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
我们通过将它们附加到myApp对象来公开添加、减少和sum函数。我们通过引用myApp对象来访问这些函数
我们通过将 add、reduce 和 sum 函数附加在 myApp 对象上,从而对外公开它们。我们通过引用 myApp 对象来访问这些函数:
JavaScript 代码:
JavaScript 代码:
与前面的例子相比,IIFE 是一个巨大的改进。大多数流行的 JavaScript 库,如 jQuery ,都使用这种模式。它公开了一个全局对象 $,所有的函数都在 $ 对象中。
然而,这并不能算是一个完美的解决方案。这种方法仍然面临与上一节相同的问题。
缺乏依赖解析:文件的顺序依然重要,myApp.js 必须出现在所有其它文件之前加载,main.js 必须处在所有其它库文件之后。
全局命令空间污染:现在全局变量的数量变成了 1,但是还不是 0 。
CommonJS
2009年,有人讨论将 JavaScript 引入服务器端。因此 ServerJS 诞生了。随后,ServerJS 将其名称改为 CommonJS 。
CommonJS 不是一个 JavaScript 库。它是一个标准化组织。它就像 ECMA 或 W3C 一样。ECMA 定义了 JavaScript 的语言规范。W3C定义了 JavaScript web API ,比如 DOM 或 DOM 事件。 CommonJS 的目标是为 web 服务器、桌面和命令行应用程序定义一套通用的 API 。
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
HTML 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
你可能已经注意到,在 index.html 文件中,script 标记加载了 bundle.js,但是 bundle.js 文件在哪里?一旦我们执行了如下命令,Browserify 就会为我们生成这个文件:
CommandLine 代码:
Browserify 生成如下 bundle.js 文件的代码:
JavaScript 代码:
您不需要逐行地理解这个打包文件。但值得注意的是,所有熟悉的代码、main.js 文件和所有依赖项都包含在这个文件中。
UMD – 只是为了让你更困惑
现在我们已经学习了 全局对象(Global Object),CommonJS 和 AMD 风格的模块。也有一些库可以帮助我们直接使用 CommonJS 或者 AMD 。但是,如果您正在编写一个模块,并部署到互联网上,该怎么办呢?你需要编写哪种模块风格呢?
编写三种不同的模块类型,即 全局模块对象 、CommonJS 和 AMD 。但是你必须维护三个不同的文件。用户将不得不识别他们正在下载的模块的类型。
通用模块定义(Universal Module Definition) ,即我们通常说的 UMD ,就是用来解决这个特殊问题的。本质上,UMD 是一套用来识别当前环境支持的模块风格的 if/else 语句。
JavaScript 代码:
ES6 模块语法
愚人码头注:了解更多关于 ES6 模块的信息,建议阅读 ECMAScript 6 Modules(模块)系统及语法详解。
JavaScript 全局模块对象、CommonJS、AMD 和 UMD,我们有太多的选项了。现在或许你会问,下一个项目我该用哪一个呢?答案是一个都不用。
JavaScript 语言中并没有内置模块系统。这就是为什么我们有这么多不同的导入和导出模块的原因。但这种情况最近发生了变化。 ES6 语言规范中,模块是 JavaScript 的一部分。所以这个问题的答案是,如果你想让你的项目想兼容未来,你需要使用 ES6 模块语法。
ES6 用 import 和 export 关键字来导入和导出模块。如下是用 ES6 模块语法编写的示例应用程序。
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
有很多关于 ES6 模块的流行语:ES6 模块语法是简洁的。ES6 模块将统治 JavaScript 世界。它是未来。但不幸的是,有一个问题。浏览器还没有为这种新语法做好准备。在撰写文章的时候,只有 Chrome 浏览器支持 import 语句。即使大多数浏览器支持 import 和 export ,如果您的应用程序必须支持较老的浏览器,那么您可能会遇到问题。
幸运的是,现在已经有很多工具可以用了,这些工具让我们现在就可以用 ES6 模块语法。
Webpack
Webpack 是一个 模块打包器(module bundler) 。就像 Browserify 一样,它会遍历依赖树,然后将其打包到一到多个文件。那么问题来了,如果它和 Browserify 一样,为什么我们需要另一个模块打包器呢?Webpack 可以处理 CommonJS 、 AMD 和 ES6 模块。并且 Webpack 还有更多的灵活性和一些很酷的功能特性,比如:
代码分离:当您有多个应用程序共享相同的模块时。Webpack 可以将您的代码打包到两个或更多的文件中。例如,如果您有两个应用程序 app1 和 app2 ,并且都共享许多模块。 使用 Browserify ,你会有 app1.js 和 app2.js 。并且都包含所有依赖关系模块。但是使用 Webpack ,您可以创建 app1.js ,app2.js 和 shared-lib.js。是的,您必须从 html 页面加载 2 个文件。但是使用哈希文件名,浏览器缓存和 CDN ,可以减少初始加载时间。
加载器:用自定义加载器,可以加载任何文件到源文件中。用 require() 语法,不仅仅可以加载 JavaScript 文件,还可以加载 CSS、CoffeeScript、Sass、Less、HTML模板、图像,等等。
插件:Webpack 插件可以在打包写入到打包文件之前对其进行操作。有很多社区创建的插件。例如,给打包代码添加注释,添加 Source map,将打包文件分离成块等等。
WebpackDevServer 是一个开发服务器,它可以在源代码改变被检测到时自动打包源代码,并刷新浏览器。它通过提供代码的即时反馈,从而加快开发过程。
让我们来看看我们如何用 Webpack 来构建示例应用程序。Webpack 需要一点引导和配置。
因为 Webpack 是 JavaScript 命令行工具,所以需要先安装上 NodeJS 和 NPM 。装好 NPM 后,执行如下命令初始化项目:
CommandLine 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
打开浏览器,把 URL 指向 http://localhost:8080/webpack-dev-server/,如图:
此时,你可以打开你喜欢的编辑器编辑代码。保存文件时,浏览器会自动刷新以显示修改后的结果。
这里你可能会注意到一件事情,就是找不到 dist/bundle.js 文件。这是因为 Webpack Dev Server 会创建打包文件,但是不会写入到文件系统中,而是放在内存中。
如果要部署,就得创建打包文件。可以通过键入如下命令创建 bundle.js 文件:
CommandLine 代码:
如果有兴趣学习更多的 Webpack 知识,请参考 Webpack 文档页 。
Rollup (2015 年 5 月)
愚人码头注:
Rollup 普及了 JavaScript 圈内一个重要的特性:Tree shaking,即是指消除JavaScript上下文中无用代码,或更精确地说,只保留有用的代码。它依赖于ES6模块 import / export 模块系统的静态结构(static structure)来检测哪一个模块没有被使用,因为,import 和 export 不会在运行时改变。说的再直白一点就是 Tree shaking 从模块包中排除未使用的 exports 项。
webpack 2 内置引入的 Tree-shaking 代码优化技术。 详情阅读 webpack 2 中的 Tree Shaking
将一个大的 JavaScript 库包含进来,只是为了用它几个函数,你是否有这样的经历?Rollup 是另一个 JavaScript ES6 模块打包器。与 Browserify 和 Webpak 不同,rollup 只包含在项目中用到的代码。如果有大模块,带有很多函数,但是你只是用到少数几个,rollup 只会将需要的函数包含到打包文件中,从而显著减少打包文件大小。
Rollup 可以被用作为命令行工具。如果有 NodeJS 和 NPM,那么就可以用如下命令安装 rollup:
CommandLine 代码:
Rollup 可以与任何类型的模块风格一起工作。但是,推荐使用 ES6 模块风格,这样就可以利用 tree-shaking 功能。如下是用 ES6 编写的示例应用程序代码:
JavaScript 代码:
JavaScript 代码:
JavaScript 代码:
SystemJS
SystemJS 是一个通用的模块加载器,它能在浏览器或者 NodeJS 上动态加载模块,并且支持 CommonJS、AMD、全局模块对象和 ES6 模块。通过使用插件,它不仅可以加载 JavaScript,还可以加载 CoffeeScript 和 TypeScript。
SystemJS 的另一个优点是,它建立在 ES6 模块加载器之上,所以它的语法和 API 在将来很可能是语言的一部分,这会让我们的代码更不会过时。
要异步输入一个模块,可以用如下语法:
JavaScript 代码:
然后我们可以用配置 API 来配置 SystemJS 的行为:
JavaScript 代码:
上面的配置会让 SystemJS 使用 babel 作为 ES6 模块的编译器,并且从 /app 目录加载模块。
随着现代 JavaScript 应用程序变得越来越大,越来越复杂,开发工作流也是如此。所以我们不仅仅模块加载器,还得去寻找开发服务器、生产的模块打包器以及第三方模块的包管理器。
JSPM
JSPM 是 JavaScript 开发工具的瑞士军刀,它是既是包管理器,又是模块加载器,又是模块打包器。
现代 JavaScript 开发很少只是需要自己的模块,绝大部分时候,我们还需要第三方模块。使用 JSPM,我们可以使用如下的命令,从 NPM 或者 Github 安装第三方模块:
CommandLine 代码:
jspm install npm:package-name or github:package/name
上述命令会从 npm 或者 github 下载包,并将包安装到 jspm_packages 目录。
在开发模式下,我们可以使用 jspm-server 。像 Webpack Dev Server 一样,它会检测代码改变,重新加载浏览器来显示改变。与 Webpack Dev Server 不同的是,jspm-server 用的是 SystemJS 模块加载器。所以,每次它检测了文件的改变时,不会将所有文件读取来打包,而是只加载页面所需要的模块。
在部署时,肯定要打包代码。JSPM 带有打包器,可以用如下命令对代码打包:
CommandLine 代码:
jspm bundle main.js bundle.js
在幕后,JSPM 用 rollup 作为它的打包器。
总结
我希望本文给了足够的信息来理解 JavaScript 模块的词汇。现在你也许会问,下一个项目我应该用什么呢?不幸的是,我回答不了这个问题。现在你有能力开始自己的探索。希望本文能让你更容易理解我提到的有关工具的文档和文章。
本文所有的代码示例都可以在 这个 Github 仓库 中找到。如有任何疑问,请在下面留言。