Javascript 如何从webpack中的另一个JS文件访问变量

我试图在一个项目中实现webpack，但在他们的文档中似乎找不到这个问题的明确答案。我需要能够从JS文件全局访问某个变量，例如：

toProps.js：

var myProp = "test";

在我的入口点，我执行以下操作：

entry.js：

require('./toProps.js');
console.log(myProp);

但是变量

myProp

未定义。这是一个极其简化的示例，不是我的实际用例，但重点是我正在使用一个现有的代码库，其中到处都是这些类型的全局引用，但我想用webpack实现一些模块和延迟加载

---

如何访问

myProp

变量？

内部

toProps.js

：

var myProp = "test";
export default myProp;

import myProp from './toProps.js';

内部

entry.js

：

var myProp = "test";
export default myProp;

import myProp from './toProps.js';

据我所见，您还没有导出变量。因此，它不能是

entry.js

中的“导入”

编辑1：了解有关导出的详细信息

编辑2：

好的，为了使它成为一个全局变量，我做了如下工作：

将

props.js

移动到

/dist

中，并在

index.html

中、在

bundle.js

之前或任何您命名的输出文件中链接它

现在它是一个全局变量，所以实际上不需要在任何地方导出或导入它

为了测试这一点，我制作了一个名为

test.js

的文件，将其导入

entry.js

。内部

test.js

是：

const logTest = () => {
  console.log(myProp)
}
export default logTest;

现在在

entry.js

中，我调用了函数。它按预期工作，“测试”显示在控制台中

正如你提到的，你的例子被简化了，所以这对你来说可能不可行。也许，您可以将所有全局变量移动到对象内部

/dist

中的一个文件中，因为最好不要污染全局对象

---

编辑3：按照Jonas W的答案去做。完全忘了你可以这么做。

如果你真的需要一个全局变量（不，你不需要！），使用

窗口：

  window.myProp = "test";

否则，只需将其从文件中导出，并在需要的任何地方导入即可。这可能会给代码增加一些开销，但实际上您总是知道值的来源，这使得调试非常简单。
如果要导入的源文件属于maintainer，最好先导出后导入。就像“易卜拉欣”的回答一样

我还遇到了导入第三方源文件而不使用导出语法的情况。因此，我认为下面是使用网页时的一个解决方案

首先，为您的项目安装导出加载程序

npm install exports-loader --save-dev

然后，在JS源文件中，按如下方式导入和使用：

const WEBGL = require("exports-loader?WEBGL!three/examples/js/WebGL.js");
WEBGL.isWebGL2Available()

在我的例子中，WEBGL是我希望导入的内部变量，three/examples/js/WEBGL.js是第三方源文件

希望这是有用的。
使用webpack 4
要为任何能够阅读本文的人更新本文，实际上您可以使用webpack.config.js中的插件解析其他.js文件中使用的名称

请看以下示例：


用法：jQuery
要自动加载jquery，我们只需将它公开的两个变量指向相应的节点模块：

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
});

然后在我们的任何源代码中：

// in a module
$('#item'); // <= just works
jQuery('#item'); // <= just works
// $ is automatically set to the exports of module "jquery"

//在模块中
$（“#项”）；//我明白了，但这实际上不是一个全局变量，对吗？我必须将
myProp
导入到我想要使用它的每个文件中？我希望我不需要全局变量-但是它是一个巨大的遗留代码库，带有全局声明。为什么这篇文章被否决了？这个问题需要更新答案！