René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"全面解析 Node.js 的包管理：npm、yarn 和 pnpm 的使用","articleBody":"## npm\r\n\r\n\u003e 了解更多 node Packages，https://nodejs.org/api/packages.html\r\n\r\nnpm 是 Node 的模块管理器，功能极其强大。它是 Node 获得成功的重要原因之一。\r\n\r\n我们只要一行命令，就能安装需要的 node 模块 。\r\n\r\n```shell\r\n$ npm install \u003cpackageName\u003e\r\n```\r\n\r\n## 1\\. 基本使用\r\n\r\n（1）打开 cmd，切换到项目所在文件夹\r\n\r\n（2）在 cmd 中输入命令: `npm init`，会生成一个名为 `package.json` 的配置文件（省略设置配置信息 `npm init -y`）\r\n\r\n（3）使用`npm install 包名` 来下载我们想要在在项目中使用的包 （这个包会下载到，当前项目下 node_modules 文件夹 中）\r\n\r\n（4）指定版本号下载\r\n\r\n```shell\r\nnpm install webpack@3.10.0 -g\r\n```\r\n\r\n（5）开发依赖及运行依赖\r\n\r\n| 配置项              | 说明                                           |\r\n| ------------------- | ---------------------------------------------- |\r\n| devDependencies     | 开发依赖，上线不需要                           |\r\n| dependencies        | 项目运行的依赖，上线依旧要使用                 |\r\n| `--save` / `-S`     | 配置信息写入**dependencies**                   |\r\n| `--save–dev` / `-D` | 配置信息写入**devDependencies**                |\r\n| `npm i jquery -S`   | 下载 jquery 并保存到 package.json 的开发依赖中 |\r\n| npm config get cache | 查看全局的 npm 下载 taz 压缩包缓存路径  |\r\n| npm cache ls vue | 查看全局的 npm 下载缓存的 vue 版本信息  |\r\n\r\n（6） 移除模块\r\n\r\n**删除全局模块**\r\n\r\n```shell\r\nnpm uninstall -g \u003cpackage\u003e\r\n```\r\n\r\n**删除本地模块**\r\n\r\n```shell\r\nnpm uninstall 模块\r\n\r\nnpm uninstall 模块：删除模块，但不删除模块留在package.json中的对应信息\r\nnpm uninstall 模块 --save 删除模块，同时删除模块留在package.json中dependencies下的对应信息\r\nnpm uninstall 模块 --save-dev 删除模块，同时删除模块留在package.json中devDependencies下的对应信息\r\n```\r\n\r\n## 2\\. npm 常用命令\r\n\r\n| 命令说明              | header 2                     |\r\n| --------------------- | ---------------------------- |\r\n| npm init -y           | 省略项目初始化需要填写的信息 |\r\n| npm config list       | 查看自己 npm 的配置信息      |\r\n| script **执行命令**   | npm run 去执行这个命令。     |\r\n| npm list -g --depth 0 | 查看已全局安装的依赖         |\r\n| npm prefix -g         | 查看全局 node 模块的安装路径 |\r\n| npm home react         | 快速打开 react 的官网|\r\n| npm repo react         |  快速打开 react 的代码仓库|\r\n| npm view react versions         | 查看 react 的 npm 所有历史版本号 |\r\n\r\n## 3\\. 切换镜像\r\n\r\n**使用淘宝源**\r\n\r\n```shell\r\nnpm config set registry https://registry.npmmirror.com --global\r\n```\r\n\r\n**还原 npm 官方仓库**\r\n\r\n```shell\r\nnpm config set registry https://registry.npmjs.org/\r\n```\r\n\r\n## 4\\. 版本\r\n\r\n[官方计算版本范围](https://semver.npmjs.com/)\r\n\r\n| range         | 含义                                      | 例                                      |\r\n| ------------- | ----------------------------------------- | --------------------------------------- |\r\n| ^2.2.1        | 指定的 MAJOR 版本号下, 所有更新的版本     | 匹配 \u003e= 2.2.1 并且\u003c 2.3.0; 不匹配 1.0.3, 3.0.1  |\r\n| ^0.2.3        | 指定的 MAJOR 版本号下, 所有更新的版本     | 匹配 \u003e= 0.2.3 并且 \u003c 0.3.0   |\r\n| ^0.0.3        | 指定的 MAJOR 版本号下, 所有更新的版本     | 匹配 \u003e= 0.0.3 并且 \u003c 0.0.4   |\r\n| ~2.2.1        | 指定 MAJOR.MINOR 版本号下，所有更新的版本 | 匹配 2.2.3, 2.2.9 ; 不匹配 2.3.0, 2.4.5 |\r\n| `\u003e=2.1`       | 版本号大于或等于 2.1.0                    | 匹配 2.1.2, 3.1                         |\r\n| \u003c=2.2         | 版本号小于或等于 2.2                      | 匹配 1.0.0, 2.2.1, 2.2.11               |\r\n| 1.0.0 - 2.0.0 | 版本号从 1.0.0 (含) 到 2.0.0 (含)         | 匹配 1.0.0, 1.3.4, 2.0.0                |\r\n\r\n\r\n\u003e 注意：^ 指明的版本范围，只要不修改 [major, minor, patch] 三元组中，最左侧的第一个非0位，都是可以的。也就是说，要确定 ^版本包含的范围，先要找到 最左侧的第一个非0位 ，只有在这一位右侧的变动，才被包含在这个 ^ 指定的范围内。\r\n\r\n\r\n官网还找到一个 npm命令行工具：semver，可以安装到全局：npm i -g semver ，之后，可以用这个工具来检查某个范围版本具体包含哪些:\r\n\r\n```bash\r\nsemver -r ^0.12.0 0.12.0 0.13.0 0.13.1\r\n\r\n# output\r\n0.12.0\r\n\r\nsemver -r ^17.0.1 18.1.1 17.7.1\r\n\r\n# output\r\n17.7.1 \r\n```\r\n\r\n任意两条规则，通过 || 连接起来，则表示两条规则的并集:\r\n\r\n如 ^2 \u003e=2.3.1 || ^3 \u003e3.2 可以匹配:\r\n\r\n    * `2.3.1`, `2,8.1`, `3.3.1`\r\n    * 但不匹配 `1.0.0`, `2.2.0`, `3.1.0`, `4.0.0`\r\n    PS: 除了这几种，还有如下更直观的表示版本号范围的写法:\r\n\r\n- `*` 或 x 匹配所有主版本\r\n- 1 或 1.x 匹配 主版本号为 1 的所有版本\r\n- 1.2 或 1.2.x 匹配 版本号为 1.2 开头的所有版本\r\n\r\nPS: 在常规仅包含数字的版本号之外，semver 还允许在 MAJOR.MINOR.PATCH 后追加 - 后跟点号分隔的标签，作为预发布版本标签 - Prerelese Tags，通常被视为不稳定、不建议生产使用的版本。例如：\r\n\r\n- 1.0.0-alpha\r\n- 1.0.0-beta.1\r\n- 1.0.0-rc.3\r\n\r\n上表中我们最常见的是 ^1.8.11 这种格式的 range, 因为我们在使用 npm install 安装包时，npm 默认安装当前最新版本，例如 1.8.11, 然后在所安装的版本号前加^号, 将 ^1.8.11 写入 package.json 依赖配置，意味着可以匹配 1.8.11 以上，2.0.0 以下的所有版本。\r\n\r\n## 5\\. npm 发包\r\n\r\n```shell\r\nnpm config list # 本地配置需修改为官方的仓库\r\nnpm set registry https://registry.npmjs.org/ # 还原为官方仓库\r\nnpm login # 登录\r\nnpm publish # 发布\r\nnpm unpublish --force #撤回已经发布的包(在 npm 包目录下)\r\n\r\nnpm config set registry https://registry.npmmirror.com # 切换回日常使用的淘宝镜像库\r\n```\r\n\r\n## 6\\. 代理配置\r\n\r\n```shell\r\n# 配置 npm 代理 \r\nnpm config set proxy=http://xxx:808\r\nnpm config set https-proxy=http://xxx:808\r\n\r\n# 删除代理方法\r\n\r\nnpm config delete proxy\r\nnpm config delete https-proxy\r\n```\r\n\r\n\r\n## 7.  修复 npm WARN config global --global、--local 已弃用。使用 --location=global 代替警告\r\n\r\n```\r\n# 这个警告官方在npm 8.12.1中得到了修复，故可以升级安装npm\r\n# 安装最新版\r\nnpm install -g npm@latest\r\n\r\n# 安装指定版本\r\nnpm install -g npm@8.12.1\r\n```\r\n\r\n## yarn\r\n\r\n1、 下载地址\r\n\r\n- [https://yarn.bootcss.com/](https://yarn.bootcss.com/)\r\n\r\n2、配置淘宝镜像\r\n\r\n    yarn config set registry https://registry.npmmirror.com -g\r\n\r\n3、中文介绍说明\r\n\r\n- [yarn cli 介绍](https://yarnpkg.com/zh-Hans/docs/cli)\r\n\r\n4、使用 yarn\r\n\r\n- 开始一个新工程\r\n\r\n```shell\r\nyarn init\r\n```\r\n\r\n- 添加一个依赖\r\n\r\n```shell\r\n# dependencies\r\nyarn add [package]\r\nyarn add [package]@[version]\r\nyarn add [package]@[tag]\r\n\r\n# devDependencies\r\nyarn add redux-devtools-extension --dev\r\n```\r\n\r\n- 全局安装\r\n\r\n```shell\r\nyarn global add webapck@3.10.0\r\n```\r\n\r\n全局安装后仍然无法使用命令的话，需要添加`环境变量`配置\r\n\r\n```shell\r\n# 获取bin目录，复制粘贴到系统变量里面\r\nyarn global bin\r\n```\r\n\r\n- 更新一个依赖\r\n\r\n```shell\r\nyarn upgrade [package]\r\nyarn upgrade [package]@[version]\r\nyarn upgrade [package]@[tag]\r\n```\r\n\r\n- 移除一个依赖\r\n\r\n```shell\r\nyarn remove [package]\r\n```\r\n\r\n- 查看 yarn 全局安装路径\r\n\r\n```shell\r\nyarn global bin\r\n```\r\n\r\n- 从全局移除一个依赖\r\n\r\n```shell\r\nyarn global remove @tarojs/cli\r\n```\r\n\r\n- 全局更新至最新的版本\r\n\r\n```shell\r\nyarn global add  @tarojs/cli@latest\r\n```\r\n\r\n- 查看全局安装的列表\r\n\r\n```shell\r\nyarn global list\r\n```\r\n\r\n5、node-sass 安装\r\n\r\n```shell\r\nSASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install # 首次安装所有依赖直接指向\r\n\r\nset SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ # 先 set ，后 install\r\nnpm install node-sass\r\n```\r\n\r\n或者新建 `.npmrc` 文件，内容为：\r\n\r\n```shell\r\nsass_binary_site=https://npm.taobao.org/mirrors/node-sass/\r\n```\r\n\r\n**最新更新**\r\n\r\n```shell\r\nyarn add node-sass-install\r\n```\r\n\r\n当安装 node-sass-install 的时候，会依赖并下载 dart-sass，然后重命名为 node-sass：\r\n\r\n```json\r\n{\r\n  \"dependencies\": {\r\n    \"node-sass\": \"npm:dart-sass@latest\"\r\n  }\r\n}\r\n```\r\n\r\n**更新**：使用 `dart-sass`代替 `node-sass`\r\n\r\n```shell\r\nyarn add sass-loader sass fibers  -D\r\n```\r\n\r\nwebpack 配置更新\r\n\r\n```js\r\nmodule.exports = {\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: /\\.scss$/,\r\n        use: [\r\n          \"style-loader\",\r\n          \"css-loader\",\r\n          {\r\n            loader: \"sass-loader\",\r\n            options: {\r\n              implementation: require(\"sass\"),\r\n              sassOptions: {\r\n                fiber: require(\"fibers\"),\r\n              },\r\n            },\r\n          },\r\n        ],\r\n      },\r\n    ],\r\n  },\r\n};\r\n```\r\n\r\n## 参考链接\r\n\r\n- [一秒钟解决安装 node-sass 慢的问题(yarn add node-sass-install)](https://zhuanlan.zhihu.com/p/130398131)\r\n- [安装 node-sass 的正确姿势](https://github.com/lmk123/blog/issues/28)\r\n- [webpack node-sass 改为 dart-sass](https://github.com/klren0312/daliy_knowledge/issues/54)\r\n- [https://github.com/webpack-contrib/sass-loader#examples](https://github.com/webpack-contrib/sass-loader#examples)\r\n- [npm WARN config global --global, --local are deprecated. Use --location=global i\r\nnpm WARN config global --global、--local 已弃用。使用 --location=global i](https://juejin.cn/post/7126372907697045511)\r\n- [npm install 版本号^的坑](https://zhuanlan.zhihu.com/p/66039729)\r\n- [npm 模块安装机制简介](https://www.ruanyifeng.com/blog/2016/01/npm-install.html)\r\n\r\n","author":{"url":"https://github.com/yanyue404","@type":"Person","name":"yanyue404"},"datePublished":"2018-02-26T08:00:03.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/7/blog/issues/7"}