使用webpack 4

Question

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

toProps.js：

var myProp = "test";

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

entry.js：

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

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

如何访问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.的回答。完全忘了你能做到的。

Answer 2

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

  window.myProp = "test";

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

Answer 3

如果要导入的源文件属于维护者，则最好先导出然后再导入。就像@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 是第三方源文件。

希望这很有用。

Answer 4

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

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