详细分析 npm run build 基本知识 | 不同环境不同命令

前言

关于部署服务器的知识推荐阅读：npm run build部署到云服务器中的Nginx（图文配置）

1. 基本知识

npm run 是 npm 的一个命令，用于运行 package.json 中定义的脚本，可以通过 “scripts” 字段为项目定义各种任务

"scripts": {
  "build:dev": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode local-dev",
  "build:prod": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode prod"
}

当执行 npm run build:dev，npm 会找到 build:dev并执行定义的命令

各 build:xxx 脚本通过 --mode 参数指定不同的环境模式，如 local-dev、prod 等

结合 Vite 的 .env 文件机制，不同模式下可以加载不同的环境配置：

• .env：默认通用配置
• .env.dev：开发环境
• .env.prod：生产环境

截图如下：

以及上述参数中 --max_old_space_size=8192 用于设置 Node.js 的最大内存分配（单位：MB），解决构建大型项目时可能出现的内存不足问题

基本的配置如下：

对于其更详细的配置文件可看：深入理解 package.json的配置文件

补充一个vite的基本知识：

• 快速构建：基于 Rollup 打包
• 支持 Tree Shaking 和代码分割，优化资源体积
• 支持现代浏览器的原生 ES 模块

使用 pnpm 安装依赖
“i”: “pnpm install”：比传统 npm install 快速且节省磁盘空间

2. 构建逻辑

具体构建资源路径在 vite.config.js 中，base 配置用于控制资源路径

import { resolve } from 'path'
import { loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import { createVitePlugins } from './build/vite'
import { include, exclude } from "./build/vite/optimize"
// 当前执行node命令时文件夹的地址(工作目录)
const root = process.cwd()

// 路径查找函数，用于解析项目的根目录路径
function pathResolve(dir: string) {
  return resolve(root, '.', dir)
}

// 导出 Vite 配置
// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfig => {
  let env = {} as any // 存储环境变量
  const isBuild = command === 'build' // 判断当前是否是构建模式

  // 根据开发环境或构建模式加载不同的环境变量
  if (!isBuild) {
    // 开发模式下加载环境变量
    env = loadEnv(
      process.argv[3] === '--mode' ? process.argv[4] : process.argv[3],
      root
    )
  } else {
    // 构建模式下加载环境变量
    env = loadEnv(mode, root)
  }

  return {
    // 配置基础路径，用于静态资源的路径解析
    base: env.VITE_BASE_PATH, // 环境变量 `VITE_BASE_PATH` 决定基础路径
    root: root, // 项目根目录

    // 本地开发服务器的配置
    server: {
      port: env.VITE_PORT, // 开发服务器端口
      host: '0.0.0.0', // 监听所有 IP
      open: env.VITE_OPEN === 'true', // 是否自动打开浏览器
    },

    // 插件配置（提取到独立文件中管理）
    plugins: createVitePlugins(),

    // CSS 预处理器配置
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "./src/styles/variables.scss";', // 引入全局样式变量
          javascriptEnabled: true, // 启用 JavaScript 支持
        },
      },
    },

    // 路径解析设置
    resolve: {
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss', '.css'], // 允许的扩展名
      alias: [
        {
          find: 'vue-i18n', // 使用别名替换 i18n 包路径
          replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
        },
        {
          find: /\@\//, // 将 `@` 解析为 src 目录
          replacement: `${pathResolve('src')}/`,
        },
      ],
    },

    // 构建配置
    build: {
      minify: 'terser', // 使用 terser 压缩代码
      outDir: env.VITE_OUT_DIR || 'dist', // 输出目录，默认为 `dist`
      sourcemap: env.VITE_SOURCEMAP === 'true' ? 'inline' : false, // 是否生成 SourceMap
      terserOptions: {
        compress: {
          drop_debugger: env.VITE_DROP_DEBUGGER === 'true', // 是否移除调试器
          drop_console: env.VITE_DROP_CONSOLE === 'true', // 是否移除 console.log
        },
      },
    },
    // 依赖优化配置
    optimizeDeps: { include, exclude },
  }
}