在转译后的JavaScript中保留原始全局命名空间

DevOps 小满

2026-4-14

我太懂你的烦恼了！之前维护老项目适配IE11的时候，也碰到过一模一样的问题——就想原封不动保留原来的代码结构，不想手动给每个变量加export或者挂到window上，还要让Webpack和Babel转译后的代码能像直接在HTML里引入普通JS那样，让所有顶层符号都能全局访问。

给你几个亲测有效的方案，完全不用改原有代码：

核心配置：Webpack的output.library
这是最关键的一步，直接在Webpack配置文件里给output加个library配置，让Webpack自动把模块里的顶层符号挂载到全局window对象上。配置示例：
```
module.exports = {
  // 其他基础配置（entry、mode这些）...
  output: {
    filename: '[name].bundle.js',
    // 让打包后的内容自动挂载到window全局
    library: {
      type: 'window'
    }
  }
};
```
如果你用的是Webpack 4及更早版本，写法是libraryTarget: 'window'，效果是一样的。这个配置会让Webpack把你代码里所有顶层的变量、函数，自动挂载到window上，就像你没打包时的效果一样。
配合Babel的无模块模式
确保Babel不会把你的代码转成CommonJS模块，让Webpack能正确识别顶层作用域。在Babel的配置（.babelrc或者Webpack里的babel-loader选项）里，把presets的modules设为false：
```
// 比如在babel-loader里的配置
use: {
  loader: 'babel-loader',
  options: {
    presets: [
      ['@babel/preset-env', {
        modules: false, // 保留原始的模块/脚本结构，不转成CommonJS
        targets: {
          ie: '11'
        }
      }]
    ]
  }
}
```
这个设置能避免Babel把你的顶层变量包裹到模块作用域里，让Webpack的library配置能正确捕获到所有需要暴露的符号。
极端情况：把代码当纯脚本打包
如果你的代码完全没有用任何ES模块语法（就是纯旧版脚本），还可以让Webpack完全把它当成普通脚本处理，不用模块打包逻辑。在Webpack的module.rules里加一条规则：
```
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: 'babel-loader',
      type: 'javascript/auto' // 告诉Webpack别把文件当成ES模块，保留顶层作用域
    }
  ]
}
```
配合前面的output.library配置，就能100%还原原来的全局变量可见性，连IIFE里的顶层变量都能正确暴露。

我当时就是用第一个方案配合Babel的modules: false配置，零代码改动就搞定了IE11的适配，原来的全局函数、变量都能直接在<script>标签里调用，和没打包时一模一样。

备注：内容来源于stack exchange，提问作者Giuseppe Guerrini