javascript - 如何从 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:了解有关导出的更多信息 here .

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