npm 包 script 使用教程

npm 是前端开发中必不可少的一款工具，除了管理包的安装和卸载之外，它还提供了一些命令行脚本，用于在项目中执行一些任务，比如打包、测试和发布等。这些脚本可以通过 package.json 中的 scripts 字段定义和调用。

基本语法

"scripts": {
  "task-1": "command-1",
  "task-2": "command-2",
  "task-3": "command-3"
}

scripts 字段是一个对象，包含了多个任务和对应的命令。每个任务由一个自定义名称和一个命令字符串组成，任务名称不能包含空格和特殊字符，命令字符串可以调用本地或全局安装的 CLI 工具，也可以执行 shell 命令，并遵循跨平台的规范，如使用 \ 反斜杠代替 / 正斜杠。

"scripts": {
  "build": "webpack --mode production --config webpack.prod.js",
  "serve": "http-server -p 8080",
  "test": "jest --coverage",
  "prettier": "prettier --write src/**/*.js"
}

以上是常见的一些 npm 脚本示例，分别用于构建项目、启动本地服务器、运行测试和格式化代码等。

执行顺序

npm 脚本有一定的执行顺序，一般情况下，会按照定义的顺序依次执行，也可以使用 npm run 命令指定具体的任务名称。

npm run task-name

此外，还可以在任务名称前加上 pre 或 post 前缀，表示在该任务执行前或执行后自动执行一个任务，例如：

"scripts": {
  "prebuild": "npm install",
  "build": "webpack --mode production --config webpack.prod.js",
  "postbuild": "echo 'build finished'"
}

在这个示例中，prebuild 任务会在 build 任务之前执行 npm install， postbuild 任务会在 build 任务之后执行 echo 'build finished'。

环境变量

npm 脚本支持在命令行上设置环境变量，格式为 KEY=value，对应的环境变量名为 process.env.KEY。

"scripts": {
  "start": "PORT=8080 http-server"
}

在这个示例中，会将 PORT 环境变量设置为 8080，并使用 http-server 启动一个本地服务器，默认监听 8080 端口。

跨平台问题

在使用 npm 脚本时，需要考虑跨平台的问题，例如 Windows 和 Linux/MacOS 不同的 Shell 环境，以及路径分隔符的差异。为了解决这个问题，可以使用一些跨平台的工具库，例如 cross-env 和 cross-var。

"scripts": {
  "build": "cross-env NODE_ENV=production webpack --mode production --config webpack.prod.js"
}

在这个示例中，cross-env 会将 NODE_ENV 环境变量设置为 production，并在所有平台上生效，无需考虑不同的 Shell 环境。

总结

npm 脚本是前端开发中非常强大的一个工具，方便了开发、测试和部署等环节，可以大大提高开发效率和代码质量。我们可以根据具体项目需要，定义和执行不同的任务，并使用一些工具库和技巧，来解决跨平台和环境变量等问题，让开发更加顺畅和高效。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76094