常用的npm scripts (重要命令)

重要命令

npx

npx 是 npm 5.2.0 及以上版本中自带的一个工具,用于更方便地执行 npm 包中的命令行工具。它的主要功能是在不全局安装包的情况下,直接运行包中的命令。下面是对 npx 的详细解析:


1. npx 的基本用途

npx 的核心作用是解决以下问题:

  • 避免全局安装包 :传统方式下,许多工具需要全局安装(如 npm install -g <package>),而 npx 可以直接运行这些包,无需全局安装。
  • 自动下载并运行包 :如果本地项目或全局环境未安装某个包,npx 会自动从 npm 仓库下载并运行它。
  • 简化命令:可以直接运行包中的命令,而不需要手动安装或配置。

2. 基本语法

bash 复制代码
npx <command> [options]
  • <command>:要执行的命令或包名。
  • [options]:传递给命令或包的选项。

3. npx 的主要功能

1. 直接运行本地项目中的包

如果本地项目已经安装了某个包,npx 会自动在项目的 node_modules/.bin 目录中查找并运行它。

示例:

npx webpack

如果项目中安装了 webpack,则直接运行项目中的 webpack 命令。


2. 运行未安装的包

如果本地项目或全局环境中未安装某个包,npx 会临时从 npm 仓库下载并运行它。

注意: 前提是:reate-react-app 发布到了npm上 并且 reate-react-app包中的bin中有个和包名一样的命令

示例:

lua 复制代码
npx create-react-app my-app

如果本地未安装 create-react-appnpx 会自动下载并执行它。


3. 运行指定版本的包

可以使用 @ 符号指定包的版本。

示例:

sql 复制代码
npx webpack@4.0.0 --version

运行指定版本的 webpack,并查看其版本号。


4. 运行 GitHub 上的代码

npx 可以直接运行 GitHub 仓库中的代码。

示例:

arduino 复制代码
npx https://gist.github.com/username/script.js

5. 交互式运行包

npx 可以以交互模式运行包,例如打开命令行工具或 REPL 环境。

示例:

npx node

启动 Node.js 的 REPL 环境。


6. 运行二进制文件

npx 可以直接运行本地或远程的二进制文件。

示例:

bash 复制代码
npx ./my-script.js

4. 常用选项

选项 说明
--ignore-existing 忽略本地已安装的包,强制从远程下载并运行。
--package 指定要运行的包(可以用于运行未暴露命令的包)。
--no-install 如果本地未找到包,则不自动安装,直接报错。
--quiet 静默模式,不输出额外信息。
--yes 自动回答所有提示为 yes

5. 使用场景

场景 1:创建 React 项目

使用 create-react-app 创建项目,但无需全局安装:

lua 复制代码
npx create-react-app my-app
场景 2:运行本地脚本

运行项目中的脚本文件:

bash 复制代码
npx ./scripts/my-script.js
场景 3:检查包版本

检查某个包的版本:

css 复制代码
npx webpack --version
场景 4:运行特定版本的包

运行指定版本的 eslint

kotlin 复制代码
npx eslint@7.0.0 --init
场景 5:交互式运行工具

以交互模式运行 ts-node

npx ts-node

6. npxnpm exec 的关系

在 npm 7 及以上版本中,npx 实际上是 npm exec 的别名。因此,以下两个命令是等价的:

bash 复制代码
npx webpack
npm exec webpack

7. 注意事项

  • npx 默认会检查本地是否有已安装的包,如果本地没有,则会从远程下载。如果需要强制从远程下载,可以使用 --ignore-existing 选项。
  • 如果运行未安装的包,npx 会在运行结束后删除临时下载的包。
  • 对于一些常用的工具,建议还是全局安装,以减少每次运行时下载的时间。

8. 总结

npx 是一个非常强大的工具,它简化了 npm 包的运行流程,避免了全局安装的繁琐,同时支持临时下载和运行包。它的主要优势包括:

  • 方便性:无需全局安装即可运行包。
  • 灵活性:支持运行本地、远程或指定版本的包。
  • 高效性:自动管理临时包的下载与删除。

exec

npm execnpm 7 及以上版本引入的一个命令,用于在项目中执行本地安装的包(或全局安装的包)中的可执行文件。它的主要目的是提供一种更方便的方式来运行 npm 包中的工具,而不需要全局安装这些工具或手动配置路径。

以下是 npm exec 的详细解析和使用方法:


1. 基本语法

perl 复制代码
npm exec <package-name> [args]
参数说明
  • <package-name>:要执行的 npm 包的名称。
  • [args]:传递给可执行文件的参数。
示例

运行 eslint 检查当前目录的文件:

bash 复制代码
npm exec eslint .

2. npm exec 的工作原理

运行本地安装的包

如果包已经安装在项目的 node_modules 中,npm exec 会直接运行它的可执行文件。

运行全局安装的包

如果包未在本地安装,但已全局安装,npm exec 仍然可以运行它。

运行远程包(临时安装并运行包)

如果包既未在本地安装,也未全局安装,npm exec 会临时安装它并运行。临时安装的包不会被持久化到 package.jsonnode_modules 中。


3. 主要功能

(1) 运行本地工具

通过 npm exec,可以直接运行项目中安装的工具,而无需手动配置路径。

示例:

运行 typescript 编译文件:

bash 复制代码
npm exec tsc

(2) 运行全局工具

如果包已全局安装,npm exec 会自动找到并运行它。

示例:

运行全局安装的 webpack

bash 复制代码
npm exec webpack

(3) 临时安装并运行包

如果包未在本地或全局安装,npm exec 会临时安装它并运行。

示例:

临时安装并运行 create-react-app

perl 复制代码
npm exec create-react-app my-app

(4) 指定包版本

可以通过 @ 符号指定包的版本。

示例:

运行 eslint 的 8.0.0 版本:

perl 复制代码
npm exec eslint@8.0.0 .

(5) 传递参数

可以向可执行文件传递参数。

示例:

jest 传递 --watch 参数:

sql 复制代码
npm exec jest -- --watch

(6) 运行 package.json 中的脚本

可以使用 npm exec 运行 package.json 中定义的脚本。

示例:

运行 package.json 中的 build 脚本:

sql 复制代码
npm exec -- npm run build

4. npm execnpx 的区别

npm execnpx 的功能几乎相同,但 npm exec 是 npm 7 及以上版本的官方推荐方式。主要区别如下:

特性 npm exec npx
版本支持 npm 7 及以上版本 npm 5.2 及以上版本
官方推荐
临时安装行为 完全相同 完全相同
执行本地脚本 不支持(可间接运行) 支持

5. 环境变量

npm exec 会自动设置以下环境变量:

  • npm_package_name:当前包的名称。
  • npm_package_version:当前包的版本。

6. 常见用例

(1) 运行工具
css 复制代码
npm exec prettier --write src/
(2) 使用指定版本的工具
sql 复制代码
npm exec typescript@4.9.0 --version
(3) 临时安装并运行脚手架工具
perl 复制代码
npm exec create-react-app my-app

7. 总结

  • npm exec 提供了一种便捷的方式来运行 npm 包中的工具,无需全局安装或手动配置路径。
  • 它支持运行本地安装的包、全局安装的包,以及临时安装的包。
  • 在 npm 7 及以上版本中,npm exec 是官方推荐的方式,可以替代 npx
  • 适合用于运行开发工具、脚手架工具以及临时调试工具。

如果你使用的是 npm 7 及以上版本,建议优先使用 npm exec

exec如何运行本地脚本

npm exec 主要用于执行 npm 包中的可执行文件,而不是直接执行 package.json 中定义的本地脚本。如果你想要执行本地脚本,应该使用 npm run 命令,而不是 npm exec


为什么不使用 npm exec 执行本地脚本?

npm exec 的设计目的是运行 npm 包中的可执行文件,而 package.json 中的脚本是通过 npm run 来执行的。npm exec 并不支持直接运行 package.json 中定义的脚本。


如何正确执行本地脚本?

使用 npm run 命令来执行 package.json 中定义的脚本。

示例:

假设 package.json 中有以下脚本:

json 复制代码
{
  "scripts": {
    "build": "webpack --mode production",
    "test": "jest"
  }
}

你可以通过以下命令运行这些脚本:

arduino 复制代码
npm run build
npm run test

npm execnpm run 的区别

特性 npm exec npm run
功能 运行 npm 包中的可执行文件 运行 package.json 中的脚本
支持本地脚本 不支持 支持
包安装行为 可以临时安装包并运行 需要先安装包
适用场景 运行工具或可执行文件 运行定义好的脚本

如何在 npm exec 中运行脚本?

虽然 npm exec 不能直接运行本地脚本,但你可以通过以下方式间接实现:

方法 1:使用 npm exec 运行 npm run
sql 复制代码
npm exec -- npm run build

这会通过 npm exec 运行 npm run build

方法 2:将脚本逻辑封装到可执行文件中

如果你希望脚本可以通过 npm exec 运行,可以将脚本逻辑封装到一个可执行文件中。例如:

  1. package.jsonbin 字段中定义可执行文件路径。
  2. 创建一个可执行文件(如 bin/my-script.js)。
  3. 然后通过 npm exec my-script 运行。

总结

  • npm exec 不能直接执行 package.json 中的脚本。
  • 如果要运行本地脚本,请使用 npm run
  • 如果你确实需要通过 npm exec 运行脚本,可以间接使用 npm exec -- npm run <script>,但这种做法并不推荐。

npx不能运行本地脚本

要使用 npx 运行 package.jsonscripts 字段定义的脚本,不能直接使用 npx,而是需要使用 npm run

原因是:npx 主要用于执行本地或远程包中的可执行文件,而不是 package.json 中定义的脚本。package.json 中的 scripts 是由 npm 直接管理的,因此需要使用 npm run 来运行这些脚本。


正确方式:使用 npm run

假设你的 package.json 如下:

json 复制代码
{
  "scripts": {
    "start": "node ./src/index.js",
    "test": "jest",
    "build": "webpack --mode production"
  }
}

要运行这些脚本,使用以下命令:

  1. 运行 start 脚本:

    arduino 复制代码
    npm run start
  2. 运行 test 脚本:

    arduino 复制代码
    npm run test
  3. 运行 build 脚本:

    arduino 复制代码
    npm run build

为什么 npx 不能直接运行 package.json 中的脚本?

npx 的设计目的是查找并执行可执行文件 ,而不是解析 package.json 中的 scripts 字段。scripts 字段的解析和执行是由 npm 处理的,因此需要使用 npm run


npx 可以和 npm run 结合使用吗?

虽然 npx 不能直接运行 package.json 中的脚本,但它可以在 scripts 中用于运行特定的可执行文件。例如:

scripts 中使用 npx
json 复制代码
{
  "scripts": {
    "lint": "npx eslint .",
    "format": "npx prettier --write ."
  }
}

然后可以通过 npm run 运行这些脚本:

arduino 复制代码
npm run lint
npm run format

总结

  • 运行 package.jsonscripts 定义的脚本必须使用 npm run,而不是 npx
  • npx 可以用于执行本地或远程包中的可执行文件。
  • 如果需要,可以在 scripts 中使用 npx 来运行特定的可执行文件,然后通过 npm run 调用这些脚本。

运行命令的方式总结

运行项目中的命令

json 复制代码
// 方式一
npx xxx || npm exec xxx 


// 方式二:在package.json中配置scripts然后通过npm run 运行脚本
// npm run 会在项目的 node_modules/.bin 目录下查找可执行文件,因此可以直接运行本地安装的工具(如 webpack、jest 等),而无需全局安装
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "tt": "set EDITOR=code && npm edit vue"
}

运行全局的命令

arduino 复制代码
// 方式一:
xxx

// 方式二:
npm exec vue -v || npx vue -v

运行远程的命令

json 复制代码
// 前提是:xx发布到了npm上 并且 xx包中的bin中有个和包名一样的命令
npx xx || npm exec xx
​
// xx包的package.json
{
    "bin": {
        "xx": "./bin/index.js"
    }
}

explain

npm explainnpm 提供的一个命令,用于解析和查看包依赖关系。它可以帮助你快速了解某个包是如何被安装到你的项目中的,以及为什么特定版本的包被依赖。


npm explain 的基本用法

go 复制代码
npm explain <package-name>
  • <package-name>:你需要查看的包的名称。

npm explain 的功能

  1. 显示包的依赖路径 它会显示某个包是如何被安装的,包括直接依赖和间接依赖的关系。
  2. 解释为什么安装特定版本的包 它会告诉你为什么安装了某个特定版本的包,以及是哪个包依赖了它。
  3. 帮助解决依赖冲突 如果你在依赖关系中遇到问题,npm explain 可以帮助你找到问题的根源。

示例

假设你想查看 lodash 包是如何被安装的,运行以下命令:

npm explain lodash

可能的输出如下:

kotlin 复制代码
lodash@4.17.21
node_modules/lodash
  lodash@"^4.17.21" from the root project

解释:

  • lodash@4.17.21:当前安装的版本是 4.17.21
  • node_modules/lodash:包的实际安装位置。
  • lodash@"^4.17.21" from the root project:该包是根项目直接依赖的,版本范围是 ^4.17.21

输出解析

  1. 包的版本和安装位置

    • lodash@4.17.21:包的名称和版本。
    • node_modules/lodash:包的安装路径。
  2. 依赖来源

  • lodash@"^4.17.21" from the root project:包是如何被依赖的,以及版本约束。
  1. 依赖层级 如果包是间接依赖的,输出会显示完整的依赖链。例如:

    kotlin 复制代码
    lodash@4.17.21
    node_modules/lodash
      lodash@"^4.17.21" from express@4.17.1
      node_modules/express
        express@"^4.17.1" from the root project

    解释:

    • lodashexpress 的依赖。
    • express 是项目的直接依赖。

常见场景

  1. 解决依赖冲突 如果你遇到版本冲突问题,可以使用 npm explain 查看某个包是被哪些包依赖的,以及它们的版本要求。例如:

    npm explain react
    

    输出可能显示多个包依赖了不同版本的 react,从而帮助你找到冲突的根源。

  2. 检查包来源 如果你不确定某个包是如何被安装的,npm explain 可以帮助你快速找到答案。

  3. 调试依赖问题 如果某些功能无法正常工作,npm explain 可以帮助你验证是否是依赖版本问题。


总结

npm explain 是一个非常有用的工具,用于解析包的依赖关系和版本信息。它可以帮助你:

  • 查看包的安装路径和依赖关系。
  • 了解为什么安装了特定版本的包。
  • 解决依赖冲突或调试问题。

help

查看帮助信息

scss 复制代码
npm help // 查看所有帮助信息
npm help init // 查看init命令的帮助信息

config

npm config 是 npm 提供的一个用于管理和查看 npm 配置的命令。npm 的配置可以影响 npm 的全局行为,例如默认的包安装路径、代理设置、缓存路径等。以下是对 npm config 的详细解析:


npm 配置的层级

npm 的配置分为多个层级,优先级从高到低依次为:

  1. 命令行参数

    • 例如:npm install --registry=https://registry.npm.taobao.org
  2. 环境变量

    • npm_config_ 开头的环境变量会被 npm 读取。
    • 例如:npm_config_registry=https://registry.npm.taobao.org
  3. 项目级配置(.npmrc 文件)

    • 位于项目根目录的 .npmrc 文件。
  4. 用户级配置(.npmrc 文件)

    • 位于用户主目录的 .npmrc 文件(~/.npmrc)。
  5. 全局配置(.npmrc 文件)

    • 位于 npm 的全局配置目录下的 .npmrc 文件。
  6. 内置默认配置

    • npm 自带的默认配置。

npm config 命令的常用操作

1. 查看当前配置
arduino 复制代码
npm config list
  • 显示所有当前的 npm 配置。
2. 查看某个配置项的值
arduino 复制代码
npm config get <key>
  • 例如:

    arduino 复制代码
    npm config get registry
3. 设置某个配置项的值
arduino 复制代码
npm config set <key> <value>
  • 例如:

    arduino 复制代码
    npm config set registry https://registry.npm.taobao.org
4. 删除某个配置项
arduino 复制代码
npm config delete <key>
  • 例如:

    arduino 复制代码
    npm config delete registry
5. 编辑配置文件
arduino 复制代码
npm config edit
  • 打开当前生效的 .npmrc 文件进行编辑。
6. 查看配置文件的路径
arduino 复制代码
npm config get userconfig  # 用户级配置文件路径
npm config get globalconfig # 全局配置文件路径
npm config get prefix      # 全局安装路径

常用的 npm 配置项

以下是一些常用的 npm 配置项及其说明:

配置项 默认值 说明
registry https://registry.npmjs.org/ npm 包的下载源
prefix 操作系统依赖 全局安装的包存放路径
cache 操作系统依赖 npm 缓存路径
proxy HTTP 代理地址
https-proxy HTTPS 代理地址
strict-ssl true 是否严格验证 SSL 证书
save true 是否自动将安装的包添加到 package.json
save-dev false 是否自动将安装的包添加到 devDependencies
save-exact false 是否在 package.json 中保留精确的版本号
ignore-scripts false 是否忽略 package.json 中的脚本
package-lock true 是否生成 package-lock.json
audit true 是否启用安全检查
scripts-prepend-node-path warn-only 是否在运行脚本时自动添加 Node.js 路径

配置示例

1. 设置淘宝镜像源
arduino 复制代码
npm config set registry https://registry.npm.taobao.org
2. 设置全局安装路径
arduino 复制代码
npm config set prefix ~/.npm-global
3. 设置 HTTP 代理
arduino 复制代码
npm config set proxy http://proxy.example.com:8080
npm config set https-proxy http://proxy.example.com:8080
4. 禁用严格 SSL 验证
arduino 复制代码
npm config set strict-ssl false
5. 启用精确版本号保存
arduino 复制代码
npm config set save-exact true

配置文件的格式

.npmrc 文件是一个简单的键值对文件,格式如下:

ini 复制代码
registry=https://registry.npm.taobao.org
prefix=~/.npm-global
strict-ssl=false

优先级示例

  1. 命令行参数:

    ini 复制代码
    npm install lodash --registry=https://registry.npm.taobao.org
  2. 环境变量:

    arduino 复制代码
    export npm_config_registry=https://registry.npm.taobao.org
  3. 项目级 .npmrc 文件:

    ini 复制代码
    registry=https://registry.npm.taobao.org
  4. 用户级 .npmrc 文件:

    ini 复制代码
    registry=https://registry.npmjs.org/
  5. 全局 .npmrc 文件:

    ini 复制代码
    prefix=/usr/local

总结

  • npm config 是管理和查看 npm 配置的强大工具。
  • 通过命令行、环境变量或 .npmrc 文件,可以灵活地配置 npm 的行为。
  • 在团队开发或 CI/CD 环境中,合理配置 npm 可以提高开发效率和稳定性。

通过命令行设置了配置,这个配置会一直存在吗?

通过命令行(使用 npm config set)设置的配置是否会一直存在,取决于你设置的配置的作用范围。具体如下:


1. 永久保存的配置

默认情况下,npm config set 会将配置保存到 用户级的 .npmrc 文件 中(位于用户的主目录下,例如 ~/.npmrc),因此该配置会 永久生效,即使关闭终端或重启系统也不会丢失。

例如:

arduino 复制代码
npm config set registry https://registry.npm.taobao.org

这条命令会将 registry 配置写入 ~/.npmrc 文件,永久生效。


2. 临时生效的配置

如果只想在 当前终端会话 中临时使用某个配置,可以通过以下方式:

  • 直接使用命令行参数: 例如:

    ini 复制代码
    npm install lodash --registry=https://registry.npm.taobao.org

    这种方式仅对当前命令生效,不会保存到配置文件中。

  • 通过环境变量临时覆盖: 例如:

    arduino 复制代码
    // export 是 Linux/macOS 和 Unix 系统中的一个 Shell 命令,用于设置环境变量
    // 并使这些环境变量在当前 Shell 会话及其子进程中生效, 关闭了shell设置的值就没了
    export npm_config_registry=https://registry.npm.taobao.org
    npm install lodash
    
    // win-cmd 
    set npm_config_registry=https://registry.npm.taobao.org
    npm install lodash
    
    // win-powershell
    $env:npm_config_registry = "https://registry.npm.taobao.org"
    npm install lodash

    这种方式仅在当前终端会话中生效,关闭终端后失效。


3. 项目级配置

如果希望配置仅对 当前项目 生效,可以将配置写入项目的 .npmrc 文件(位于项目根目录)。

例如:

bash 复制代码
echo "registry=https://registry.npm.taobao.org" >> .npmrc

这条命令将 registry 配置写入当前项目的 .npmrc 文件,仅对该项目生效。


4. 全局配置

如果希望配置对所有项目生效,可以将配置写入 全局的 .npmrc 文件(位于 npm 的全局配置路径)。例如:

csharp 复制代码
npm config set prefix ~/.npm-global --global

这条命令会将 prefix 配置写入全局的 .npmrc 文件,对所有项目生效。


如何查看配置的存储位置

可以通过以下命令查看配置的存储位置:

arduino 复制代码
npm config get userconfig   # 用户级配置文件的路径
npm config get globalconfig # 全局配置文件的路径

例如,npm config get userconfig 会返回 ~/.npmrc 文件的路径。


总结

通过 npm config set 设置的配置默认会保存到用户级的 .npmrc 文件中,因此会 永久生效 。如果需要临时生效,可以使用命令行参数或环境变量。如果需要仅对当前项目生效,可以写入项目级的 .npmrc 文件。

init

别名:create(npm init === npm create)

npm init 是 npm 提供的一个命令,用于初始化一个新的 npm 项目 。它会创建一个 package.json 文件,该文件是 Node.js 项目的核心配置文件,包含了项目的元数据、依赖、脚本等信息。以下是关于 npm init 的详细解析:


1. npm init 的作用

npm init 的核心功能是创建一个 package.json 文件。这个文件的作用包括:

  • 项目元数据:如项目名称、版本、描述、作者等。
  • 依赖管理 :记录项目依赖的包(dependenciesdevDependencies)。
  • 脚本管理:定义一些常用的命令脚本,如启动、测试、构建等。

2. 如何使用 npm init

(1)默认用法

在项目根目录运行以下命令:

csharp 复制代码
npm init

这时,npm 会通过命令行交互的方式,依次询问以下问题,生成 package.json 文件:

  • package name:项目名称(默认是当前文件夹名称)。
  • version :项目版本(默认是 1.0.0)。
  • description:项目描述。
  • entry point :项目的入口文件(默认是 index.js)。
  • test command :测试命令(如 jestmocha)。
  • git repository:Git 仓库地址(可选)。
  • keywords:项目关键词(可选,用于 npm 搜索)。
  • author:项目作者。
  • license :项目使用的许可证(默认是 ISC)。

完成问答后,package.json 文件会被生成在当前目录中。


(2)快速初始化

如果不想通过交互式的方式回答问题,可以直接使用 -y--yes 参数,快速生成默认的 package.json 文件:

csharp 复制代码
npm init -y

这时,npm 会使用默认值生成 package.json 文件,文件内容类似:

bash 复制代码
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

(3)自定义初始值

如果你想为 npm init 提供自定义的默认值,可以通过以下方式设置:

  1. 在命令行中使用 npm config set 设置默认值,例如:

    arduino 复制代码
    npm config set init-author-name "John Doe"
    npm config set init-license "MIT"
  2. 运行 npm init 时,这些默认值会被自动填充。


3. package.json 文件的结构

以下是一个典型的 package.json 文件的结构:

json 复制代码
{
  "name": "my-project", // 项目名称
  "version": "1.0.0", // 项目版本
  "description": "A sample project", // 项目描述
  "main": "index.js", // 项目入口文件
  "scripts": { // 脚本命令
    "start": "node index.js",
    "test": "jest"
  },
  "dependencies": { // 生产环境依赖
    "express": "^4.17.1"
  },
  "devDependencies": { // 开发环境依赖
    "jest": "^27.0.0"
  },
  "keywords": ["sample", "project"], // 关键词
  "author": "John Doe", // 作者
  "license": "MIT" // 许可证
}

4. npm init 的常见问题

(1)package.json 文件已经存在

如果当前目录中已经存在 package.json 文件,npm init 会提示你是否要覆盖或修改它。

(2)项目名称规则
  • 项目名称必须是小写字母、数字、连字符(-)和下划线(_)的组合。
  • 项目名称不能以点(.)或下划线(_)开头。
  • 项目名称不能包含空格。
(3)版本号规则

版本号必须符合 Semantic Versioning (SemVer) 规范,格式为 主版本号.次版本号.修订号,例如 1.0.0


5. npm init 的进阶用法

(1)使用自定义初始化脚本

你可以创建一个自定义的初始化脚本(.npm-init.js),定义 npm init 的行为。例如:

css 复制代码
module.exports = {
  name: 'my-custom-project',
  version: '1.0.0',
  description: 'This is a custom npm init script',
  main: 'app.js',
  scripts: {
    start: 'node app.js'
  },
  keywords: ['custom', 'npm', 'init'],
  author: 'Jane Doe',
  license: 'MIT'
};

运行 npm init 时,npm 会自动读取 .npm-init.js 文件并使用其内容。

(2)npm init <initializer>

npm init 支持通过初始化器(initializer)创建特定类型的项目。例如:

  • 使用 create-react-app 初始化一个 React 项目:

    csharp 复制代码
    npm init react-app my-app
  • 使用 create-next-app 初始化一个 Next.js 项目:

    perl 复制代码
    npm init next-app my-app

这种方式实际上是调用了 npx,例如:

lua 复制代码
npx create-react-app my-app

init 命令将转换为相应的 npm exec作,如下所示:

  • npm init foo@latest # 从注册表中获取并运行最新的 create-foo
  • npm init foo@1.2.3 # 专门运行 create-foo@1.2.3
  • npm init foo -> npm exec create-foo
  • npm init @usr/foo -> npm exec @usr/create-foo
  • npm init @usr -> npm exec @usr/create
  • npm init @usr@2.0.0 -> npm exec @usr/create@2.0.0
  • npm init @usr/foo@2.0.0 -> npm exec @usr/create-foo@2.0.0

6. npm init 和npx 、npm exec的关系

npm exec 和 npx等效的,详情看 exec的笔记。

npx是完整的包名(npx create-vite),npm init省略了create(npm init vite)

npm init 就是调用了 npm exec

  • npm init foo@latest # 从注册表中获取并运行最新的 npm exec create-foo@latest
  • npm init foo@1.2.3 # 专门运行 npm exec create-foo@1.2.3
  • npm init foo -> npm exec create-foo
  • npm init @usr/foo -> npm exec @usr/create-foo
  • npm init @usr -> npm exec @usr/create
  • npm init @usr@2.0.0 -> npm exec @usr/create@2.0.0
  • npm init @usr/foo@2.0.0 -> npm exec @usr/create-foo@2.0.0

传递参数

任何其他选项都将直接传递给命令,因此 npm init foo -- --hello 将映射到 npm exec -- create-foo --hello .

为了更好地说明选项是如何转发的,这里有一个更进化的示例,显示了传递给 npm cli 和 create 包的选项,以下两个命令是等效的:

  • npm init foo -y --registry=<url> -- --hello -a
  • npm exec -y --registry=<url> -- create-foo --hello -a

7. 总结

npm init 是初始化 npm 项目的核心工具,它的主要功能是生成 package.json 文件。通过交互式或快速模式,你可以轻松地创建和管理项目的元数据、依赖和脚本。npm init 还支持自定义初始化和使用初始化器创建特定类型的项目,功能非常强大且灵活。

以下是 npm init 的常用命令总结:

  • 交互式初始化:npm init
  • 快速初始化:npm init -y
  • 使用初始化器:npm init <initializer>

install

npm install-test // npm i + npm test npm install-ci-test // npm ci + npm test

npm install 是 Node.js 包管理工具 npm 的核心命令之一,用于安装项目依赖或全局包。以下是关于 npm install 的详细解析,包括其功能、用法、参数以及常见场景。


1. 基本功能

npm install 的主要功能是安装项目依赖包或全局包。它会根据配置文件(如 package.json)或命令行参数来安装指定的包,并将包及其依赖下载到项目目录中的 node_modules 文件夹中。


2. 基本语法

css 复制代码
npm install [<package-spec> ...] [<options>]
  • <package-spec>:指定要安装的包名称及其版本。例如,npm install lodashnpm install lodash@4.17.21
  • <options>:指定安装选项,例如 -g(全局安装)、--save-dev(开发依赖)等。

3. 常见用法

安装项目依赖

如果项目根目录下存在 package.json 文件,运行以下命令会自动安装 dependenciesdevDependencies 中列出的所有包:

npm install
  • 结果:将依赖包安装在 node_modules 目录中。
  • 生成文件:如果不存在 package-lock.json 文件,会自动创建一个。

安装指定包

安装指定的包并将其添加到 dependencies 中:

go 复制代码
npm install <package-name>

示例:

npm install lodash
  • 结果:安装 lodash,并将其添加到 package.jsondependencies 中。

安装指定版本的包

安装指定版本的包:

xml 复制代码
npm install <package-name>@<version>

示例:

css 复制代码
npm install lodash@4.17.21
  • 结果:安装 lodash4.17.21 版本。

安装开发依赖

安装包并将其添加到 devDependencies 中:

lua 复制代码
npm install <package-name> --save-dev

示例:

css 复制代码
npm install jest --save-dev
  • 结果:安装 jest,并将其添加到 package.jsondevDependencies 中。

全局安装

将包安装到全局环境,通常用于命令行工具:

go 复制代码
npm install -g <package-name>

示例:

npm install -g typescript
  • 结果:将 typescript 安装到全局环境,可以直接在命令行中使用 tsc 命令。

安装开发环境的依赖

仅安装 devDependencies 中列出的包:

ini 复制代码
npm install --only=dev

安装生产环境的依赖

仅安装 dependencies 中列出的包:

ini 复制代码
npm install --only=prod

4. 重要选项

选项 说明
-g--global 全局安装包。
--save 将包添加到 dependencies 中(npm@5 后默认启用,无需显式指定)。
--save-dev 将包添加到 devDependencies 中。
--save-optional 将包添加到 optionalDependencies 中。
--no-save 安装包但不添加到 package.json 中。
--optional 仅安装 optionalDependencies 中的包。
--production 仅安装 dependencies 中的包(等同于 --only=prod)。
--force 强制重新安装包。
--legacy-peer-deps 忽略 peerDependencies 冲突。
--strict-peer-deps 严格处理 peerDependencies 冲突。
--package-lock-only 仅更新 package-lock.json,不安装包。

5. 常见场景

package.json 安装依赖

运行以下命令会根据 package.json 文件安装所有依赖:

npm install

安装并更新 package.json

安装新包并自动更新 package.json 文件:

npm install axios

安装开发工具

将开发工具(如测试框架、构建工具)安装为开发依赖:

css 复制代码
npm install jest --save-dev

安装全局工具

安装全局命令行工具:

npm install -g nodemon

处理依赖冲突

如果安装过程中遇到依赖冲突,可以使用以下选项:

css 复制代码
npm install --legacy-peer-deps

6. 其他相关命令

命令 说明
npm uninstall <package> 卸载指定包。
npm update <package> 更新指定包。
npm ls 列出当前项目安装的所有包及其依赖。
npm ci 根据 package-lock.json 安装依赖(适用于 CI/CD 环境)。

7. 总结

npm install 是 Node.js 开发中最常用的命令之一,用于安装和管理项目依赖。通过 package.json 文件,可以方便地记录和管理项目所需的依赖包。

8. 文档中的用法

文档

安装文件夹

如果 位于项目根目录中,其依赖项将被安装,并可能像对其他类型依赖项一样被提升到顶级 node modules 节点。如果位于项目根目 录之外,npm 不会安装目录中的包依赖项,但会创建到的符号链接。

注:如果您想从注册表安装目录的内容,而不是创建链接:您需要使用 --install-links 选项。

lua 复制代码
npm install ../../other-package --install-links
npm install ./sub-package
安装压缩文件

npm install a package that is sitting on the filesystem. Note: if you just want to link a dev directory into your npm root, you can do this more easily by using npm link.

Tarball requirements:

  • The filename must use .tar, .tar.gz, or .tgz as the extension.
  • The package contents should reside in a subfolder inside the tarball (usually it is called package/). npm strips one directory layer when installing the package (an equivalent of tar x --strip-components=1 is run).
  • The package must contain a package.json file with name and version properties.
bash 复制代码
npm install ./package.tgz

从url安装压缩文件

ruby 复制代码
npm install https://github.com/indexzero/forever/tarball/v0.5.6
使用别名

npm install jquery2@npm:jquery@2 什么意思?

这个命令的意思是:安装一个名为 jquery2 的包,但实际安装的是 jquery@2 版本

以下是详细解释:

语法
ruby 复制代码
npm install <alias>@npm:<name>

1. 解析
ruby 复制代码
npm install jquery2@npm:jquery@2
  • npm install:安装包的命令。

  • jquery2:这是你想要在项目中使用的包名(别名)。

  • @npm:jquery@2:这是包的来源和目标版本:

    • npm: 表示从 npm 官方仓库中安装包。
    • jquery 是实际的包名。
    • @2 是包的版本号(这里是 jQuery 2.x 版本)。

因此,这个命令的意思是:从 npm 仓库中安装 jquery 的 2.x 版本,并将其在项目中命名为 jquery2


2. 为什么需要这种写法?

这种写法通常用于以下几种场景:

(1)使用不同版本的同一个包

例如,项目中已经安装了 jquery 的最新版本(如 3.x),但某些模块需要依赖 jquery 的 2.x 版本。为了避免版本冲突,可以将 2.x 版本安装为另一个名称(如 jquery2)。

(2)避免命名冲突

如果项目中已经有一个名为 jquery 的包,但你需要安装另一个版本的 jquery,可以使用别名来安装。

(3)使用语义化的别名

例如,你可能希望将 jquery@2 安装为 jquery-legacy,以便在代码中更清晰地表达其用途。


3. 安装后的结果

执行这个命令后,package.json 中会添加一个依赖项,例如:

perl 复制代码
{
  "dependencies": {
    "jquery2": "npm:jquery@^2.2.4"
  }
}

在代码中,你可以通过 require('jquery2')import 'jquery2' 来使用这个包。


4. 类似的使用场景

这种写法不仅适用于 jQuery,还适用于其他包。例如:

ruby 复制代码
npm install lodash2@npm:lodash@2

这将安装 lodash 的 2.x 版本,并将其命名为 lodash2


5. 注意事项
  • 版本号@2 表示安装 2.x 的最新版本。如果需要指定具体的版本号,可以使用 @2.2.4 等。
  • 包管理:如果需要同时使用多个版本的包,请确保代码中正确引用它们,以避免混淆。
  • 兼容性:不同版本的包可能会有 API 差异,使用时需要注意兼容性问题。

6. 总结

npm install jquery2@npm:jquery@2 的意思是:

  1. 从 npm 仓库中安装 jquery 的 2.x 版本。
  2. 在项目中将其命名为 jquery2,以便与现有的 jquery 包区分开。

这种写法适用于需要安装同一包的不同版本或避免命名冲突的场景。

从仓库安装包
bash 复制代码
npm install git+ssh://git@github.com:npm/cli.git#v1.0.27 

这个命令的意思是:通过 SSH 协议从 GitHub 仓库 npm/cli 中安装标签为 v1.0.27 的版本

以下是详细解析:


1. 命令解析
  • npm install:安装包的命令。

  • git+ssh://git@github.com:npm/cli.git:指定从 Git 仓库安装包:

    • git+ssh 表示使用 SSH 协议访问 Git 仓库。
    • git@github.com:npm/cli.git 是 Git 仓库的地址(npm/cli 是 npm 官方的命令行工具仓库)。
  • #v1.0.27 :指定安装的版本(这里是标签 v1.0.27)。

因此,这个命令的意思是:通过 SSH 协议从 GitHub 的 npm/cli 仓库中安装标签为 v1.0.27 的版本


2. 为什么需要这种写法?

这种写法通常用于以下几种场景:

(1)安装未发布到 npm 的包

某些包可能尚未发布到 npm 仓库,但已经托管在 Git 仓库中。这时可以直接从 Git 安装。

(2)安装特定版本的包

如果 npm 仓库中的版本不符合需求(例如需要测试某个 Git 标签或分支的代码),可以直接从 Git 仓库安装。

(3)使用私有仓库

如果 Git 仓库是私有的,可以通过 SSH 协议进行安全访问。


3. Git 协议的变体

除了 git+ssh,还可以使用以下协议格式:

  • https:通过 HTTPS 协议访问 Git 仓库。

    bash 复制代码
    npm install https://github.com/npm/cli.git#v1.0.27
  • git:使用 Git 协议(不推荐,因为 Git 协议不支持加密)。

    bash 复制代码
    npm install git://github.com/npm/cli.git#v1.0.27

4. 指定版本的方式

在 Git 仓库中,可以通过以下方式指定版本:

  • 标签(Tag) :例如 #v1.0.27,指向仓库中的某个发布版本。
  • 分支(Branch) :例如 #main,指向某个分支的最新代码。
  • 提交哈希(Commit Hash) :例如 #a1b2c3d,指向某次提交。

5. 安装后的结果

执行这个命令后,npm 会:

  1. 克隆 npm/cli 仓库。

  2. 切换到 v1.0.27 标签对应的代码。

  3. 将代码安装到项目的 node_modules 目录中。

  4. package.json 中添加一条依赖记录:

    perl 复制代码
    {
      "dependencies": {
        "cli": "git+ssh://git@github.com:npm/cli.git#v1.0.27"
      }
    }

在代码中,可以通过 require('cli')import 'cli' 来使用这个包。


6. 注意事项
  • SSH 配置 :使用 git+ssh 需要确保本地 SSH 配置正确,并且有权限访问仓库。
  • 网络问题:如果网络不稳定,可能会因克隆仓库失败而导致安装失败。
  • 版本兼容性:直接从 Git 安装的包可能没有经过 npm 的发布流程,使用时需要注意版本兼容性问题。
  • 依赖管理:如果包依赖其他 npm 包,npm 会自动处理子依赖的安装。

7. 总结

npm install git+ssh://git@github.com:npm/cli.git#v1.0.27 的意思是:

  1. 通过 SSH 协议从 GitHub 的 npm/cli 仓库中安装代码。
  2. 安装的是标签为 v1.0.27 的版本。

这种写法适用于从 Git 仓库直接安装特定版本的包,尤其是未发布到 npm 或需要测试特定版本代码的场景。

uninstall

npm uninstall 是 npm 的一个命令,用于从项目中卸载已安装的依赖包。它可以帮助你移除不再需要的依赖,或者清理项目中的无用包。


1. 命令格式

go 复制代码
npm uninstall <package-name>
  • <package-name>:需要卸载的包的名称。
其他格式
  1. 使用别名:
  • npm uninstall 可以简写为 npm unnpm removenpm rm
  1. 卸载全局包:

    go 复制代码
    npm uninstall -g <package-name>
  2. 卸载多个包:

    xml 复制代码
    npm uninstall <package1> <package2> <package3>

2. 功能解析

卸载本地包

默认情况下,npm uninstall 会从当前项目的 node_modules 文件夹中移除指定的包,并更新 package.jsonpackage-lock.json

例如,卸载 lodash

npm uninstall lodash

执行后:

  • lodash 会从 node_modules 中移除。
  • package.json 中的 dependenciesdevDependencies 字段会移除 lodash
  • package-lock.json 会更新,移除 lodash 的相关信息。
卸载全局包

如果需要卸载全局安装的包,可以加上 -g--global 标志。例如:

npm uninstall -g typescript

执行后:

  • typescript 会从全局的 node_modules 中移除。
卸载开发依赖

如果包是作为开发依赖安装的(即在 devDependencies 中),npm uninstall 会自动更新 package.json 中的 devDependencies 字段。


3. 常用选项

选项 说明
--save dependencies 中移除包(默认行为)。
--save-dev devDependencies 中移除包。
--no-save 卸载包,但不更新 package.jsonpackage-lock.json
--global, -g 卸载全局安装的包。
--dry-run 模拟卸载过程,显示将会发生的变化,但不实际执行。
示例
  1. 卸载开发依赖:

    css 复制代码
    npm uninstall --save-dev jest
  2. 卸载包但不更新 package.json

    css 复制代码
    npm uninstall --no-save lodash

4. 注意事项

  1. package.json 更新
  • 默认情况下,npm uninstall 会更新 package.jsonpackage-lock.json。如果不想更新,可以使用 --no-save 选项。
  1. 全局包的路径

    • 全局包的安装路径可以通过以下命令查看:

      npm root -g
      
  2. 卸载后检查

  • 卸载包后,可以运行 npm listnpm ls 查看当前项目的依赖树,确保包已成功移除。
  1. 清理无用依赖

    • 如果你不确定项目中是否有无用依赖,可以运行以下命令检查:

      npm prune
      

      这会移除 package.json 中未列出的依赖。


5. 示例场景

场景 1:卸载本地依赖

假设项目中安装了 lodash,但不再需要它,可以执行:

npm uninstall lodash

执行后:

  • lodash 会从 node_modules 中移除。
  • package.jsondependencies 字段会移除 lodash
场景 2:卸载全局依赖

假设全局安装了 typescript,但不再需要它,可以执行:

npm uninstall -g typescript

执行后:

  • typescript 会从全局 node_modules 中移除。
场景 3:卸载开发依赖

假设项目中安装了 jest 作为开发依赖,但不再需要它,可以执行:

css 复制代码
npm uninstall --save-dev jest

执行后:

  • jest 会从 node_modules 中移除。
  • package.jsondevDependencies 字段会移除 jest

6. 总结

npm uninstall 是一个非常实用的命令,用于从项目中移除依赖包。它的主要功能包括:

  • 移除本地或全局安装的包。
  • 更新 package.jsonpackage-lock.json
  • 支持卸载开发依赖。
  • 提供多种选项以满足不同需求。

npm link 是一个非常有用的工具,用于在本地开发和测试 npm 包时,将本地包链接到其他项目,而无需发布到 npm 或使用文件路径安装。以下是它的详细解析:


npm link 允许你将本地的 npm 包符号链接 到全局目录,然后在其他项目中链接使用它。这样,你可以在开发时实时测试本地包,而无需频繁发布或重新安装。


2. 使用场景

  • 本地包开发:当你开发一个 npm 包时,可以将其链接到其他项目进行测试。
  • 依赖调试 :当你需要调试某个依赖包的代码时,可以将其克隆到本地,然后通过 npm link 进行实时修改和测试。
  • 避免频繁发布 :在开发阶段,使用 npm link 可以避免频繁发布到 npm 进行测试。

(1)将本地包链接到全局

在你的 npm 包项目根目录中执行:

bash 复制代码
npm link

这会将该包符号链接 到全局的 node_modules 目录中(路径通常是 ~/.nvm/versions/node/<版本>/lib/node_modules)。

(2)在项目中使用链接的包

进入你需要使用这个包的项目目录,执行:

bash 复制代码
npm link <包名>

这会将全局链接的包符号链接 到当前项目的 node_modules 目录中。

(3)取消链接

如果想取消链接,可以在项目中执行:

bash 复制代码
npm unlink <包名>

或者删除项目中的 node_modules 目录并重新安装依赖。

(4)简写

完整写法

bash 复制代码
cd ~/projects/node-redis    # go into the package directory
npm link                    # creates global link
cd ~/projects/node-bloggy   # go into some other package directory.
npm link redis              # link-install the package

简写

bash 复制代码
cd ~/projects/node-bloggy  # go into the dir of your main project
npm link ../node-redis     # link the dir of your dependency

相当于是↓
(cd ../node-redis; npm link)
npm link redis

4. 示例

(1)开发一个本地 npm 包

假设你正在开发一个名为 my-package 的 npm 包,路径是 ~/projects/my-package

  1. 进入 my-package 目录:

    bash 复制代码
    cd ~/projects/my-package
  2. 将其链接到全局:

    bash 复制代码
    npm link
(2)在项目中使用该包

假设你有一个项目 my-app,路径是 ~/projects/my-app,并且你希望在 my-app 中使用 my-package

  1. 进入 my-app 目录:

    bash 复制代码
    cd ~/projects/my-app
  2. 将全局的 my-package 链接到当前项目:

    perl 复制代码
    npm link my-package
(3)取消链接

如果不想再使用链接的包,可以执行:

perl 复制代码
npm unlink my-package

或者删除 node_modules 并重新安装依赖:

bash 复制代码
rm -rf node_modules
npm install

5. 注意事项

(1)符号链接的影响
  • npm link 创建的符号链接指向的是本地包的源码,因此对源码的任何修改都会立即反映在项目中。
  • 如果本地包有 postinstall 脚本,可能不会在链接后被触发。
(2)版本冲突

如果项目已经安装了某个版本的包,npm link 会覆盖它。取消链接后,可能需要重新安装依赖。

(3)全局包的管理

链接到全局的包会占用全局 node_modules 空间,如果不再需要,可以通过以下命令取消全局链接:

bash 复制代码
npm unlink -g <包名>
(4)跨项目依赖

如果被链接的包本身依赖其他本地包,你需要手动将这些依赖也链接到项目中。

(5)Windows 系统的兼容性

在 Windows 系统上,符号链接可能需要管理员权限才能创建。如果遇到权限问题,可以尝试以管理员身份运行终端。


6. npm install 的区别

功能 npm install npm link
安装方式 从 npm 仓库或本地文件安装 创建符号链接到本地包
修改实时性 需要重新安装才能生效 实时生效
发布需求 需要将包发布到 npm 或指定文件路径 不需要发布
适用场景 正式项目依赖 本地开发和测试

7. 总结

npm link 是一个非常强大的工具,适用于以下场景:

  • 开发本地 npm 包时进行实时测试。
  • 调试项目依赖包的代码。
  • 避免频繁发布到 npm。

通过 npm link,你可以将本地包链接到其他项目,实时查看修改效果,极大提高开发效率。

set-script

npm set-script 是 npm 7.0.0 版本引入的一个命令,用于方便地在 package.json 文件的 scripts 字段中添加或更新脚本。它可以简化脚本管理的操作,避免了手动编辑 package.json 文件的繁琐。

命令格式

arduino 复制代码
npm set-script <script-name> "<command>"
  • <script-name>:脚本的名称(例如 startbuild 等)。
  • <command>:要执行的命令(例如 node app.jsreact-scripts build 等)。

功能解析

  1. 添加新脚本 : 如果 package.jsonscripts 字段中没有同名脚本,npm set-script 会自动创建一个新的脚本。
  2. 更新已有脚本 : 如果 package.jsonscripts 字段中已经存在同名的脚本,npm set-script 会覆盖原有的命令。
  3. 避免手动编辑 package.json : 使用 npm set-script 可以避免直接修改 package.json 文件,减少人为错误。

示例

添加一个新脚本

假设你想在 scripts 中添加一个 lint 脚本来运行 ESLint:

arduino 复制代码
npm set-script lint "eslint ."

运行后,package.json 中会新增一个脚本:

json 复制代码
"scripts": {
  "lint": "eslint ."
}
更新已有脚本

假设你有一个 start 脚本,想要更新其命令:

sql 复制代码
npm set-script start "node server.js"

运行后,package.json 中的 start 脚本会更新为:

json 复制代码
"scripts": {
  "start": "node server.js"
}
查看结果

你可以通过以下命令查看 scripts 的部分内容:

arduino 复制代码
npm run

或者直接打开 package.json 文件查看。

注意事项

  1. npm 版本要求npm set-script 需要 npm 7.0.0 或更高版本。如果你的 npm 版本较低,可以通过以下命令升级:

    css 复制代码
    npm install -g npm@latest
  2. 命令中的引号 : 如果命令中包含空格或特殊字符,需要用引号将其包裹(例如 "node app.js")。

  3. 删除脚本npm set-script 只能添加或更新脚本,无法删除脚本。如果需要删除脚本,需要手动编辑 package.json 文件。

总结

npm set-script 是一个简洁高效的工具,特别适合快速添加或更新 package.json 中的脚本,避免了手动编辑文件可能带来的错误。如果你的 npm 版本支持它,强烈推荐使用它来管理脚本!

pkg

npm pkgnpm 提供的一个命令,用于直接操作 package.json 文件 。它允许你通过命令行读取、修改或删除 package.json 中的字段,而不需要手动编辑文件。这个命令在脚本自动化或快速修改配置时非常有用。


基本用法

xml 复制代码
npm pkg <command> [<key>=<value>]

支持的子命令

  • get:获取 package.json 中的字段值。
  • set:设置 package.json 中的字段值。
  • delete:删除 package.json 中的字段。

详细解析

1. npm pkg get

获取 package.json 中指定字段的值。

vbnet 复制代码
npm pkg get <key>

示例 : 获取 name 字段的值:

arduino 复制代码
npm pkg get name

输出

arduino 复制代码
"my-project"
2. npm pkg set

设置 package.json 中指定字段的值。

arduino 复制代码
npm pkg set <key>=<value>

示例 : 设置 version 字段为 1.0.0

ini 复制代码
npm pkg set version=1.0.0

注意

  • 如果需要设置嵌套字段,可以使用.分隔。例如:

    ini 复制代码
    npm pkg set scripts.start="node index.js"
3. npm pkg delete

删除 package.json 中指定的字段。

arduino 复制代码
npm pkg delete <key>

示例 : 删除 description 字段:

arduino 复制代码
npm pkg delete description

常用选项

选项 说明
--json 以 JSON 格式输出结果。
--workspace <name> 在工作区模式下,指定要操作的工作区(需启用 workspaces)。

高级用法

1. 批量设置字段

可以使用多个 key=value 对,一次性设置多个字段。

ini 复制代码
npm pkg set version=1.0.0 description="My awesome project"
2. 使用 --json 选项

以 JSON 格式输出结果,便于程序化处理。

sql 复制代码
npm pkg get name --json

输出

arduino 复制代码
"my-project"
3. 在工作区中使用

如果你的项目启用了工作区(workspaces),可以使用 --workspace 选项操作指定的工作区。

ini 复制代码
npm pkg set version=1.0.0 --workspace=my-workspace

使用场景

  1. 自动化脚本 在 CI/CD 或自动化脚本中,使用 npm pkg 动态修改 package.json
  2. 快速修改 不需要手动编辑文件,直接通过命令行修改 package.json 的字段。
  3. 配置管理 批量设置或删除多个字段,提高效率。

常见问题

  1. 如何修改嵌套字段? 使用.分隔嵌套字段。例如:

    ini 复制代码
    npm pkg set scripts.start="node index.js"
  2. 如何删除嵌套字段? 同样使用.分隔嵌套字段。例如:

    arduino 复制代码
    npm pkg delete scripts.start
  3. 如何避免覆盖现有字段? 如果字段已经存在,npm pkg set 会覆盖其值。如果需要避免覆盖,可以先使用 npm pkg get 检查字段是否存在。

  4. 如何恢复默认值? 如果需要恢复某个字段的默认值,可以使用 npm pkg delete 删除该字段,然后重新运行 npm init 或其他相关命令。


总结

npm pkg 是一个强大的工具,它的核心功能包括:

  • 读取、设置、删除 package.json 中的字段。
  • 支持嵌套字段和批量操作。
  • 适用于自动化脚本和快速配置修改。

分隔 npm run 参数和脚本参数

在使用 npm run 执行脚本时,-- 的作用是将传递给 npm run 的参数与脚本参数分隔开。具体来说,-- 符号后面的所有内容都会被当作参数传递给脚本本身,而不是传递给 npm 命令。

详细解释:

  • npm run test:执行 package.json 文件中定义的 test 脚本。
  • npm run test -- --coverage:执行 test 脚本,并将 --coverage 参数传递给 test 脚本。

为什么需要 --

npm run 本身可以接受一些参数(比如 --silent--verbose 等),这些参数是配置 npm 命令的行为的。为了让 npm 明确区分哪些参数是给 npm 的,哪些是给脚本的,需要使用 -- 来分隔。

  • 没有 -- 时:npm run test --coverage npm 会认为 --coveragenpm 自己的参数,而不是传递给 test 脚本的参数,因此会报错或忽略。
  • -- 时:npm run test -- --coverage npm 会将 -- 后面的内容(--coverage)明确传递给 test 脚本。

举个例子:

假设 package.json 中的 test 脚本是:

json 复制代码
"scripts": {
  "test": "jest"
}
  • npm run test 会执行 jest 命令。
  • npm run test -- --coverage 会执行 jest --coverage 命令。

如果去掉 --,写成 npm run test --coveragenpm 会尝试将 --coverage 作为自己的参数,导致错误或无法正确传递参数。

总结:

--npm 中用于分隔 npm run 参数和脚本参数的符号,确保参数被正确地传递给脚本。

查看package.json中有哪些可用的脚本

arduino 复制代码
npm run 
arduino 复制代码
npm pkg get scripts

run

npm run 是 npm 提供的一个命令,用于运行在 package.json 文件的 scripts 字段中定义的脚本。它是在开发和构建 Node.js 项目时最常用的命令之一。以下是 npm run 的详细解析和使用场景。


1. 基本语法

xml 复制代码
npm run <script-name> [-- <args>]
  • <script-name>package.jsonscripts 字段定义的脚本名称。
  • -- <args>:可选参数,传递给脚本的附加参数。
示例:

运行 start 脚本:

arduino 复制代码
npm run start

运行 test 脚本并传递参数:

arduino 复制代码
npm run test -- --coverage

2. package.json 中的 scripts 字段

npm run 的核心是 package.json 中的 scripts 字段。这些脚本可以是任何可以在命令行中运行的命令,例如启动服务器、运行测试、构建项目等。

示例 package.json

json 复制代码
{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js",
    "test": "jest",
    "build": "webpack --mode production",
    "lint": "eslint src"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

3. 常见用法

(1)运行预定义的脚本

运行 package.json 中定义的脚本,例如:

arduino 复制代码
npm run start
npm run test
npm run build
(2)运行带参数的脚本

通过 -- 传递参数给脚本:

arduino 复制代码
npm run test -- --coverage
(3)运行 prepost 脚本

npm 会自动运行以 prepost 为前缀的脚本。例如,如果你运行 npm run build,npm 会依次执行:

  1. prebuild(如果存在)
  2. build
  3. postbuild(如果存在)
示例:
json 复制代码
{
  "scripts": {
    "prebuild": "echo 'Preparing to build...'",
    "build": "webpack --mode production",
    "postbuild": "echo 'Build completed!'"
  }
}

运行 npm run build 时,输出如下:

shell 复制代码
> my-app@1.0.0 prebuild
> echo 'Preparing to build...'
​
Preparing to build...
​
> my-app@1.0.0 build
> webpack --mode production
​
> my-app@1.0.0 postbuild
> echo 'Build completed!'
​
Build completed!

4. 特殊脚本

(1)starttest

starttest 是 npm 的默认脚本,可以直接运行而无需使用 npm run

bash 复制代码
npm start
npm test
css 复制代码
scripts: {
    "dev": "vite",
 "start": "node bin/index.js",
}

运行start、stop、restart的方式 -> npm run start 或 npm start(必须要在scripts中定义好start、stop命令) restart等于 npm stop + npm start

运行除了上面之外的命令,只能通过 npm run xxx 运行命令不能省略 run,因为start、stop是npm的预置命令

(2)prestartpoststart

类似于 prebuildpostbuildprestartpoststart 会在 npm start 前后自动执行。

(3)prepublishpostpublish

这些脚本在发布包时自动执行。


5. 使用场景

(1)启动开发服务器

通常使用 npm startnpm run dev 来启动开发服务器。

示例:
sql 复制代码
npm start
(2)运行测试

使用 npm testnpm run test 来运行测试。

示例:
bash 复制代码
npm test
(3)构建项目

使用 npm run build 来构建生产环境代码。

示例:
arduino 复制代码
npm run build
(4)代码检查

使用 npm run lint 来运行代码检查工具(如 ESLint)。

示例:
arduino 复制代码
npm run lint

6. 高级用法

(1)传递环境变量

可以通过环境变量向脚本传递参数。

示例:
ini 复制代码
NODE_ENV=production npm run build
(2)并行运行脚本

使用 npm-run-all 工具并行运行多个脚本。

示例:
json 复制代码
{
  "scripts": {
    "start": "npm-run-all --parallel server watch",
    "server": "node server.js",
    "watch": "webpack --watch"
  }
}
(3)钩子脚本

利用 prepost 脚本实现自动化任务。

示例:
json 复制代码
{
  "scripts": {
    "prebuild": "echo 'Preparing to build...'",
    "build": "webpack --mode production",
    "postbuild": "echo 'Build completed!'"
  }
}

7. 常见问题

(1)npm run 和直接运行命令的区别

npm run 会在项目的 node_modules/.bin 目录下查找可执行文件,因此可以直接运行本地安装的工具(如 webpackjest 等),而无需全局安装。

(2)如何查看可用脚本?

可以通过以下命令查看 package.json 中定义的脚本:

arduino 复制代码
npm run
(3)脚本运行失败怎么办?

检查 package.json 中的脚本定义,确保命令正确。如果脚本中有错误,npm 会输出详细的错误信息。


8. 总结

npm run 是运行 package.json 中定义脚本的主要命令,常用场景包括:

  • 启动开发服务器
  • 运行测试
  • 构建项目
  • 代码检查
  • 自动化任务

update

npm update 是 npm 的一个命令,用于更新项目中已安装的依赖包到最新兼容版本。它会根据 package.json 中指定的版本范围更新包,并更新 package-lock.json 文件。


1. 命令格式

css 复制代码
npm update [<package-name>]
  • <package-name>:可选参数,指定需要更新的包名称。如果不提供,则更新所有包。
其他格式
  1. 更新全局包:

    go 复制代码
    npm update -g <package-name>
  2. 更新特定范围的包:

    xml 复制代码
    npm update <package1> <package2>

2. 功能解析

更新本地包

默认情况下,npm update 会更新本地项目的依赖包到最新版本。例如:

sql 复制代码
npm update lodash

执行后:

  • 如果 lodash 有新的兼容版本,npm 会更新它。
  • package-lock.json 会更新为新的版本号。
  • package.json 中的版本范围不会改变。
更新全局包

如果需要更新全局安装的包,可以加上 -g--global 标志。例如:

sql 复制代码
npm update -g typescript
更新所有包

如果不指定包名称,npm update 会更新所有依赖包:

sql 复制代码
npm update

3. 常用选项

选项 说明
--global, -g 更新全局安装的包。
--save 更新 dependencies 中的包(默认行为)。
--save-dev 更新 devDependencies 中的包。
--dry-run 模拟更新过程,显示将会发生的变化,但不实际执行。
--json 以 JSON 格式输出更新结果。
示例
  1. 更新所有开发依赖:

    sql 复制代码
    npm update --save-dev
  2. 模拟更新:

    sql 复制代码
    npm update --dry-run

4. 结合 package.json 的版本范围

npm update 的行为与 package.json 中指定的版本范围密切相关。以下是常见的版本范围及其影响:

版本范围 说明
^1.2.3 更新到最新的次要版本和补丁版本(例如 1.x.x,但不包括 2.0.0)。
~1.2.3 更新到最新的补丁版本(例如 1.2.x,但不包括 1.3.0)。
1.2.3 固定版本,不会更新。
* 更新到最新版本。

例如:

  • 如果 package.json 中指定 ^1.2.3npm update 会更新到最新的 1.x.x 版本。
  • 如果指定 ~1.2.3npm update 会更新到最新的 1.2.x 版本。

5. 注意事项

  1. package.json 版本范围
  • npm update 不会改变 package.json 中的版本范围,只会更新 package-lock.json
  1. package-lock.json
  • npm update 会更新 package-lock.json 中的版本号,确保依赖关系的一致性。
  1. 全局包
  • 更新全局包时,确保你有足够的权限。
  1. 安全性
  • 在更新依赖包时,建议检查包的更新日志(Changelog),确保新版本没有引入破坏性变更或安全问题。
  1. 结合 npm outdated

    • 在更新之前,可以使用 npm outdated 查看哪些包需要更新:

      npm outdated
      

6. 示例场景

场景 1:更新单个包

假设项目中安装了 lodash,需要更新到最新版本:

sql 复制代码
npm update lodash
场景 2:更新所有包

更新项目中所有依赖包:

sql 复制代码
npm update
场景 3:更新全局包

更新全局安装的 typescript

sql 复制代码
npm update -g typescript

7. 总结

npm update 是一个非常有用的命令,用于更新项目中的依赖包到最新兼容版本。其主要功能包括:

  • 更新本地或全局安装的包。
  • 根据 package.json 中的版本范围更新包。
  • 更新 package-lock.json 文件。
  • 支持更新开发依赖。
相关推荐
昕er几秒前
CefSharp 文件下载和保存功能-监听前端事件
前端
@PHARAOH6 分钟前
WHAT - Tree Shaking 的前提是 ES Module
前端·webpack·ecmascript
鱼樱前端12 分钟前
📚 Vue Router 4 核心知识点(Vue3技术栈)面试指南
前端·javascript·vue.js
食指Shaye19 分钟前
Chrome 中清理缓存的方法
前端·chrome·缓存
午后书香30 分钟前
一天三场面试,口干舌燥要晕倒(二)
前端·javascript·面试
Book_熬夜!1 小时前
CSS—补充:CSS计数器、单位、@media媒体查询
前端·css·html·媒体
几度泥的菜花2 小时前
如何禁用移动端页面的多点触控和手势缩放
前端·javascript
狼性书生2 小时前
electron + vue3 + vite 渲染进程到主进程的双向通信
前端·javascript·electron
肥肠可耐的西西公主2 小时前
前端(AJAX)学习笔记(CLASS 4):进阶
前端·笔记·学习
拉不动的猪2 小时前
Node.js(Express)
前端·javascript·面试