package.json中`npm scripts`的生命周期

在前端这个大生态中，npm有着至关重要的作用。所有第三方包、插件都依赖于npm的package.json文件，其中npm scripts包含多种生命周期，可以组织整个前端工程的工具链。

以Vite构建工具，来讲解npm scripts的生命周期。

1、package.json

• 项目初始化的package.json

{
  "name": "vite-vue-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "vite": "^2.6.4"
  }
}

• 配置 scripts 脚本命令

{
  "scripts": {
    "dev": "vite",
    "prebuild": "npm run dev",
    "build": "vite build",
    "postbuild": "npm run serve",
    "serve": "vite preview"
  }
}

2、pre和post生命周期

当我们执行任意 npm run xxx 脚本时，将依次自动触发 pre 、 post 的生命周期。

当手动执行 npm run build 打包时：

1. 在此之前会自动执行 npm run prebuild，相当于执行了 npm run dev 命令来启动本地服务。
2. 在此之后会自动执行 npm run postbuild，相当于执行了 npm run serve 命令来启动dist静态文件的预览服务。

执行npm run build等价于依次执行了以下三个脚本命令：

// 自动执行
npm run dev

npm run build

// 自动执行
npm run serve

3、内置 scripts

除了可自定义 npm script 外，npm还附带许多内置 scripts：

npm install

npm test

npm publish

3-1、npm publish的生命周期

npm publish发包的生命周期比较复杂，当执行 npm publish 命令，将自动执行以下脚本：

• prepublishOnly: 最重要的一个生命周期。
• prepack
• prepare
• postpack
• publish
• postpublish

如果需要在使用npm publish发包之前自动做一些事情，如测试、构建等，一般在 prepulishOnly 命令中配置完成。

{
  "prepublishOnly": "npm run test && npm run build"
}

3-2、比较常用的生命周期：prepare

执行时机：

1. npm install 之后自动执行
2. npm publish 之前自动执行

欢迎访问：个人博客地址