JavaScript中如何使用npm脚本？

在JavaScript项目开发过程中，npm脚本是依托npm包管理器实现自动化任务的核心工具，所有配置都存放在项目的package.json文件中，不需要额外安装其他依赖就能直接使用，能够覆盖开发、测试、构建等多个环节的操作需求。

npm脚本的基础配置

npm脚本的配置位于package.json的scripts字段下，这个字段是一个对象，键是脚本的名称，值是要执行的命令行指令。我们可以先初始化一个项目，生成默认的package.json文件：

# 初始化项目，按提示填写信息即可生成package.json
npm init -y

初始化完成后，打开package.json文件，会看到默认的scripts字段内容如下：

{
  "name": "test-project",
  "version": "1.0.0",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

常用npm脚本的编写与执行

我们可以根据实际需求在scripts字段中添加自定义脚本，以下是几个常见的示例：

启动开发服务器

如果是前端项目使用webpack或者vite，通常会配置启动开发服务器的脚本：

{
  "scripts": {
    "dev": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

执行这个脚本只需要在命令行输入npm run dev即可，npm会自动找到scripts中键为dev的指令并执行。

运行测试脚本

如果项目使用jest作为测试框架，可以配置测试相关的脚本：

{
  "scripts": {
    "dev": "vite",
    "test": "jest"
  }
}

执行npm run test就会运行项目中的所有测试用例。

打包构建脚本

项目上线前需要打包，也可以配置对应的脚本：

{
  "scripts": {
    "dev": "vite",
    "test": "jest",
    "build": "vite build"
  }
}

执行npm run build就会生成打包后的文件，通常存放在dist目录下。

npm脚本的进阶使用技巧

脚本参数传递

如果需要给脚本传递参数，可以在执行命令后添加--再加参数，比如给测试脚本指定只运行某个文件的测试：

npm run test -- src/utils.test.js

这个参数会被传递到对应的jest命令中，实现指定文件测试的效果。

串联执行多个脚本

如果需要按顺序执行多个指令，可以使用&&连接，比如先打包再启动静态服务器预览：

{
  "scripts": {
    "dev": "vite",
    "test": "jest",
    "build": "vite build",
    "preview": "npm run build && vite preview"
  }
}

执行npm run preview的时候，会先执行build脚本完成打包，打包成功后再执行vite preview启动预览服务。

使用预执行和后执行脚本

npm支持给脚本添加pre和post前缀，形成生命周期脚本。比如给build脚本添加预执行和后续操作：

{
  "scripts": {
    "dev": "vite",
    "test": "jest",
    "build": "vite build",
    "prebuild": "echo 开始打包，请稍候",
    "postbuild": "echo 打包完成，文件存放在dist目录"
  }
}

执行npm run build的时候，会先自动执行prebuild脚本，再执行build脚本，最后执行postbuild脚本，适合做一些前置检查或者后续通知类的操作。

注意事项

• npm内置了几个常用的脚本别名，比如npm start对应npm run start，npm test对应npm run test，不需要加run前缀就可以直接执行。
• 脚本中可以直接使用项目node_modules下的可执行命令，不需要写完整的路径，npm会自动从node_modules/.bin目录中查找对应的指令。
• 如果脚本名称和其他npm内置命令冲突，执行的时候还是需要加run前缀，避免执行的是npm内置命令。

npm脚本JavaScriptpackage.json命令行Node.js修改时间：2026-06-05 01:50:59