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

Answer 2

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

  window.myProp = "test";

否则，只需从您的文件中导出它并在您需要的任何地方导入它。 这可能会给您的代码增加一些开销，但实际上您总是知道值的来源，这使得调试变得非常简单。

Answer 3

使用 webpack 4

要为任何可以阅读它的人更新这篇文章，实际上您可以使用webpack.config.js 中的插件来解析在另一个 .js 文件中使用的名称。

看看https://webpack.js.org/plugins/provide-plugin/示例：

---

用法：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"

---

Answer 4

如果要导入的源文件属于维护者，最好先导出后导入。 就像@Ibrahim 的回答一样。

我也遇到过不使用导出语法导入第三方源文件的情况。 所以我认为下面是使用webpack 时的解决方案。

首先，为您的项目安装exports-loader 。

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是第三方源文件。

希望这是有用的。