使用 JavaScript 包管理工具（npm）
大约从 2010 年开始，几个相互竞争的 JavaScript 包管理工具开始出现，来帮人们从中心仓库中自动完成下载和升级的流程。Bower 在 2013 年可以说是最流行的一个了，但最终在 2015 年左右还是被 npm 打败了。（值得一提的是，大约从 2016 年开始，yarn 作为一个可选的 npm 替代开始占据一席之地，但 npm 仍占上风。）
注意到，npm 作为一个包管理工具，最开始是专门为 node.js -- 一个运行在服务器端的 JavaScript 运行时 (runtime) 而准备的，并不是前端。所以选择它作为在浏览器中运行 JavaScript 的前端包管理工具似乎有些奇怪。
注意： 使用包管理工具通常涉及命令行的使用，在以前这并不是一个前端开发者所必须的技能。如果你从未使用过，可以阅读 这篇教程概览一番。无论如何，知道如何使用命令行也是现代 JavaScript 开发的一部分（这也是进入其他领域重要的一步）。
让我们看看怎么使用 npm 来自动完成 moment.js 的安装。如果你安装了 node.js，npm 也就已经随之安装了，你可以操纵你的命令行进入 index.html 目录下并输入：
$ npm init
这将会引导你填写几个问题（默认值也可以，你可以一直敲 “Enter” 键）并生成一个叫做 package.json 的文件，大概长这样：
{
"name": "your-project-name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
要安装 monment.js 包的话，我们可以按照主页上介绍的 npm 安装方法在命令行敲下：
$ npm install moment --save
这行命令做了两件事 -- 第一，它从 moment.js package 下载了所有代码到一个叫 node_modules 的文件夹中。第二，它自动修改了 package.json 文件来追踪 moment.js 作为项目的依赖：
{
"name": "modern-javascript-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": { // 手动加粗
"moment": "^2.19.1"
}
}
这在和他人共享项目时非常有用 -- 并不需要直接共享 node_modules 文件夹（可能会非常大），你只需要共享你的 package.json 文件，其他开发者便可以使用命令 npm install 自动安装项目所需要的包。
现在，我们不再需要从网站上手动下载 moment.js 了，我们可以使用 npm 自动下载和更新。然后看一下 node_modules 内部，发现 moment.min.js 文件位于 node_modules/moment/min 目录。所以可以把 npm 下载的版本的 moment.min.js 像这样引入 index.html 文件：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Exampletitle>
<script src="node_modules/moment/min/moment.min.js">script>
<script src="index.js">script>
head>
<body>
<h1>Hello from HTML!h1>
body>
html>
所以好消息是我们现在可以通过命令行使用 npm 下载和更新包了。坏消息是我们还得搜寻整个 node_modules 目录来定位每个包的路径再手动添加到我们 HTML 文件中。实在太太不方便了，所以下一步，来看看怎么把这个过程也自动化起来吧。
使用 JavaScript 模块打包工具（webpack）
大多数编程语言都会提供从一个文件导入另一个文件代码的机制。然而 JavaScript 最初设计时并没有这个特性，因为 JavaScript 原本是为了在浏览器端运行而设计的，并没有权限获取计算机客户端的文件系统（安全考虑）。所以很长一段时间以来，组织多个文件的 JavaScript 代码就是把每个文件下载下来，变量是全局共享的。
这实际上和我们刚才对 moment.js 的所做的并无二致 -- 把整个的 moment.min.js 文件下载到 HTML 中，定义了一个全局变量 moment，对于所有在 moment.min.js 之后下载的文件都可用（无论是否真的需要它）。
2009 年，一个叫做 CommonJS 的项目兴起，目标是规范 JavaScript 在浏览器之外的生态系统。CommonJS 中很大的一部分便是对模块系统的规范，允许 JavaScript 像大多数编程语言那样允许导入导出代码而不用借助于全局变量。最知名的对 CommonJS 模块规范的实现便是 node.js。（译者注：Node 在实现中也并非完全按照规范，而是对模块规范进行了一定取舍，同时增加了一些自身需要的特性。）
如前所述，node.js 是为 JavaScript 设计在服务器端的一个运行时。假如让我们用 node.js 模块来重写前面的例子的话，不需要把整个 monment.min.js 文件用 HTML 标签下载下来，你可以直接在 JavaScript 文件中这样加载：
// index.js
var moment = require('moment');
console.log("Hello from JavaScript!");
console.log(moment().startOf('day').fromNow());
然而，这是在 node.js 中才起作用的模块加载方法， node.js 作为一个服务器端语言，有权限访问计算机的文件系统，因此工作良好。Node.js 还知道每个 npm 模块的路径，所以我们不需要写上 require('./node_modules/moment/min/moment.min.js)，而可以直接写 require('moment')-- 是不是很贴心~
对 node.js 来说这一切都很棒，但是如果你真的把上面的代码运行在浏览器中的话，你会得到一个报错 require is not defined。浏览器没有对文件系统的权限，这就意味着用这种方式加载模块很难搞 -- 文件必须被动态地加载，或者同步地加载（减慢执行速度）或者异步地加载（不能保证时间顺序）。
这就是模块打包器随之出现的原因。JavaScript 模块打包器是一个能在代码构建过程（有文件系统权限）绕过这个问题并打包生产出兼容于浏览器的生产版本（不再需要有文件系统权限）的工具。在这个例子中，我们需要一个模块打包器，找到所有 require 语句（它在浏览器端的 JavaScript 中是非法的）并把它们替换成想 require 的文件实际的内容。最终结果是一个打包后的 JavaScript 文件（没有 require 语句）！
曾经最流行的模块打包器是 Browserify，于 2011 年发布，它倡导在前端使用 node.js 风格的 require 语句（这对 npm 成为前端包管理工具的选择是至关重要的）。2015 年左右，webpack最终成为更为广泛使用的包管理器（React 的流行大大推动了这一进程，它充分利用了 webpack 的各种特性）。
来看一下怎么用 webpack 让上面的 require('moment') 的例子在浏览器中起作用吧。首先，我们需要把 webpack 安装到项目中。Webpack 本身也是一个 npm 包，所以可以使用命令行愉快地安装：
$ npm install webpack --save-dev
注意到 --save-dev 参数 -- 把它作为开发环境的依赖，而不是生产环境，因为并不需要把它放到服务器上。你可以在 package.json 文件中看到对应的更改，已经自动更新如下：
{
"name": "modern-javascript-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"moment": "^2.19.1"
},
"devDependencies": { // 手动加粗
"webpack": "^3.7.1"
}
}
现在 webpack 作为一个 node_modules 中的包已经安装好了，可以在命令行中像这样使用 webpack：
$ ./node_modules/.bin/webpack index.js bundle.js
这行命令将会运行位于 node_modules 中的 webpack 工具，它将从 index.js 开始，找到所有require 语句，把它们替换成合适的代码并输出一个单文件叫 bundle.js 。这意味着我们在浏览器中不再需要 index.js，因为它包含非法的 require 语句。而是使用输出的 bundle.js文件，因此我们应当修改 index.html 文件 ：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Exampletitle>
<script src="bundle.js">script>
head>
<body>
<h1>Hello from HTML!h1>
body>
html>
刷新一下浏览器，一切又都像以前一样可以正常工作啦！
注意到每当我们修改 index.js 后都要运行 webpack 一长串的命令。好烦呀，而且当我们使用到 webpack 更高级的特性时就更烦了（例如使用 generating source maps 帮我们从编译后的代码调试原始的代码）。Webpack 可以从项目文件的根目录中的一个叫做 webpack.config.js的配置文件中读取相应设置，在我们的栗子中，差不多应该配置成这样：
// webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
}
};
这样每次我们改变 index.js 后，就可以在命令行中运行：
$ ./node_modules/.bin/webpack
我们不需要再特意指出 index.js 和 bundle.js 选项，因为 webpack 已经从 webpack.config.js 中加载得到了。比刚才好了一点，但每次修改代码还要敲命令还是很烦 -- 稍后我们会让这个过程再顺利些~
纵观一下，虽然可能看起来变化不大，但这个流程实际上取得了很大的进步。我们不再需要使用额外的标签加载全局变量。任何新的 JavaScript 库都可以使用 require 语句在 JavaScript 文件中引入，而不是在 HTML里加