Vite | package.json之script配置多模式

package.json 是一个常用的配置文件，用于描述你的 JavaScript 项目。其中，scripts 字段可以用来定义一组命令，用于开发、构建、测试和部署你的应用程序。下面是一些常用的命令和配置方式：

开发

• dev：用于启动本地开发服务器。例如：

  "scripts": {
    "dev": "vite"
  }
  

  在上述配置中，dev 命令使用 Vite 来启动本地开发服务器。

构建

• build：用于构建生产环境代码。例如：

  "scripts": {
    "build": "vite build"
  }
  

  在上述配置中，build 命令使用 Vite 来构建生产环境代码。

测试

• test：用于运行测试。例如：

  "scripts": {
    "test": "jest"
  }
  

  在上述配置中，test 命令使用 Jest 来运行测试用例。

部署

• deploy：用于将应用程序部署到生产环境。例如：

  "scripts": {
    "deploy": "npm run build && now --prod"
  }
  

  在上述配置中，deploy 命令首先运行 npm run build 命令来构建生产环境代码，然后使用 Now 将应用程序部署到生产环境。

另外，你还可以将多个命令组合在一个脚本中。例如：

"scripts": {
  "build-and-deploy": "npm run build && npm run deploy"
}

在上述配置中，build-and-deploy 命令会先运行 npm run build 命令来构建生产环境代码，然后再运行 npm run deploy 命令将应用程序部署到生产环境。

需要注意的是，当你在执行这些命令时，你可以在命令行中传入参数和选项，例如：

npm run build -- --mode production

这样可以将 --mode production 选项传递给构建命令。

如果 package.json 中的 "build": "vite build" 没有指定 --mode 参数，则 Vite 会默认使用 production 模式进行构建。

在 production 模式下，Vite 会进行一系列的优化，例如支持 tree-shaking、将 CSS 提取到单独的文件中、压缩代码和图片等，并且启用了 Safari 和 Firefox 的 Source Map。

也可以通过在 vite.config.js 中使用 define: { 'process.env.NODE_ENV': 'production' } 来强制将 process.env.NODE_ENV 设置为 'production'，以便在代码中运行时检测到当前环境是生产模式。

export default {
  define: {
    'process.env.NODE_ENV': 'production'
  }
}

这样可以在构建时将 process.env.NODE_ENV 内嵌到代码中，加快执行速度并减少代码量。

示例：定义多个不同的生产模式，并在构建命令中通过 --mode 选项来指定要使用的模式。

在 package.json 的构建命令中指定要使用的模式：

{
  "scripts": {
    "dev-prod": "vite --mode development",
    "dev-aliyun": "vite --mode aliyun",
    "build-prod": "vite build --mode production",
    "preview": "vite preview"
  }
}

执行npm run dev-aliyun

在上述代码中，你可以使用 npm run build-prod 来构建生产模式的代码，使用 npm run build-aliyun 来构建阿里云的代码。

需要注意的是，不同的生产模式可以定义不同的选项，你可以根据需要来定义不同的模式。同时，你还需要为每个模式指定一个唯一的名称。