前端工具链课（一）——包管理工具

这系列分享实际上是今年七月份在清华大学软工系暑假小学期时为同学们讲的课程，对于前端初学者来说一定会帮助，一直想给大家分享一下，今天抽空把第一篇先整理出来。

在开始之前，请允许我打一个广告，我的 知乎 Live 将会在 12 月 13日开始，在 Live 中我会聊聊关于前端工程师的自我修养，和大家分享一下如何成为一个优雅的前端工程师：点击参加《Jasin Yip 的 Live —— 前端工程师的自我修养》。

前端工具链，故名思义，就是前端工程师在前端开发的过程中会用到的一系列 工具。我们说，一个工具的出现，一定是为了解决某些问题的，比如说，我们用手去做计算太慢了，于是我们人类发明了计算器，解决的就是我们手算太慢的问题。在学习工具的时候，我不建议说，学工具的时候仅仅是为了学工具而学工具，连为什么要学都没搞清楚。

所以，在学习一个工具之前，往往我们应该先去了解这个工具可以用来解决什么样的问题；同样的，当我们遇到一个问题的时候，我们也应该带着这个问题去找工具解决。在这个系列的文章当中，我也会带着一个一个在实际工程中会遇到的问题，来跟大家一起学习一下前端工具链。

如何管理第三方的库或框架？

大家知道，我们在做工程的时候一定会使用大量的第三方库或框架，比如说大家可能都会用到的 jQuery，它可以帮我们简化很多 JavaScript 代码，并处理很多兼容性问题，用起来非常方便。但是有一个问题，所有好的库和框架都会不断地更新，有的时候新版本的 API 甚至跟旧版本的 API 完全不一样，那我们在使用它们的时候怎么去规避这个问题呢？

我们就会想，能不能只固定使用某一个版本进行开发，当有新版本更新的时候，我们看一下这个新的版本到底更新了一些什么东西，然后我们再决定要不要进行更新。比如说 jQuery 在 2.0 版之前是兼容 IE 8 的，但是在 2.0 版之后就不兼容了，并且带来很多不错的更新，于是我们要衡量一下我们到底是那些新 feature 重要，还是兼容 IE 8 重要。当然，这个要结合这个项目的用户群体来进行考虑。

有了这个想法之后，我们就要来思考一下如何实现了。首先，我们肯定需要一个记录我们使用的 jQuery 版本的地方，这样就能提醒自己或别人我们应该用哪个版本的 jQuery 了；然后我们希望 jQuery 本身可以标识自己当前的版本是哪个版本，这样我们就可以检查这份 jQuery 代码是不是和我们前面记录过的的版本一致了。最后，我们肯定还需要一个地方能存放各个版本的仓库，这样我们就能随时获取到任意版本的 jQuery 了。

我们可以看到，这一个过程看起来虽然只有三个环节，但是我们通常在工程中可能会使用几十上百个开源的包，如果我们全部都手动这么去处理的话，现实吗？明显是不现实的，于是聪（lan）明（duo）的工程师们就发明了一个工具来解决这个问题。

它就是我们这篇文章的主角—— NPM。
NPM 最初是 Node 的包管理工具，后来我们利用构建工具（下一篇我们会讲到）使得在前端也能使用。值得注意的是，NPM 的全称不是 Node Package Manager[1]。不知道同学们有没有听说过 Node，这里简单说一下：它是一个 JavaScript 的运行环境（RunTime），它可以使 JavaScript 运行在非浏览器环境当中，这意味着我们可以让 JavaScript 跑在服务器或者本地环境当中。我们今天所介绍的所有工具，都是基于 Node 编写的。

NPM 怎么帮我们来完成刚刚我们说的三个环节呢？

下面我们切换到 Terminal，并且创建一个新的文件夹并进入里面。首先，我们执行 npm init 来初始化一下 NPM 的配置文件，在命令行执行：

npm init

按下回车后，我们会进入一个「问答」环节，NPM 会问你一些关于初始化时的信息，比如项目名称（name）、当前版本（version）等，遇到不懂的大家可以自行 Google 一下，这里就不再展开了。

package.json

「问答」环节结束后，你会看到当前目录多了一个名为 package.json 的文件，我们可以用 cat 命令获取一下这个文件的内容：

cat package.json

这是我返回的内容：

{
  "name": "foo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

我们可以看到里面声明了我们这个项目的名称、作者之类的我们刚刚填写的信息。并且，呆会儿我们还会往这个文件里声明我们需要用到哪些第三方的库或框架。

如何用 NPM 来安装 jQuery？

那么接下来，假设我们需要装 jQuery，我们可以使用这个命令：

npm install jquery

这样我们就把 jQuery 安装好了，而且是最新版本的。

这个时候我们再通过 ls 看一下项目，比刚刚有什么区别？是不是多了个 node_modules？我们进去看一下，我们可以看到里面有一个 jquery 文件夹，再进去 jquery 文件夹，看到它也有一个 package.json，我们也打开看看。

我们看到有好多好多的配置项，其中有一些是跟我们刚刚写的是类似的，比如 name、author 等，而且我们可以看到它的 verion 字段是 3.0（可能由于时间的不同，大家在安装时或者会比 3.0 更加新），这里其实就标记了这个 jQuery 现在的版本号。

如何指定安装某个的版本？

假如说我们不能用 jQuery 3.0，要用旧版的，比如 1.11.0 版，我们就使用这样的命令：

npm install jquery@1.11.0

再看看 jQuery 的 package.json，我们可以看到 Version 已经变成 1.11.0 了。

这个时候，我想问一下同学们，我们应不应该把 node_modules 放到我们的版本管理系统比如 git 中去？答案当然是否定的，我们通过 npm 安装的都是第三方的库，并不是我们这个项目本身的代码，所以它不应该添加到版本管理系统中。以 Git 为例，我们应该把 node_modules 添加到 .gitignore 文件中去。

echo "node_modules" >> .gitignore

如何记录特定的版本？

但是问题又来了，如果我们把 node_modules 添加到 .gitignore 中去的话，其他团队成员怎么也安装同版本的 jQuery 呢？其实很简单，我们在安装 jQuery 的时候加一个参数就可以了：

npm install --save jquery@1.11.0

这个时候我们来看一下我们根目录下的 package.json，我们可以看到它里面多了一个 dependencies 的字段，dependencies 就是依赖的意思。dependencies 里面还写了 jQuery 以及对应的版本号 1.11.0。

别人如何根据记录来安装指定的版本？

我们现在来把刚才的 node_modules 删掉，目录里只留下一个 package.json，我们再运行一下 npm install：

npm install

完成之后我们可以看到，刚刚我们声明的版本号为 1.11.0 的 jQuery 也成功地被安装到目录下了。
当然了，如果我们想把已经安装过的包卸载掉，那就使用 npm uninstall 就可以了：

npm uninstall --save jquery

所有的版本都存放在哪里？

我们刚刚在敲命令的过程中已经看到了我们三个环节中的前两个，那么第三个环节就是，我们需要有一个存放所有 jQuery 版本的地方，其实刚刚我们已经跟那个地方交互过了，不知道有没有同学知道？没错，我们刚刚就是在 npm 的官方仓库中下载的，那么我们怎么知道官方仓库中有没有某个包呢？又或者说我们在哪里能查到那些包的文档呢？很简单，我们打开 NPM 的官网就能找到了。

我们打开 www.npmjs.com，可以它里面有一个搜索框，我们可以输入我们想找的包的名字并在搜索结果中点进去，比如说我们依然是 jquery，这样我们就可以看到 jQuery 的文档了。
第一篇我们就讨论到这里。接下来，我会在下一篇文章当中聊一下第二个问题：《模块化工具 Webpack ——如何解决命名冲突和依赖混乱问题？》

[1] https://twitter.com/npmjs/status/105690425242820608

我的知乎 Live 将在 12 月 13 日开始，如果你想了解更多关于前端工程师的自身修养，希望成为一个优雅的前端工程师的话，请 点击参加《Jasin Yip 的 Live —— 前端工程师的自我修养》