Можно ли импортировать пакетный веб-пакет и библиотеку отдельно с помощью веб-пакета?

Question

Я пытаюсь построить модуль, который использует d3, но я не хочу связывать d3 с этим модулем, и, что самое важное, я не хочу привязывать d3 к окну. Модуль должен быть установлен в другом проекте с npm в качестве git-зависимости. На модуле у меня есть что-то вроде этого:

output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].min.js',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  externals: [
    {
      "d3": {
        root: "d3"
      }
    }
  ]

и в проекте он установлен, я хочу что-то вроде этого:

import d3 from 'd3'
import example from 'example'

Однако, это работает, только если я тоже так делаю:

import d3 from 'd3'
window.d3=d3
import example from 'example'

Можно ли использовать оба модуля, не затрагивая глобальную область?

Answer 1

Поскольку два модуля существуют отдельно, каждый из них имеет свое собственное замыкание. Единственное место для разделения 3-й зависимости - это область, внешняя по отношению к обеим, традиционно глобальная область. Вы можете практиковать внедрение зависимости.

Итак, вместо

module.exports = function do_a_thing() {
  // use d3 here
}

Вы делаете

module.exports = function do_a_thing_generator(d3) {
  return function do_a_thing() {
    // use d3 here
  }
}

Тогда, в конце концов,

import d3 from 'd3'
import exampleInit from 'example'

const example = exampleInit(d3)

Answer 2

попробуйте изменить

  externals: [
    {
      "d3": {
        root: "d3"
      }
    }
  ]

до

  externals: [
    {
      "d3": {
        commonjs: "d3"
      }
    }
  ]

Описано в документе . установив root, библиотека должна быть доступна как глобальная переменная