我正在尝试在项目中实现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;

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的答案一起去。完全忘记了您可以做到。

如果您确实需要一个全局变量(不！(，请使用window：

  window.myProp = "test";

否则，只需将其从文件中导出，然后将其导入到任何地方。这也许在您的代码中增加了一些开销，但实际上您总是知道该值的来源，这使调试超级简单。

使用WebPack 4

要为任何可以读取它的人更新此帖子，您可以在 webpack.config.js 中使用插件来解析另一个.js文件中使用的名称。

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

要自动加载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"

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

我还遇到了导入第三方源文件的情况，只是不使用导出语法。因此，我认为下面是一种解决方案，当使用 webpack 。

首先，安装 forcorts-loader 用于您的项目。

npm install exports-loader --save-dev

然后，在您的JS源文件中，导入和使用如下：

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

就我而言， webgl 是我希望导入的内部变量，示例/js/webgl.js 是第三方源文件。

希望这很有用。

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