我爱编程

更改npm 源

2017-08-10  本文已影响1981人  sunny635533

原文

在中国,安装 & 升级 npm 依赖的正确方法

05 NOVEMBER 2016onnpm-check,cnpm,npmrc,yarn,npm,npm 淘宝源,registry,前端

前言

最近不少朋友都开始用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

2016-11-12 更正:

之前在看 yarn --help 的时候疏忽了,没有看到 yarn config。所以 yarn 也是可以用 config set 来配置环境变量的~

yarn config set registry https://registry.

npm.taobao.org

npmrc 是 npm runtime config 的意思,可以通过这个文件在命令行环境中为 npm 提供环境变量。

npm 默认的源为https://registry.npmjs.org/我们可以通过这个配置修改 npmrc 文件来修改项目默认的 registry 地址

# .npmrc

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

把修改了 registry 为淘宝源的.npmrc文件添加到项目根目录后,再使用 yarn 安装依赖的时候就不用翻墙了。

经过 cnodejs.org 的道友指点,发现还有几个更好的办法来换源:

$ npm config set registry https://registry.npm.taobao.org全局修改 npm 源;

nrm - NPM registry manager

npminstall - Makenpm installfast and easy.

registry 精细修改

Bash

$npmsetregistry https://registry.npm.taobao.org# 注册模块镜像$npmsetdisturl https://npm.taobao.org/dist# node-gyp 编译依赖的 node 源码镜像## 以下选择添加$npmsetchromedriver_cdnurl http://cdn.npm.taobao.org/dist/chromedriver# chromedriver 二进制包镜像$npmsetoperadriver_cdnurl http://cdn.npm.taobao.org/dist/operadriver# operadriver 二进制包镜像$npmsetphantomjs_cdnurl http://cdn.npm.taobao.org/dist/phantomjs# phantomjs 二进制包镜像$npmsetfse_binary_host_mirror https://npm.taobao.org/mirrors/fsevents# fsevents 二进制包$npmsetsass_binary_site http://cdn.npm.taobao.org/dist/node-sass# node-sass 二进制包镜像$npmsetelectron_mirror http://cdn.npm.taobao.org/dist/electron/# electron 二进制包镜像$npmcache clean# 清空缓存

依赖升级问题

在中大型项目中,更新依赖需要十分谨慎,避免没有注意到新版本的依赖在 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

支持 ES6import from语法;

支持公共 & 私有 npm 源;

支持 npm@2 和 npm@3;

...

安装方法:

Bash

$npminstall-g npm-check

使用方法:

Bash

# 更新全局依赖$ 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 更新过时的依赖吧~

参考

yarn

cnpm

npmrc registry

npm outdated

npm-check

Sebastian Blade

The content is available under CC-BY 4.0 license.

Beijing, Chinahttps://github.com/blade254353074

Share this post

用 nginx 搭建纯单页应用服务

前言 有些朋友可能会有这个需求:想要部署单页面应用(Single-page application)到服务器上,但又不想为静态页面写一个(仅有 historyFallback 功能的)服务端。 确实,如果为静态页面再加一个服务端,有点重,性能也不如直接用 nginx 好。所以不如直接用 nginx…如何在 webpack 中引入未模块化的库,如 Zepto

前言 最近我在研究多页面 webpack 模块打包的完整解决方案时,发现用 import 导入 Zepto 时,会报 Uncaught TypeError: Cannot read property 'createElement' of undefined 错误,…

小钻风的自留地© 2017

京ICP备16033343号

Proudly published withGhost

上一篇下一篇

猜你喜欢

热点阅读