npm 镜像科普


npm

作为新时代的前端,怎么也不避开踩 npm 这个大坑。

从安装模块开始

当你开开心心根据教程安装好 node 准备学习大前端知识的时候。
例如学习 vue, react 或者是 webpack 的时候。

1
$ npm install -D webpack

等了N久才安装完成,我本地实测 41.782s 才安装好。

然后下一步,加个 sass 模块。

1
$ npm install -D node-sass

苦苦等待,各种安装不上,有的运气好,3,5分钟终于安装上了。

因为 node-sass 是直接从 GitHub 下载的,一些测试类型的模块甚至都直接被墙,完全无法安装。

cnpm

好在国内有个非常棒的 npm 镜像站 淘宝 NPM 镜像
他们非常良心的将 npmjs.org 所有模块都下载到了自己的服务器上,这样当我们使用 cnpm 的时候是完全从淘宝服务器下载的,而不再是去国外官网下载了。

1
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

也许你担心模块是不是最新的,或者你新模块他会不会安装不了。
淘宝镜像10分钟同步一次以保证尽量与官方服务同步。

当你发布新模块的时候,也许他没有立刻同步,但你通过他的镜像安装模块时,
他发现自己网站没有这个模块,就立刻到 npmjs.org 下载到淘宝镜像服务器,然后返回给你。

所以不需要担心模块是否最新和有没有的问题。

npm 配置镜像 (原理篇)

ps: 其实这就是 cnpm 帮我们做的事情,我们手动做一遍。

如果你有洁癖,不想使用 cnpm 等第三方模块管理器。
那你可以配置 npm 为淘宝镜像,之后安装就会通过淘宝镜像安装了。

1
$ npm set registry https://registry.npm.taobao.org

现在你可以走淘宝镜像安装模块了。
但你会发现 node-sass, electron, puppeteer 等模块依然安装不了,或者安装非常缓慢。
还有一些需要模块是 c/c++ 写的,npm install 后在本地编译安装的,这种模块也安装的非常缓慢。

这是为什么呢?

基于 node 源码镜像 本地编译模块

先说本地编译的模块,他是依赖 node 源码的,所以会去下载一份对应版本的 node 源码。
注意,是对应版本的 node 源码,如果有一个模块依赖 node6 他会下载 node6 源码,另一个依赖 node8 就会下载 node8 源码。
而源码依然是从国外官网下载的,所以我们需要配置源码镜像。

ps: node8 带来了 N-API 所以这个时代会过去的。

1
$ npm set disturl https://npm.taobao.org/dist

本地编译的模块可以大幅度提升安装速度。
剩下最后一个问题,也是最蛋疼的问题了,模块依赖的资源文件下载。

模块依赖的资源文件下载

例如 node-sass 模块,第一次安装的时候会发现他从 GitHub 下载一个 .node 文件。

https://github.com/sass/node-sass/releases/download/v4.9.0/darwin-x64-57_binding.node

由于大家都懂的原因,GitHub 本身访问的时快时慢,而他的资源服务器更是慢如蜗牛。
所以我们需要单独配置这个资源的镜像。

很幸运,淘宝镜像中提供了 node-sass 镜像。
官网也给了安装命令:

1
$ SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass npm install node-sass

这么大一段命令,正常人应该记不住,需要每次都过来复制黏贴。
而且很多时候我们都直接在项目中 npm install 安装所有模块,而不是一个一个模块安装的。
所以要么作为别名加到 shell 中,要么有其他更好的方式解决。

幸运的是有个 mirror-config-china 模块:

1
$ npm i -g mirror-config-china --registry=https://registry.npm.taobao.org

他帮我们配置了这些常用的资源镜像。
其实他就是在 ~/.npmrc 中添加了一些配置,我们可以手动添加这些配置,如下。

1
2
3
4
$ npm set sass_binary_site https://npm.taobao.org/mirrors/node-sass
$ npm set electron_mirror https://npm.taobao.org/mirrors/electron/
$ npm set puppeteer_download_host https://npm.taobao.org/mirrors
$ npm set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver

这里例举了 node-sass, electron, puppeteer, chromedriver 模块,详细信息可以去看 mirror-config-china 模块。

cnpm 内置资源镜像

上面做了这么多努力,其实 cnpm 已经内置了 模块镜像,node源码镜像,常用依赖资源镜像。
甚至一些模块是不支持配置资源镜像的,cnpm 会强行替换模块内安装脚本中的安装地址。
所以如果你想一劳永逸,那么直接使用 cnpm 吧。

yarn

相信不陌生了吧,我更是在几个技术群里安利一年多了。
yarn 不走镜像,安装也挺快的,但依然也会卡在 依赖资源 的安装上。
但好在 yarn 会加载 ~/.npmrc 配置,也就是我们配置了 npm 的镜像,yarn 就可以使用。
那么棒棒的,可以愉快的使用 yarn 了。

在多啰嗦一句,yarn 的安装,很多人被官网例子给坑了,其实他就是个 npm 模块。

1
$ npm i -g yarn

就安装好了。

小结

其实很早就想写这个分享了,这次正好有人问到,就写下来分享。
很多人完全不理解 npm, cnpm, yarn,甚至还有混用的,然后各种踩坑。
下次有机会继续分享模块安装原理,以及为什么不能混用模块管理器。