如何在Webpack项目中跨JS文件访问全局变量？

嘿，这个问题我之前也碰到过！核心原因是Webpack默认会将每个模块包裹在独立的函数作用域中，所以你在toProps.js里定义的var myProp只是该模块内部的局部变量，并不会自动成为全局变量，这就是入口文件里访问myProp会返回undefined的原因。

根据你的场景（现有代码库，尽量少改代码），给你几个可行的解决方案：

方案1：手动将变量挂载到全局window对象 #

最简单的方式是修改toProps.js，把变量直接挂载到浏览器的全局window对象上：

// toProps.js
window.myProp = "test";

之后在入口文件entry.js里，只要require('./toProps.js')执行过，就可以直接通过window.myProp（或者在浏览器环境下直接myProp）访问这个变量了：

// entry.js
require('./toProps.js');
console.log(window.myProp); // 输出 "test"

方案2：使用Webpack的ProvidePlugin插件 #

如果不想手动修改toProps.js的代码，可以通过Webpack的内置插件ProvidePlugin，自动将模块导出的变量注册为全局变量。

首先修改toProps.js导出变量：

// toProps.js
module.exports = "test";

然后在webpack.config.js中配置插件：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.ProvidePlugin({
      myProp: './toProps.js' // 把该模块导出的内容注册为全局变量myProp
    })
  ]
};

之后在入口文件里就不需要手动require('./toProps.js')了，直接使用myProp即可：

// entry.js
console.log(myProp); // 输出 "test"

方案3：使用expose-loader #

这个loader专门用于将模块内部的变量暴露到全局环境，适合不想修改原有模块代码的场景。

首先安装loader：

npm install expose-loader --save-dev

方式A：直接在require时使用 #

在入口文件里修改require语句：

// entry.js
require('expose-loader?myProp!./toProps.js');
console.log(myProp); // 输出 "test"

方式B：在Webpack配置中全局配置 #

如果多个地方需要用到这个全局变量，可以在webpack.config.js中添加规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: require.resolve('./toProps.js'), // 匹配目标文件
        use: 'expose-loader?myProp' // 将文件中的myProp变量暴露到全局
      }
    ]
  }
};

之后在入口文件里正常require('./toProps.js')就可以访问全局的myProp了。

方案选择建议 #

• 如果你的现有代码大量依赖全局变量，不想改动原有模块代码，优先选方案1或方案3；
• 如果希望更符合模块化规范，推荐使用方案2，它能帮你自动管理模块依赖，同时实现全局访问。

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