如何配置Webpack/Rollup将ES6模块转译为ES5.1并最小化全局作用域污染

看起来你已经踩了不少坑了——既要用ES6语法爽开发，又要兼容老的ES5.1环境，还要避免全局污染，同时支持Jest测试。我刚好有过类似的需求，用Rollup配合Babel就能完美解决，不用写自定义插件，完全用现成配置搞定。

核心思路 #

我们要把所有内部代码（包括辅助函数、polyfill）塞进一个IIFE里隔离起来，只把需要的foo和bar暴露到全局作用域；同时保留CommonJS导出逻辑，让Jest能正常导入测试。Rollup负责模块打包和输出结构，Babel负责把ES6语法转成ES5.1兼容代码。

步骤1：整理源码结构 #

先把你的ES6模块统一入口，新建一个src/index.js作为打包入口：

// src/index.js
export { foo } from './foo';
export { bar } from './bar';

原来的foo.js、bar.js、fooHelper.js、barHelper.js保持ES6模块写法不变就行。

步骤2：安装依赖 #

需要Rollup做打包，Babel做语法转译，还有相关插件：

npm install --save-dev rollup @rollup/plugin-babel @rollup/plugin-node-resolve @babel/core @babel/preset-env core-js@3

步骤3：配置Babel（.babelrc） #

让Babel把ES6转成ES5.1，同时自动按需添加polyfill，保留JSDoc注释：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["IE 11", "Chrome 49"], // 覆盖ES5.1环境
          "esmodules": false
        },
        "useBuiltIns": "usage", // 自动按需添加polyfill
        "corejs": 3, // 指定core-js版本
        "modules": false // 让Rollup处理模块，Babel只转语法
      }
    ]
  ],
  "comments": true // 保留JSDoc注释
}

步骤4：配置Rollup（rollup.config.js） #

这是关键配置，实现IIFE隔离、全局暴露和CommonJS导出：

import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js', // 入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件
    format: 'iife', // 用IIFE打包模块
    name: '_internalModule', // 临时内部变量名，不会暴露到全局
    banner: '(function(window) {', // 包裹代码的IIFE开头
    footer: `
      // 把需要的函数暴露到全局
      window.foo = _internalModule.foo;
      window.bar = _internalModule.bar;

      // CommonJS导出逻辑，供Jest测试用
      if (typeof module !== 'undefined' && module.exports) {
        module.exports = {
          foo: _internalModule.foo,
          bar: _internalModule.bar
        };
      }
    })(window);`, // 包裹代码的IIFE结尾
    compact: false, // 不压缩，保持代码可读
    generatedCode: {
      constBindings: false, // 把const/let转成var，兼容ES5.1
      reservedNamesAsProps: false
    },
    sourcemap: false // 不需要sourcemap可以关掉
  },
  plugins: [
    resolve(), // 解析ES模块导入
    babel({
      babelHelpers: 'bundled', // 把babel辅助函数打包到输出里
      exclude: 'node_modules/**', // 忽略node_modules
      extensions: ['.js']
    })
  ]
};

步骤5：打包运行 #

在package.json里加个打包脚本：

{
  "scripts": {
    "build": "rollup -c rollup.config.js"
  }
}

然后运行npm run build，就能在dist/bundle.js得到符合要求的代码了。

最终输出效果 #

打包后的代码大概长这样（简化版）：

(function(window) {
  var _internalModule = (function () {
    'use strict';

    // fooHelper的实现（被隔离在IIFE内部，不会污染全局）
    function fooHelper() {
      // ... 你的逻辑
    }

    function foo() {
      fooHelper();
      // ... 你的逻辑
    }

    // barHelper的实现
    function barHelper() {
      // ... 你的逻辑
    }

    function bar() {
      barHelper();
      // ... 你的逻辑
    }

    return { foo: foo, bar: bar };
  })();

  // 暴露到全局
  window.foo = _internalModule.foo;
  window.bar = _internalModule.bar;

  // CommonJS导出
  if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
      foo: _internalModule.foo,
      bar: _internalModule.bar
    };
  }
})(window);

为什么这个方案符合你的需求？ #

1. ES6语法支持：可以放心用箭头函数、扩展运算符，Babel会转成ES5.1兼容代码
2. 全局污染避免：所有内部辅助函数、polyfill都在IIFE内部，只有foo和bar暴露到全局
3. CommonJS兼容：Jest环境里可以直接require('./dist/bundle.js')拿到foo和bar
4. 注释保留：Babel和Rollup都配置了保留注释，你的JSDoc会完整保留
5. 无需自定义插件：所有配置都是用官方现成插件实现的，不用自己写复杂逻辑

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