NPM这6个有趣实用的知识点，你知道几个？

1、 啥？npm add 和 npm install 彻底等价

注意：是彻底等价！javascript

若是你试图在 npm 官方搜索 npm add 这个指令，你会发现这个指令彷佛根本不存在，以下图：html

那咱们平时使用的 npm add vue@latest --save 又是什么鬼？vue

其实，npm add 是 npm install 的 别名 之一，因此当咱们执行 npm add 时，对于 npm 来讲完彻底全等同于执行了 npm install!java

下次，你能够试试 npm install vue@latest --save 了🤣node

如你所知，npm install 还有另外一个常见的别名：npm i;webpack

2、啥？npm isntall、npm instal 也能执行？

你没看错，上面不是 install，而是稀奇古怪的拼写错误；git

那么 npm isntall、npm instal 这种错误的拼写指令，执行起来是什么效果呢？github

答案是： 和 npm install 如出一辙！web

哈哈，没想到吧！vuex

其实，这是 npm 8.x 版本的新特性，可能某个核心贡献者和你我同样也是老手残党，常年由于 手指跟不上大脑的运算速度 而输入错误的指令。

因此在 8.x 版本，npm install 在以前 add、i的基础上增长了 9个别名，它们是：

in, ins, inst, insta, instal, isnt, isnta, isntal, isntall
复制代码

妈耶，各类能想到的不能想到的拼写错误都在里面，这位贡献者，必定是个有故事的同窗。

3、每一个 script 脚本都有前任与下一任？

你目前所开发的项目里定义的构建指令是什么？

假如，构建脚本是：

npm run build 
复制代码

那么你知道如何在执行 npm run build 指令执行以前，作一些特定的别的操做，或者在执行以后执行一些操做，应该怎么作吗？

答案是定义如下两个脚本：

{
  "scripts": {
    "prebuild": "",// 这是 build 执行前的钩子
    "postbuild": "" // 这是 build 执行后的钩子
  }
}
复制代码

哪怕你定义一个脚本叫 papapa，也是具有 “前任” prepapapa 和 “下一任” postpapapa 这样的钩子的！

你是否发现不少组件库的 package.json 里都有 postinstall 脚本？

没错,它们正是在 install 执行以后执行的脚本。

4、经过 npm link，能创造一些实用的工具指令

npm link 不少人都知道，它最广为人知的用途是：

建立一个软链接，使得你能够在不发布到 npm 源的状况下，在 B 项目里依赖 A 项目进行联调。

但若是你在项目的 package.json 里定义了 bin 属性，并将它指向某个可执行的脚本文件。

好比：

{
  "bin": {
    "i-love-u": "src/index.js"
  }
}
复制代码

一旦你在项目里经过 npm link 发布了，恭喜你，你只须要在命令行中输入 i-love-u 就会直接执行它所指向的脚本了。

这难道不 cooool 吗？

这会让你看起来，更像一个 "极客" 。

5、当你使用依赖时，导入的具体是哪一个文件？

你能告诉我，当你在代码里写下以下代码时：

import { createStore } from 'vuex';
// 或者是
const { createStore } = require('vuex');
复制代码

两种语句引入的是同一个文件吗？区别在哪？

会对程序产生什么差异吗？

有些同窗或许能回答出 "前者是 ESM 语法，后者是 CommonJS 语法。"，而后呢？

而后，咱们须要先了解几个知识点：

1. 从 node 14.x 版本开始，package.json 里支持了 exports 属性，当它存在时，它的优先级最高。

// 这说明不管是 import 仍是 require 都只会以 `main.js` 做为入口
"exports": "main.js"

// 如下则能够给 `require` 和 `import` 分别设置入口
"exports": {
  "import": "es/index.js",
  "require": "cjs/index.js"
}
复制代码

1. 当 exports 属性不存在，而 module 属性存在时，构建工具（如 webpack、rollup）会把 module 属性做为 ESM 的入口来使用。

   所以，若是 package.json 文件里有：

name: "yy",
module: "lib/index.js",
复制代码

在 webpack/rollup 项目中：

import xx from 'yy';
复制代码

入口会被指向 node_modules/yy/lib/index.js

1. 若是 exports 和 module 都不存在，则 package.json 中的 main 属性会成为指定入口的惟一属性。

关于 “模块入口” 的话题，能够拓展出一整篇文章，所以再也不赘述，有兴趣的朋友能够自行阅读 Node.js 相关文档：

nodejs.cn/api/package…

(好吧，严格来讲，这不属于 npm 的知识点,orz)

6、公源、私源切换，.npmrc 竟然这么好用？

npm 默认的源是 https://registry.npmjs.org 。但由于众所周知的缘由，这个源在国内访问起来速度很慢。

此时，咱们能够经过如下命令将其设置为 taobao 源：

# npm 自带的设置功能
npm config set registry https://registry.npm.taobao.org
# or
# 若是你安装了nrm
nrm use taobao
复制代码

以上作法虽然有效，但并无将 “指定源” 固话在项目配置中，新同窗上手时可能须要在这些问题上花费大量精力。

更好的选择是 .npmrc 文件。

registry = https://registry.npm.taobao.org/
@juejin:registry = https://siyouyuan.org/
复制代码

经过 .npmrc 文件能够设置项目级的配置，以上两行代码分别作了以下两件事：

1. @juejin 命名空间的项目，直接在私有源请求包;
2. 其余包则从 taobao 源发起请求。

这样一来，新人上手项目、或在 jenkins 上构建就无需设置任何配置，执行 npm i 便可。

源码附件已经打包好上传到百度云了，你们自行下载便可~

连接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27

百度云连接不稳定，随时可能会失效，你们抓紧保存哈。

若是百度云连接失效了的话，请留言告诉我，我看到后会及时更新~