Vite+React TS项目Systemjs打包后导出函数缺失问题求助

问题根源 #

Rollup（Vite底层打包工具）默认的Tree Shaking机制会移除未被内部代码引用的入口导出，你定义的unmount函数仅作为导出存在、未在项目内部被调用，因此被Rollup判定为“无用代码”剔除，导致SystemJS bundle中缺少exports('unmount', unmount)语句。

解决方案 #

修改Vite配置，在Rollup的输出选项中添加preserveEntrySignatures配置，强制保留入口文件的导出签名：

export default defineConfig({
  plugins: [react()],
  server: {
    port: 8001,
  },
  build: {
    rollupOptions: {
      input: "src/main.tsx",
      output: {
        entryFileNames: `[name]-chat-fe.js`,
        chunkFileNames: `[name]-chat-fe.js`,
        assetFileNames: `[name]-chat-fe.[ext]`,
        format: "system",
        // 强制保留入口导出，适配SystemJS需求
        preserveEntrySignatures: 'allow-extension'
      },
      external: ["@mui/material", "react", "react-dom"],
    },
  },
});

配置说明 #

• preserveEntrySignatures: 'allow-extension'：明确告诉Rollup，即使入口的导出未被内部引用，也要保留这些导出并输出到bundle中，完全匹配SystemJS的导出逻辑。
• 若需要更严格的保留规则，也可设置为'strict'，但'allow-extension'已能覆盖绝大多数场景。

验证结果 #

修改配置后重新执行vite build，生成的SystemJS bundle会包含预期的导出语句：

System.register([], function (exports, module) {
  "use strict";
  return {
    execute: function () {
      function unmount(containerId) {
        // Your code...
      }
      exports('unmount', unmount); // 现在会出现这行
    }
  };
});

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