精华 在中国,安装 & 升级 npm 依赖的正确方法
发布于 2 个月前 作者 blade254353074 1181 次浏览 来自 分享

原文链接

前言

最近不少朋友都开始用 yarn 来安装 & 更新自己的项目依赖了。尴尬的是,虽然 yarn 优化了安装过程,但模块依然是从 npm 的 registry 下载。

cnpm 的问题

npm 的 CDN 换到了 fastly.net 之后,感觉就像被墙了一样,特别慢。**幸好,我们有淘宝源(https://registry.npm.taobao.org)和 cnpm。**但 cnpm 有个问题,用它下载安装的模块都是以软链形式存在的,本来模块文件就多,再加个软链又多一倍文件,导致有些编辑器(sublime text)和 IDE(WebStorm)检索目录时非常慢。

cnpm

然而用 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 查看过时的依赖,来确定要更新哪些依赖,并且了解哪些依赖有了重大更新:cnpm 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 -u 敲一敲空格,按几下上下键,回车,就可以轻松搞定依赖升级的问题。

在使用 npm-check 时,我发现检查依赖的时间特别长,但又不知道他是通过什么方式来检查依赖版本的。于是去 github 上看了眼他的源代码,找到了关键依赖:package-json,这个工具可以从 npm registry 中获取依赖的 package.json。而它又依赖 registry-url,在这个库中,我发现了他们获取源地址的方法:.npmrc,因此猜测 yarn 也可以通过这个文件来修改源,验证后便有了这篇文章(其实是因为家里网慢,不然也不会这么蛋疼地去看源码)。

和 yarn 一样,它没有提供直接的参数来修改 npm 源。因此,为了加速依赖检查和升级安装的时间,我们依然要提供 .npmrc 文件,来修改默认的 registry:

# .npmrc
registry = 'https://registry.npm.taobao.org'

最后

  1. 修改 .npmrc 来修改命令行环境中 npm 的环境变量,开启高速(极速是阿里内部的 tnpm)依赖检查 & 安装模式。
  2. 借助 npm-check 帮我们自动分拣依赖更新情况,减轻繁琐的升级负担。

快去下载 npm-check 更新过时的依赖吧~

参考

9 回复

谢谢楼主好文。我收藏了。在这里,我想丰富这篇文章的一点儿内容,即

使用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

回到顶部