如何用Rollup打包JS外部依赖，兼容多浏览器并处理Polyfill？

问题1：为了最佳浏览器兼容性，是否必须生成System模块文件？ #

不是必须的，甚至不推荐用System模块作为单script标签分发的插件格式。

如果目标是兼容尽可能多的浏览器（包括IE11这类无ES模块支持的旧浏览器），更合适的输出格式是iife（立即执行函数表达式）：

• IIFE会直接将代码包裹在全局执行的函数中，不需要依赖任何模块加载器（包括SystemJS），加载后直接生效
• 相比System模块，IIFE的兼容性更广，不需要额外加载SystemJS，也能避免模块加载器带来的体积和运行时问题

你可以修改Rollup的output配置：

output: [
  {
    dir: "build",
    format: "iife",
    name: "YourPluginGlobalName", // 全局暴露的插件名称，方便用户调用
  }
],

如果确实有模块拆分或按需加载的需求，才需要考虑System模块，但这会增加额外的依赖和复杂度，不符合单script标签分发的需求。

问题2：如果坚持使用System模块，如何解决SystemJS未定义及Polyfill顺序问题？ #

如果一定要用System模块，核心问题是SystemJS必须在你的插件bundle之前加载，因为你的bundle是System格式，依赖全局的System对象。直接在代码里import SystemJS无法正确挂载全局变量，导致运行时报错。

方案1：按顺序打包所有依赖（会增加bundle体积） #

如果接受bundle体积增大，可以用Rollup的多入口功能，按指定顺序打包Polyfill、SystemJS和你的插件代码：

1. 创建一个入口文件src/entry.js，按顺序导入所有依赖：

// 先导入custom elements适配器
import '@webcomponents/webcomponentsjs/src/entrypoints/custom-elements-es5-adapter.js';
// 再导入webcomponents loader
import '@webcomponents/webcomponentsjs/src/entrypoints/webcomponents-loader.js';
// 导入全局暴露版本的SystemJS
import 'systemjs/dist/system.js';
// 最后导入你的插件代码
import './plugin/index.ts';

2. 修改Rollup配置的input为这个新入口：

input: "./src/entry.js",
output: [
  {
    dir: "build",
    format: "iife", // 打包成IIFE，确保全局执行顺序正确
  }
],

这样Rollup会按导入顺序把所有代码打包成一个文件，确保依赖的执行顺序符合要求。

方案2：动态加载依赖（推荐，控制bundle体积） #

如果不想增大bundle体积，可以在插件代码中动态加载所需的Polyfill和SystemJS，加载完成后再初始化插件：

// src/plugin/index.ts
function loadScript(src: string): Promise<void> {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve();
    script.onerror = () => reject(new Error(`Failed to load ${src}`));
    document.head.appendChild(script);
  });
}

// 按顺序加载依赖
async function initPlugin() {
  // 加载custom elements适配器
  await loadScript('https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.8.0/src/entrypoints/custom-elements-es5-adapter.js');
  // 加载webcomponents loader
  await loadScript('https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.8.0/src/entrypoints/webcomponents-loader.js');
  // 加载SystemJS
  await loadScript('https://cdn.jsdelivr.net/npm/systemjs@6.14.0/dist/system.js');
  
  // 初始化你的插件逻辑
  System.import('./your-plugin-module.js'); // 或直接执行你的核心代码
}

// 启动初始化
initPlugin().catch(err => console.error('Plugin initialization failed:', err));

这种方式可以让核心插件bundle保持小巧，依赖从CDN加载，同时严格保证加载顺序。

关键注意事项 #

• custom-elements-es5-adapter.js必须在webcomponents-loader.js之前加载，否则ES5环境下自定义元素会无法正常工作
• SystemJS必须在你的System格式插件代码执行前加载，否则会出现System is not defined错误

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