如何阻止Babel将global变量重命名为global$1？（Rollup+Babel场景）

我之前也碰到过类似的变量重命名冲突，结合你的配置来看，核心原因是Babel的辅助函数生成机制和你注入的global变量产生了命名冲突——当启用transform-object-assign、external-helpers这类插件时，Babel会内联辅助代码，为了避免变量名重复，它会把你的自定义global重命名为global$1。

下面是几个经过验证的解决方案，按推荐优先级排序：

方案一：用transform-runtime替代external-helpers（最推荐） #

external-helpers会把Babel的辅助函数直接内联到代码中，很容易和自定义变量撞名；而transform-runtime会将这些辅助函数从单独的包中导入，从根源上避免内联带来的命名冲突。

针对Babel 6的配置修改 #

1. 安装依赖：

npm install --save-dev babel-plugin-transform-runtime babel-runtime

2. 更新.babelrc：

{
  "presets": [
    ["env", { "modules": false }]
  ],
  "plugins": [
    "transform-runtime",
    "transform-object-rest-spread",
    "transform-object-assign"
  ]
}

针对Babel 7的配置修改 #

1. 安装依赖：

npm install --save-dev @babel/plugin-transform-runtime @babel/runtime

2. 更新.babelrc：

{
  "presets": [
    ["@babel/env", { "modules": false }]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-object-assign"
  ]
}

方案二：将global标记为Rollup外部全局变量 #

如果你不想更换Babel插件，可以直接告诉Rollupglobal是一个外部全局变量，不需要打包进去，这样Babel就不会对它进行重命名处理。

修改rollup.config.js：

{
  // 标记global为外部依赖
  external: ['global'],
  output: {
    // 指定在浏览器环境中对应的全局变量名
    globals: { global: 'global' }
  },
  plugins: [
    paths,
    resolve({ jsnext: true, main: true }),
    commonjs({ include: 'node_modules/**' }),
    babel({ exclude: 'node_modules/**' })
    // 移除原来的inject插件，改用external+globals配置
  ]
}

之后你在代码中正常导入global即可，Rollup会保留它作为全局变量的引用，不会被Babel修改。

方案三：临时规避——修改自定义全局变量的名称（最简单但不优雅） #

如果只是临时解决问题，可以直接修改global.js中的变量名，避免和Babel的辅助函数撞名：

// global.js
var appGlobal = this;
export default appGlobal;

然后在你的业务代码中导入appGlobal替代原来的global，这样Babel就不会对这个自定义变量进行重命名了。

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