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

Question

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

toProps.js：

var myProp = "test";

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

入口.js：

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

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

如何访问myProp变量？

Answer 1

内部toProps.js：

var myProp = "test";
export default myProp;

内部entry.js：

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 的答案。完全忘记了你可以这样做。