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.我该怎么做才能做到这一点？

编辑:具体示例

该单张-D3插件开始:

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

因此,至少根据我的理解,放入一个require(leaflet-d3-plugin)应该导致这个脚本执行和扩展的L内容require('leaflet')

同样,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复制到某个目录中,然后require从那个位置复制它们.不幸的是,除非我将这些模块中的.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')

希望对您有帮助！