npm✨

[oakland]

如何切换 npm 源

一句话总结：用 nrm 包。

具体情况陈述

今天用 npm install 的时候，提示

npm ERR! code ENOTFOUND
npm ERR! errno ENOTFOUND
npm ERR! network request to https://cdn.npm.taobao.org/react-shadow/-/react-shadow-16.3.1.tgz failed, reason: getaddrinfo ENOTFOUND cdn.npm.taobao.org cdn.npm.taobao.org:443
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.

请求 react-shadow 的一个内容失败，显然我用的是 taobao npm 的镜像。所以想切换回 npm 自己的源地址。忘记当时怎么设置 npm 源了。百度完之后发现自己用了 nrm 。
nrm ls 罗列出所有源地址
nrm use taobao 就可以使用 taobao 的镜像源了。因为淘宝有问题，所以又切换回 npm 本身。再次安装就好了。
这个错误本身的出现很奇怪，按道理不应该会出现 taobao 的源内容和 npm 源内容不同的情况，按道理都应该可以安装的。

如何切换 node 版本

用 nvm 来对 node 版本进行管理，常用命令 nvm list nvm use 10.0.0 nvm install 10.0.0 nvm uninstall 10.0.0
可以通过 nvm alias default 12 来设置 node 的 default version

如何查看全局 node 包

npm list -g 可以查看全局 npm 包安装在哪里，以及安装了哪些 npm 包。但是很多时候这个内容太长，以至于看不到安装路径。那就用 npm list -g | head -10 的方式。

package.json 中的 scripts 是如何实现的

这两天在调研 eslint + prettier 的功能，结果发现了个小秘密。我们知道通常通过 npm -g 的方式安装的 package，可以直接用全局的 command line 来实现调用某个功能。比如 npm i -g webpack 之后，可以直接在终端中输入 webpack webpack.config.js 来实现webpack 的功能。但是如果仅仅是在本地安装 webpack，又是如何实现在 scripts 中添加 "webpack": "webpack webpack.config.js" 后，执行 npm run webpack 就会调用 webpack 的呢？秘密就在 node_modules/.bin/ 中，这个目录下有很多可以执行命令，只有把这些命令添加到 package.json 的 scripts 字段中，才可以实现本地 npm run xxx 调用这个命令的方式。然后这个 node_modules/.bin/ 目录下的每个 script 对应的就是这个 node_modules 中对应 package 的某个文件。然后可以去看这个对应这个文件内容，就可以 debug 了。
这个小秘密是因为在 eslint 的文档中说了

You should then set up a configuration file:
./node_modules/.bin/eslint --init

这样的话就发现有个 node_modules/.bin/ 目录，而且还可以指定参数 --init，然后执行 ll node_modules/.bin/eslint 发现返回 node_modules/.bin/eslint -> ../eslint/bin/eslint.js，也就是说这个文件实际执行的文件是 node_modules/eslint/bin/eslint.js，然后打开 node_modules/eslint/bin/eslint.js 就会发现可以通过 --init 传参是怎么执行的。

npx

introducing npx，以前要通过在 package.json 中写 scripts 来执行本地 install 的 package 的可执行文件，现在通过 npx 就可以直接实现。比如 npx prettier --write src/index.js，就是去本地 node_modules/prettier/.bin/ 中执行prettier，参数就是 --write 和 src/index.js。

Calling npx when isn’t already in your $PATH will automatically install a package with that name from the npm registry for you, and invoke it. When it’s done, the installed package won’t be anywhere in your globals, so you won’t have to worry about pollution in the long-term.

上面这段话就是说明了为什么现在 create-react-app 用 npx 而不是 npm 了。

https://github.com/junosuarez/awesome-npx，这个 github repo 很有意思，收集了很多 npx 可以直接使用的 package。随便写几个有意思的可以试试。
npx cowsay wow
npx qrip https://random.cat
npx workin-hard

npm view eslint-plugin-myplugin peerDependencies

You can use npm view eslint-plugin-myplugin peerDependencies to see what peer dependencies eslint-plugin-myplugin has.

这个命令有时候应该有用

npm VS yarn

有时候用 npm 安装出错，可能需要通过 yarn install 的方式安装才行。

可以看看一些好的 package 的 package.json 文件

尤其是里面的 scripts 是怎么写的，可以参考一下，学习一下。

package-lock.json

有时候 npm install 不成功，删除 rm -rf node_modules, rm -f package-lock.json 就好了。

如何 publish 一个项目到 npm

先根据需求修改内容，然后执行 npm version patch，自动更新 package.json 和 package-lock.json 中的 version。然后 git push 到远程 git 仓库。
执行 npm run build，生成新的 dist 文件，然后执行 npm login，按要求输入账号、密码和邮箱，显示登陆成功之后，执行 npm publish。

npm update 不起作用

执行 npm update somePackage 结果不起作用，原来是 package.json 中这个 somePackage 的版本号写的是这个样子：
"some-package": "^0.1.43",
新的版本是 0.2.x，升级的时候如果写成上面这个样子是不会升到 0.2.x 的，只会继续在 0.1.x 中找最新的版本。所以要想升级，就写成 >=0.1.43 这样就行了，然后再执行 npm update somePackage 就会升级。

npm install 的时候总是卡住

lmk123/blog#28

npm link 和 npm unlink

可以本地调试 npm 包

npm install 加速

nrm ls, yrm ls 管理源

包含 二进制 包的速度很慢，是因为有 c++ 扩展包（.node）文件，例如 node-sass
npm config set sass_binary_site httops: npm.taobao.org/xxxx

patch-package

分析某个 npm 包的依赖关系，以图的形式展示

http://npm.broofa.com/?q=webpack

senmentic version

^4.13.8 前面的 ^ caret 符号表示可以在主版本号一直的情况下可以升级，也就是说如果有新的 minor version 和 patch version，都可以升级，但是不会升级 major version
~1.18.0 表示可以升级 patch version，但是 minor version 及以上是不能升级的。
有时候会也会用 4.x 或者 1.18.x 来代替上面的用法。

通过下面两个命令可以查看安装包的版本号

npm list
npm list --depth=0

如何给 package.json 中 scripts 的命令传入参数

https://stackoverflow.com/questions/11580961/sending-command-line-arguments-to-npm-script

With the example package.json:

"scripts": {
    "grunt": "grunt",
    "server": "node server.js"
}

here's how to pass the params to those scripts:

npm run grunt -- task:target // invokes grunt task:target
npm run server -- --port=1337 // invokes node server.js --port=1337

还有一种情况是要给 npm 的 js 文件传入参数，参考这个 https://stackoverflow.com/questions/4351521/how-do-i-pass-command-line-arguments-to-a-node-js-program

// index.js
// print process.argv
// node index.js 执行这个文件
process.argv.forEach(function (val, index, array) {
  console.log(index + ': ' + val);
});

This will generate:

$ node process-2.js one two=three four
0: node
1: /Users/mjr/work/node/process-2.js
2: one
3: two=three
4: four