javascript - Webpack 中的同步需求

Question

我正在使用 webpack，我正在使用 require 来引入一些包。我有两个包:package1.js 和 package2.js。 package1.js 只是简单地创建一个具有一些属性的对象，称为 pkg1。 package2 是一个 javascript 文件，其中包含一个扩展 package1 的自执行函数。例如

package2.js:

!function () {
    pkg1.prototype.newFunction = function {return "foo"};
}()

我正在尝试以下列方式将这两者都要求到一个新脚本中:

require('package1')
require('package2')

当我这样做时，出现错误:

Uncaught TypeError: pkg1.newFunction is not a function

我认为这是因为 Javascripts 异步加载:require(package2) 在 require('package1') 之前执行。我的证据是，当我执行以下操作时，我不会收到错误消息:

require('package1')
!function () {
    pkg1.prototype.newFunction = function {return "foo"};
}()

不过这样很乱，我想用require。我将如何着手完成这项工作？

编辑:具体示例

leaflet-d3 plugin开始于:

(function() {
    L.HexbinLayer = L.Class.extend({
    ...
 })()

因此，至少根据我的理解，放入 require(leaflet-d3-plugin) 应该会导致此脚本执行并扩展 L，它由要求('传单')

同样，d3-hexbin-v0开始于:

!function(){d3.hexbin=function(){
    ...
}}()

同样，我读到这个的方式是这个脚本简单地添加一个 .hexbin 方法到 d3。

现在如果我只是写 html，我会把这些不同的东西放在不同的脚本标签中，这样就可以了:

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.hexbin.v0.min.js"></script>

或

<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="static/leaflet-d3.min.js" charset="utf-8"></script>

但是因为我使用的是 webpack，所以我应该能够在使用 npm 安装这些库之后需要和/或导入这些库，或者如果我只是将这些脚本中的 .js 复制到某个目录然后 从那个位置要求他们。不幸的是，这似乎不起作用，除非我将这些模块中的 .js 直接复制到我正在编写的任何脚本中。这是我要避免的。

例如

import * as d3 from 'd3'; \\I'm using d3 v4 here.
require('/resources/d3-hexbin.min.js')

结果:

Uncaught TypeError: d3.hexbin is not a function

Answer 1

Webpack 同步加载它，但每个文件都有自己的范围。

这就是为什么在你的声明中

import * as d3 from 'd3'; \\I'm using d3 v4 here.
require('/resources/d3-hexbin.min.js')

你的第二个没有找到 d3 变量。

可以使用ProvidePlugin来解决:

webpack.config.js

plugins: [
  new webpack.ProvidePlugin({
    d3: 'd3'
  }),
  ... //other plugins

这样 d3 将在整个应用程序中可用。

实现它的替代方法是使用以下方法:

import * as d3 from 'd3';
window.d3 = d3;
require('./d3.hexbin.v0.min.js')

希望对你有帮助!