在中国，安装 & 升级 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 源；
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 更新过时的依赖吧~
参考
The content is available under CC-BY 4.0 license.
Beijing, Chinahttps://github.com/blade254353074
Share this post
前言 有些朋友可能会有这个需求：想要部署单页面应用（Single-page application）到服务器上，但又不想为静态页面写一个（仅有 historyFallback 功能的）服务端。 确实，如果为静态页面再加一个服务端，有点重，性能也不如直接用 nginx 好。所以不如直接用 nginx…如何在 webpack 中引入未模块化的库，如 Zepto
前言 最近我在研究多页面 webpack 模块打包的完整解决方案时，发现用 import 导入 Zepto 时，会报 Uncaught TypeError: Cannot read property 'createElement' of undefined 错误，…
小钻风的自留地© 2017
Proudly published withGhost
网友评论