Синхронное требование в Webpack

Я использую webpack, и я использую require, чтобы вытащить некоторые пакеты. У меня есть два пакета: пакет1.js и package2.js. пакет1.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. Как я смогу это сделать?

Edit: Конкретные Примеры

на листовка-Д3 плагин начинается с:

(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
6
javascript webpack

1 ответов

Webpack загружает его синхронно, но каждый файл имеет свою область применения.

вот почему в своем заявлении

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

ваш второй не найти d3 переменной.

вы можете решить с помощью ProvidePlugin:

webpack.конфиг.js

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

таким образом d3 будет доступна в приложении.

альтернативный способ достичь этого-использовать следующее:

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

надеюсь, что это помогает тебе!

4