前端编译打包、搭建相关

1）npm后面的 -S和-D参数详解

npm i jQuery -S

就等于

npm i jQuery --save

后面的-S（或者–save）参数表示安装的第三方包（即上面举例的jQuery）放在文件package.json里面的"dependencies",代码如下：

"dependencies":{

"jQuery":"^3.6.0" //3.6.0是jQuery的版本号

}

后面的-D（或者–save-dev）参数表示安装的第三方包（即上面举例的webpack和webpack-cli)被记录在package.json里面的"devdependencies"，代码如下：

"devdependencies":{

"webpack":"^5.42.1",

"webpack-cli":"^4.7.2"

}

3、"dependencies"表示开发和上线都需要的第三方包，用-S

4、"devdependencies"表示仅在开发阶段需要的第三方包，用-D

1. npm install moduleName

安装依赖到 mode_modules 目录下,不写入节点, npm install 时不下载该依赖.

2. npm install -g moduleName

全局安装,不在 mode_modules 目录下,不写入节点, npm install 时不下载该依赖.

3. npm install -save moduleName

安装依赖到 mode_modules 目录下,写入dependencies节点, npm install 时下载该依赖,一般安装生成环境所用依赖, 如 vue, element-ui, echarts…

4. npm install -save -dev moduleName

安装依赖到 mode_modules 目录下,写入devDependencies节点, npm install 时下载该依赖,一般安装开发环境所用依赖, 如 wabpack, babel…

yarn的安装和npm的安装都要依赖node，node 版本会影响，node版本匹配对应的npm 版本，否则会有问题，常见的则是npm 版本过高

2) npm-shrinkwrap.json 与 package-lock.json的区别与联系

npm 也有lock文件，yarn也有, 为啥npm不能精确控制？

在package.json中精确写死某个版本的npm包不就得了吗？ 不！你漏了一个很重要的信息，这也是package.json做不到的，就是你要安装的这个npm包可能还需要依赖一些其他包，这些其他包的版本你也要控制好才能100%确定一致

每次更新package.json或者node_modules时，如npm install新包，npm update， npm uninstall等操作，为保持协作人的资源一致，还是要手动运行npm shrinkwrap更新npm-shrinkwrap.json文件的。

而且记得加入到版本控制中，不然就没意义了。

shrinkwrap计算时是根据当前依赖安装的目录结构生成的，如果你不能保证package.json文件定义的依赖与node_modules下已安装的依赖是匹配、无冗余的，建议在执行shrinkwrap命令前清理依赖并重新安装（rm -rf node_modules && npm install）或精简依赖（npm prune）。

默认情况下，shrinkwrap只计算dependencies依赖，而不计算dev-dependencies，如果在生产环境也需要开发依赖或你的依赖分类不清晰，使用--dev参数生成shrinkwrap文件确保不会出问题。

后来我尝试过，就算不输入--dev，还是可以把开发依赖生成到npm-shrinkwrap.json里

从npm版本看

package-lock.json是npm5的新特性，也不向前兼容，如果npm版本是4或以下，那还是使用npm-shrinkwrap.json吧

从npm处理机制来看

npm-shrinkwrap.json >package-lock.json >package.json

不存在这两个文件，那么在运行npm install时，会自动生成一个package-lock.json，或者在初始化一个项目npm init时，也会生成package-lock.json，安装信息会依据该文件进行，而不是单纯按照package.json，这两个文件的优先级都比package.json高

运行命令npm shrinkwrap后，如果项目里不存在package-lock.json，那么会新建一个npm-shrinkwrap.json文件，如果存在package-lock.json，那么会把package-lock.json重命名为npm-shrinkwrap.json

从文件更新来看

npm-shrinkwrap.json只会在运行npm shrinkwrap才会创建/更新

package-lock.json会在修改pacakge.json或者node_modules时就会自动产生或更新了。

从发布包来看

package-lock.json不会在发布包中出现，就算出现了，也会遭到npm的无视。

npm-shrinkwrap.json可以在发布包中出现

3)yarn与npm区别

1. yarn虽然和npm一样是本地缓存，但是yarn无需互联网链接就能安装本地缓存的依赖项，提供了离线模式，而这个是npm实现不了的。

2. yarn解决了由于语义版本控制而导致的npm的不确定性问题，通过安装时创建的默认文件，确保使用的库的版本相同。

Yarn的优点

• 速度快 。速度快主要来自以下两个方面：

1. 并行安装：无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。
2. 离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。

• 安装版本统一：为了防止拉取到不同的版本，Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。npm 其实也有办法实现处处使用相同版本的 packages，但需要开发者执行 npm shrinkwrap 命令。这个命令将会生成一个锁定文件，在执行 npm install 的时候，该锁定文件会先被读取，和 Yarn 读取 yarn.lock 文件一个道理。npm 和 Yarn 两者的不同之处在于，Yarn 默认会生成这样的锁定文件，而 npm 要通过 shrinkwrap 命令生成 npm-shrinkwrap.json 文件，只有当这个文件存在的时候，packages 版本信息才会被记录和更新。
• 更简洁的输出：npm 的输出信息比较冗长。在执行 npm install 的时候，命令行里会不断地打印出所有被安装上的依赖。相比之下，Yarn 简洁太多：默认情况下，结合了 emoji直观且直接地打印出必要的信息，也提供了一些命令供开发者查询额外的安装信息。
• **多注册来源处理：**所有的依赖包，不管他被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装，要么是 npm 要么是 bower, 防止出现混乱不一致。
• 更好的语义化： yarn改变了一些npm命令的名称，比如 yarn add/remove，感觉上比 npm 原本的 install/uninstall 要更清晰。

NPM 和 Yarn 在依赖管理方面都很出色，但也有一些差异需要注意。NPM 使用“平面”依赖树，这意味着如果一个包有多个版本，则只会安装最新版本。这可能会导致兼容性问题，尤其是当您正在处理具有过时依赖项的旧项目时。