Question

我使用的是webpack，我使用require来提取一些软件包。我有两个包：package1.js和package2.js。 package1.js只是创建一个带有一些名为pkg1的属性的对象。 package2是一个javascript文件，包含一个扩展package1的自执行函数。 E.g。

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带来的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复制到某个目录中，然后{ {1}}他们来自那个位置。不幸的是，除非我将这些模块中的.js直接复制到我正在编写的任何脚本中，否则这似乎不起作用。这就是我要避免的。

E.g。

require

结果：

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

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')

希望它可以帮到你！

Webpack中的同步需求

1 个答案: