Rollup+TS+Babel项目如何转译第三方依赖以兼容IE11环境？

报错原因说明 #

你直接把penpal加入Babel的include列表遇到的两类警告都不影响功能，只是配置不完善导致的提示：

• sourcemap相关警告是因为penpal发布的npm包内的JS文件携带了sourcemap引用，但你安装的依赖包没有包含对应源码，Babel转译时找不到对应原始文件就会抛出警告，不影响最终打包结果
• this被重写为undefined的警告是因为ES规范中ES模块顶层的this为undefined，penpal的源码在顶层错误使用了this，Rollup做合规性检查时抛出的提示，实际运行时只要把顶层this绑定到window就不会有问题

正确实现方案 #

方案1：仅转译指定第三方依赖（性能优先） #

适合只有少量第三方依赖需要转ES5的场景，修改你的rollup配置补充两个参数即可：

const rollupPlugins = [
  resolve({ extensions }),
  commonjs(),
  babel({
    babelHelpers: "bundled",
    include: ["src/**/*.ts", "node_modules/penpal/**/*.js"],
    extensions,
    sourceMaps: false, // 关闭转译阶段的sourcemap校验，消除对应警告
  }),
];

export default async () => {
  if (process.env.NODE_ENV == "serve") {
    rollupPlugins.push(serve("dist/bundles"));
  }

  return {
    input: "src/initializer/main.ts",
    context: 'window', // 将模块顶层this绑定为window，消除this undefined的警告
    output: [
      // 原有output配置保持不变
      {
        file: "dist/bundles/main.unminified.js",
        format: "iife",
        name: "cp",
        extend: true,
      },
      {
        file: "dist/bundles/main.js",
        format: "iife",
        name: "cp",
        plugins: browserPlugins,
        extend: true,
        sourcemap: true,
      },
    ],
    plugins: rollupPlugins,
  };
};

方案2：使用getBabelOutputPlugin统一转译打包产物（稳妥优先） #

你现在用的这个方案是官方支持的规范实现，完全可以用。适合有大量第三方依赖需要转译，或者不确定哪些依赖包含ES6+语法的场景，不需要逐个添加include规则，不会出现漏转的情况，配置示例如下：

import babel, { getBabelOutputPlugin } from "@rollup/plugin-babel";
// 其他import保持不变

const extensions = [".js", ".ts"];
const prod = process.env.NODE_ENV == "production";
const browserPlugins = [
  terser({
    output: {
      comments: false,
    },
  }),
];

// 原有src目录的Babel转译保持不变
const rollupPlugins = [
  resolve({ extensions }),
  commonjs(),
  babel({
    babelHelpers: "bundled",
    include: ["src/**/*.ts"],
    extensions,
  }),
];

export default async () => {
  if (process.env.NODE_ENV == "serve") {
    rollupPlugins.push(serve("dist/bundles"));
  }

  return {
    input: "src/initializer/main.ts",
    output: [
      {
        file: "dist/bundles/main.unminified.js",
        format: "iife",
        name: "cp",
        extend: true,
        // 对打包完成的产物统一做ES5转译
        plugins: [getBabelOutputPlugin({
          presets: [['@babel/preset-env', { targets: "ie 11" }]]
        })]
      },
      {
        file: "dist/bundles/main.js",
        format: "iife",
        name: "cp",
        extend: true,
        sourcemap: true,
        plugins: [
          getBabelOutputPlugin({
            presets: [['@babel/preset-env', { targets: "ie 11" }]]
          }),
          ...browserPlugins
        ],
      },
    ],
    plugins: rollupPlugins,
  };
};

方案选择建议 #

• 如果只有1-2个第三方依赖需要转译，优先选方案1，转译性能更高
• 如果依赖较多，或者后续会频繁新增依赖，选方案2更省心，维护成本更低，实现也符合规范

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