vite打包

vite.config.ts 配置

import { ConfigEnv, loadEnv, PluginOption, UserConfigExport } from 'vite'

export default ({ command, mode }: ConfigEnv): UserConfigExport => {
  const resultConfig: UserConfigExport = {
    build: {
      // 是否生成sourcemap文件, 默认:false, 生产应该设置为false，当需要调试打包后的源代码时，要设置为true
      sourcemap: true,
      // 打包结果是否minify. 默认为true, 当像看看打包后的文件内容时，可以设置为false，生产应该设置为true
      minify: false,
      rollupOptions: {
        output: {
          manualChunks: (id: string) => {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString()
            }
          },
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容的hash值
          entryFileNames: 'js/[name].[hash].js',
          // 用于命名代码拆分时创建的共享块的输出命名
          chunkFileNames: 'js/[name].[hash].js',
          // 用于输出静态资源（如：css，图片等）的命名，[ext]表示文件扩展名
          assetFileNames: '[ext]/[name].[hash].[ext]',
          // 拆分js到模块文件夹
          /*
          chunkFileNames: chunkInfo => {
            const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : []
            const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]'
            return `js/${fileName}/[name].[hash].js`
          },
          */
        },
      },
    },
  }
  return resultConfig
}

umd.cjs 文件 process.env.NODE_ENV 报错

process not defined

打包之后的 umd.cjs 文件包含 process\.env\.NODE_ENV, 而浏览器环境是没有process对象的

解决方案

把 `process\.env\.NODE_ENV` 这个替换掉

shell

pnpm add rollup-plugin-replace -D

import replace from 'rollup-plugin-replace'

const env = process.env.NODE_ENV

plugins: [
  replace({
    'process.env.NODE_ENV': JSON.stringify(env),
  }),
]