Vite生产包在浏览器报Unexpected token 'export'错误求助

问题根源 #

你之前只构建了ES和CJS格式的产物：ES模块里的export语法在普通浏览器脚本（非type="module"）里会被当成语法错误，而你又想同时支持直接全局调用和模块引入，所以得加个IIFE格式的构建产物——这是专门给浏览器传统脚本用的自执行函数，会把代码挂载到window全局变量上。

具体修改步骤 #

1. 修改vite.config.js #

在lib配置里新增iife格式，同时指定全局变量名（对应你要在浏览器里用的main）：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
    build: {
        target: 'es2015',
        manifest: true,
        minify: true,
        reportCompressedSize: true,
        lib: {
            entry: path.resolve(__dirname, "main.js"),
            fileName: "main",
            formats: ["es", "cjs", "iife"], // 新增iife格式
            name: 'main' // 浏览器中挂载到window.main
        },
        rollupOptions: {
            external: [],
            output: {
                dir: 'dist'
            }
        },
    },
})

2. 调整代码导出结构 #

要实现main.isPrime()的调用形式，需要把函数打包成对象导出：

修改functions.js为具名导出

export const isPrime = (n) => {
    for (let i = 2; i < n; i++) {
        if (n % i === 0) {
            return false;
        }
    }
    return n > 1; // 修复边界值bug：n=1时应返回false
}

修改main.js导出整个函数对象

import * as functions from './functions'

export default functions

3. 构建后的使用方式 #

执行npm run build后，dist目录会生成三个适配不同场景的文件：

• main.es.js：ES模块格式，用于import引入
• main.cjs.js：CommonJS格式，用于Node.js环境require
• main.iife.js：自执行函数格式，用于浏览器直接引入

浏览器全局调用

直接在HTML中引入iife文件：

<script src="./dist/main.iife.js"></script>
<script>
    console.log(main.isPrime(50)); // 输出false
</script>

ES模块引入

import main from './dist/main.es.js';
console.log(main.isPrime(50)); // 输出false

这样两种使用方式就都能正常工作了，不需要手动修改window挂载——Vite会自动处理不同格式的导出逻辑。

内容的提问来源于stack exchange，提问作者fernando cuadros f