如何修改Vite配置，消除构建后JS文件末尾的export default

我当前使用的vite.config.mjs配置如下：

import { defineConfig } from 'vite';
import { createStyleImportPlugin } from 'vite-plugin-style-import';
import path from 'path';
import { createHtmlPlugin } from 'vite-plugin-html';

export default defineConfig({
  base: '/',
  resolve: {
    alias: {
      '@demo': path.resolve(__dirname, './src'),
      react: path.resolve('./node_modules/react'),
      'react-final-form': path.resolve(__dirname, './node_modules/react-final-form'),
      'easy-email-localization': path.resolve('../packages/easy-email-localization'),
      'easy-email-core': path.resolve('../packages/easy-email-core'),
      'easy-email-editor': path.resolve('../packages/easy-email-editor'),
      'easy-email-extensions': path.resolve('../packages/easy-email-extensions'),
    },
  },
  optimizeDeps: {},
  define: {},
  build: {
    minify: true,
    manifest: false,
    sourcemap: false,
    target: 'es2015',
    chunkSizeWarningLimit: 12000,
    rollupOptions: {
      output: {
        entryFileNames: "easy-email.js",
        assetFileNames: 'easy-email.css',
        manualChunks(id) {
          return 'easy-email'
        },
        exports : "none",
      },
    },
  },
  css: {
    modules: {
      localsConvention: 'dashes',
    },
    preprocessorOptions: {
      scss: {},
      less: {
        javascriptEnabled: true,
      },
    },
  },
  plugins: [
    //react(),
    createStyleImportPlugin({
      libs: [
        // Dynamic import @arco-design styles
        {
          libraryName: '@arco-design/web-react',
          libraryNameChangeCase: 'pascalCase',
          esModule: true,
          resolveStyle: name => `@arco-design/web-react/es/${name}/style/index`,
        },
        {
          libraryName: '@arco-design/web-react/icon',
          libraryNameChangeCase: 'pascalCase',
          resolveStyle: name => `@arco-design/web-react/icon/react-icon/${name}`,
          //resolveComponent: name => `@arco-design/web-react/icon/react-icon/${name}`,
        },
      ],
    }),
    createHtmlPlugin({
      minify: false,
      inject: {
        data: {
          buildTime: `<meta name="updated-time" content="${new Date().toUTCString()}" />`,
        },
      }
    }),
  ].filter(Boolean),
});

修改方案 #

要移除构建后JS文件末尾的export default语句，只需调整Rollup的输出格式为IIFE（立即执行函数表达式），这种格式会将代码包裹在自执行函数中，不会生成模块导出语句。

具体修改build.rollupOptions.output配置，添加format: 'iife'：

build: {
  // 其他配置保持不变
  rollupOptions: {
    output: {
      entryFileNames: "easy-email.js",
      assetFileNames: 'easy-email.css',
      manualChunks(id) {
        return 'easy-email'
      },
      exports : "none",
      format: 'iife', // 新增：指定输出为IIFE格式
    },
  },
}

补充说明 #

• IIFE格式适合直接在浏览器环境中引入的单文件脚本，代码会自动执行，无需手动导入。
• 如果你的入口文件存在默认导出（比如export default initApp()），IIFE会将其包裹在函数中执行，不会暴露export default语句。
• 保留exports: "none"可以进一步确保Rollup不会生成任何导出相关的代码。

内容的提问来源于stack exchange，提问作者step