前端技术个人笔记

Npm

npm包所有的版本都有 3 个数字：x.y.z。

  • 第一个数字是主版本。
  • 第二个数字是次版本。
  • 第三个数字是补丁版本。

版本规则前缀

  • ^:是最后一位可以更新，只会执行不更改第一个非零数字的版本号。 如果写入的是 ^0.13.0，则当运行 npm update 时，可以更新到 0.13.1、0.13.2 等，但不能更新到 0.14.0 或更高版本。 如果写入的是 ^1.13.0，则当运行 npm update 时，可以更新到 1.13.1、1.14.0 等，但不能更新到 2.0.0 或更高版本。
  • ~:会更新补丁版本（最后一位），在0开头的版本和^表现一致

下方的不常用

  • >: 接受高于指定版本的任何版本。
  • >=: 接受等于或高于指定版本的任何版本。
  • <=: 接受等于或低于指定版本的任何版本。
  • <: 接受低于指定版本的任何版本。
  • =: 接受确切的版本。
  • -: 接受一定范围的版本。例如：2.1.0 - 2.6.2。
  • ||: 组合集合。例如 < 2.1 || > 2.6。

npm包版本

软件包所有的以前的版本

可能还有需要列出软件包所有的以前的版本。可以使用npm view <package> versions

> npm view jquery versions
[
  '1.5.1',        '1.6.2',      '1.6.3',        '1.7.2',
  '1.7.3',        '1.8.2',      '1.8.3',        '1.9.1',
  '1.11.0-beta3', '1.11.0-rc1', '1.11.0',       '1.11.1-beta1',
  '1.11.1-rc1',   '1.11.1-rc2', '1.11.1',       '1.11.2',
  '1.11.3',       '1.12.0',     '1.12.1',       '1.12.2',
  '1.12.3',       '1.12.4',     '2.1.0-beta2',  '2.1.0-beta3',
  '2.1.0-rc1',    '2.1.0',      '2.1.1-beta1',  '2.1.1-rc1',
  '2.1.1-rc2',    '2.1.1',      '2.1.2',        '2.1.3',
  '2.1.4',        '2.2.0',      '2.2.1',        '2.2.2',
  '2.2.3',        '2.2.4',      '3.0.0-alpha1', '3.0.0-beta1',
  '3.0.0-rc1',    '3.0.0',      '3.1.0',        '3.1.1',
  '3.2.0',        '3.2.1',      '3.3.0',        '3.3.1',
  '3.4.0',        '3.4.1',      '3.5.0',        '3.5.1',
  '3.6.0'
]

安装

// 安装版本
npm install jquery@3.0.0 --save

若要查看所有已安装的 npm 软件包

可以使用npm list（包括它们的依赖包）的最新版本，

> npm list
├── @vuepress/bundler-webpack@2.0.0-alpha.1
├── @vuepress/plugin-container@2.0.0-beta.29
├── @vuepress/plugin-register-components@2.0.0-beta.29
├── @vuepress/plugin-search@2.0.0-beta.29
├── vuepress-plugin-demo-block@0.7.2
└── vuepress@2.0.0-beta.29

node-sass问题

墙裂建议使用sass(dart-sass)替代node-sass

  • 直接设置镜像
    npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
npm install node-sass
  • 可以避免国内一些的node-sass安装不成功，可以直接安装编译过的sass
    npm config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
// 或者
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
  • 可以梯子🪜过去代理
  • 建议使用dart-saa(sass)open in new window替代node-sass

发布npm packages

发布前请先用想要发布的npm地址更改正确，如果是公司私有npm，请处理上传的npm地址，一般发布在registry.npm.org的多

  1. （已有账号请自行忽略这一步）请先自行注册一个账号npm官网open in new window 或者命令行注册
    npm adduser
  2. 终端输入npm login进行账号密码登录，中间会校验邮箱地址
  3. 发布npm publish，请注意自己的npm的配置文件package.json保持正确的配置

注意事项：

  • 发布源
  • 哪些文件要上传，哪些文件夹不上传，可以用package.json文件说明，默认包的导入文件为根目录的index.js,其他入口文件地址请自行在文件中配置，例如main、module、browser字段
    • main : 定义了 npm 包的入口文件，browser 环境和 node 环境均可使用
    • module : 定义 npm 包的 ESM 规范的入口文件，browser 环境和 node 环境均可使用
    • browser : 定义 npm 包在 browser 环境下的入口文件
  • 删除npm包
    • 删除库包之后，24小时之内 无法再次上传同名的库包到 npm
    • npm unpublish xxx --force删除指定包
    • npm unpublish xxx@1.0.1 --force删除指定版本的包
  • 废弃 指定版本或包,用法类似上方
    • npm deprecate <pkg>[@version] <message>废弃指定包（版本）

pnpm 的使用

命令行

  • npm install 等效 pnpm install
  • npm i <pkg> 等效 pnpm add <pkg>
  • npm run <cmd> 等效 pnpm <cmd>

执行脚本

  • pnpm exec 如果有shell脚本可以直接执行
  • pnpm dlx 执行类似npx开头的命令
  • pnpm create 等效于 npm init/create

如何在项目中锁定node的版本

  • 开发中部分项目跑不起来，原因是刚买电脑时候，配置最新的node,后期重装了一次系统，突然发现跑不起来了，然后发现就是node版本问题，在package.json中写入下方内容，在node版本不符合时候会直接抛出来异常
// package.json
{
  "engines": {
    "node": ">=14.0.0 <=14.19.3"
  }
}
Last Updated: