原文链接
前言
最近不少朋友都开始用 yarn 来安装 & 更新自己的项目依赖了。尴尬的是,虽然 yarn 优化了安装过程,但模块依然是从 npm 的 registry 下载。
cnpm 的问题
npm 的 CDN 换到了 fastly.net 之后,感觉就像被墙了一样,特别慢。**幸好,我们有淘宝源(https://registry.npm.taobao.org)和 cnpm。**但 cnpm 有个问题,用它下载安装的模块都是以软链形式存在的,本来模块文件就多,再加个软链又多一倍文件,导致有些编辑器(sublime text)和 IDE(WebStorm)检索目录时非常慢。
然而用 npm i package --registry=https://registry.npm.taobao.org
这种方式安装模块又因为 npm 自身问题,也有些慢,所以我们的希望就在 yarn 身上。(cnpm 还是很好的,感谢🙏 cnpm 和 淘宝源节省了中国前端开发者的时间。)
给 yarn 换源
怎么给 yarn 换 npm 源呢,yarn 似乎也没有提供 --registry
这类参数来修改源,我找到了另一个办法:添加 .npmrc
npmrc 是 npm runtime config 的意思,可以通过这个文件在命令行环境中为 npm 提供环境变量。
npm 默认的源为 https://registry.npmjs.org/,我们可以通过这个配置修改 npmrc 文件来改变默认的 registry 地址:
# .npmrc
registry = 'https://registry.npm.taobao.org'
把修改了 registry 为淘宝源的 .npmrc
文件添加到项目根目录后,再使用 yarn 安装依赖的时候就不用翻墙了。
依赖升级问题
在中大型项目中,更新依赖需要十分谨慎,避免没有注意到新版本的依赖在 API 方面有重大更新(Breaking changes),而直接更新的情况。
我们可以通过 (c)npm outdated
查看过时的依赖,来确定要更新哪些依赖,并且了解哪些依赖有了重大更新:,红色标注的依赖可以直接升级,黄色标注的依赖是需要注意的地方,因为这些依赖可能会有 Breaking changes。
比如,上图的 fs-extra 从 0.30.0 升级到了 1.0.0,还有 postcss-loader 和 react-router(出了名的 API 变更小能手),这几个依赖都需要你去官网查看 Change log,看是否有 API 改变,才能决定能否更新这个依赖。
其实这个是否需要注意的标注,判断依据是 SemVer (语义化版本, Semantic Version)。
更好的依赖升级工具 —— npm-check
既然版本是有依据的,而且(假定)这些依赖都遵守,那么我们可以让机器帮我们分拣依赖,并提供更明细的信息和警告(Breaking changes、官网等)。于是有人做了一个工具,来帮我们自动化完成这些检查,并提供交互式操作介面:npm-check。
npm-check 有以下功能:
- 告诉你哪些依赖已经过时;
- 在你决定升级的时候,提供依赖包的文档;
- 提示某个依赖没有被你使用;
- 支持全局安装的模块,
-g
; - 交互式升级介面,减少输入和输入错误的情况,
-u
; - 支持公共 & 私有依赖包 [@scoped/packages](https://docs.npmjs.com/getting-started/scoped-packages);
- 支持 ES6
import from
语法; - 支持公共 & 私有 npm 源;
- 支持 npm@2 和 npm@3;
- …
安装方法:
$ npm install -g npm-check
使用方法:
# 更新全局依赖
$ npm-check -gu
# 更新当前项目依赖
$ npm-check -u
通过 npm-check 检查后: 敲一敲空格,按几下上下键,回车,就可以轻松搞定依赖升级的问题。
在使用 npm-check 时,我发现检查依赖的时间特别长,但又不知道他是通过什么方式来检查依赖版本的。于是去 github 上看了眼他的源代码,找到了关键依赖:package-json,这个工具可以从 npm registry 中获取依赖的 package.json。而它又依赖 registry-url,在这个库中,我发现了他们获取源地址的方法:.npmrc
,因此猜测 yarn 也可以通过这个文件来修改源,验证后便有了这篇文章(其实是因为家里网慢,不然也不会这么蛋疼地去看源码)。
和 yarn 一样,它没有提供直接的参数来修改 npm 源。因此,为了加速依赖检查和升级安装的时间,我们依然要提供 .npmrc
文件,来修改默认的 registry:
# .npmrc
registry = 'https://registry.npm.taobao.org'
最后
- 修改
.npmrc
来修改命令行环境中 npm 的环境变量,开启高速(极速是阿里内部的 tnpm)依赖检查 & 安装模式。 - 借助 npm-check 帮我们自动分拣依赖更新情况,减轻繁琐的升级负担。
快去下载 npm-check 更新过时的依赖吧~
参考
谢谢楼主好文。我收藏了。在这里,我想丰富这篇文章的一点儿内容,即
使用npm命令(npm config set <key> <value> )就能够自动创建.npmrc文件并且向文件内追加npm的配置项。比如,
$ npm config set registry https://registry.npm.taobao.org
就能把楼主创建与修改.npmrc文件的几个步骤一次性完成了。
@stuartZhang 好方法,我一直也不愿意改默认配置,不过想想改成淘宝源也没什么
nrm 这么好用…为何不使
好啊。。淘宝源 + yarn
npm install “bebel-loader” --registry https://registry.npm.taobao.org
‘bebel-loader’ is not in the npm registry.
npm set registry https://registry.npm.taobao.org # 注册模块镜像
npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node 源码镜像
## 以下选择添加
npm set chromedriver_cdnurl http://cdn.npm.taobao.org/dist/chromedriver # chromedriver 二进制包镜像
npm set operadriver_cdnurl http://cdn.npm.taobao.org/dist/operadriver # operadriver 二进制包镜像
npm set phantomjs_cdnurl http://cdn.npm.taobao.org/dist/phantomjs # phantomjs 二进制包镜像
npm set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass # node-sass 二进制包镜像
npm set electron_mirror http://cdn.npm.taobao.org/dist/electron/ # electron 二进制包镜像
npm cache clean # 清空缓存
有点孤陋寡闻了,感谢楼上几位兄弟
@yakczh babel-loader
vs bebel-loader
mark