在package.json中scripts这个配置是用来干什么的

package.json中的scripts字段是 Node.js 项目中管理自定义命令的核心配置项，本质是一个「命令别名映射表」——你可以把常用的、冗长的终端命令（比如启动项目、打包、测试、部署）封装成简短的别名，通过npm run <别名>快速执行，极大提升开发效率。

一、核心作用 & 底层原理

1. 核心价值

• 简化命令：把复杂的终端命令（如vue-cli-service serve --mode test）简化为npm run serve:test，不用每次手动输入长命令；
• 统一规范：团队成员只需执行约定好的npm run xxx，无需关心命令背后的细节（比如不同环境的参数、路径），避免“各人各写法”；
• 跨平台兼容：npm 会自动处理 Windows/macOS/Linux 下的命令差异（比如路径分隔符、环境变量设置）；
• 钩子机制：支持pre/post钩子（比如执行npm run build时，会自动先执行prebuild，再执行build，最后执行postbuild）。

2. 底层原理

执行npm run <脚本名>时，npm 会：

1. 先在项目的node_modules/.bin目录下查找命令（比如vue-cli-service、tsc等依赖包的可执行文件）；
2. 拼接scripts里定义的命令，在当前项目的上下文（而非全局）中执行；
3. 自动将node_modules/.bin加入系统环境变量PATH，所以不用写完整路径（比如直接写vue-cli-service而非./node_modules/.bin/vue-cli-service）。

二、基础用法 & 示例

1. 基本格式

scripts是一个 JSON 对象，键是「命令别名」，值是「要执行的终端命令」：

{"name":"my-vue-project","version":"1.0.0","scripts":{"serve":"vue-cli-service serve",// 别名：serve，对应命令：启动开发服务器"build":"vue-cli-service build",// 别名：build，对应命令：打包生产环境代码"lint":"eslint src/**/*.{js,vue}"// 别名：lint，对应命令：代码检查}}

2. 执行方式

在项目根目录的终端中执行：

# 执行 serve 脚本npmrun serve# 执行 build 脚本npmrun build# 执行 lint 脚本npmrun lint

3. 进阶用法（实用场景）

（1）命令拼接（串行/并行）

• 串行执行（用&&，前一个命令成功才执行后一个）：

  "scripts":{"build:test":"npm run lint && vue-cli-service build --mode test"}

  执行npm run build:test时，会先做代码检查，检查通过后再打包测试环境代码。

• 并行执行（用&，多命令同时执行，适合启动多个服务）：

  "scripts":{"start:all":"npm run serve & npm run mock"}

（2）钩子命令（pre/post）

npm 会自动识别pre/post前缀的脚本，比如：

"scripts":{"prebuild":"echo '开始打包...'",// 执行 build 前自动执行"build":"vue-cli-service build","postbuild":"echo '打包完成！'"// 执行 build 后自动执行}

执行npm run build时，实际执行顺序：prebuild→build→postbuild。

（3）环境变量传递

结合cross-env（跨平台设置环境变量）：

"scripts":{"serve:prod":"cross-env NODE_ENV=production vue-cli-service serve"}

cross-env解决了 Windows 用SET、macOS/Linux 用export的环境变量设置差异。

三、为什么项目中一定要配scripts？

以你之前问的 Vue 项目为例，没有scripts的话：

• 启动开发服务器需要手动输入./node_modules/.bin/vue-cli-service serve --mode test（长且容易输错）；
• 团队成员可能用不同的命令启动项目（比如有人加参数，有人不加），导致环境不一致；
• 切换环境时需要手动改命令参数，效率低且易出错。

而配置scripts后：

• 只需npm run serve:test就能启动测试环境；
• 所有命令都集中在package.json里，便于维护和统一修改；
• 新人接手项目时，只需看scripts就能知道常用命令（比如npm run serve启动、npm run build打包）。

四、常见默认脚本（npm 内置）

有些脚本名是 npm 内置的，可省略run：

• npm start：等价于npm run start（启动项目）；
• npm test：等价于npm run test（执行测试）；
• npm stop：等价于npm run stop（停止服务）；
• npm restart：等价于npm run stop && npm run start（重启服务）。

示例：

"scripts":{"start":"vue-cli-service serve",// 可直接执行 npm start"test":"jest"// 可直接执行 npm test}

总结

1. scripts是package.json中管理自定义命令的字段，核心作用是简化复杂终端命令、统一团队操作规范；
2. 执行方式是npm run <脚本名>，npm 会自动处理路径和跨平台差异；
3. 项目中配置不同的脚本（如serve/serve:test），本质是为了快速切换不同环境/执行不同操作，提升开发效率。