ES6 экспорт скрипта

Question

Я использую D3 v5 в React и имеет визуализацию, которая использует v3. Я использую модули npm для v5, но для v3 я пытаюсь импортировать D3 для использования в этой визуализации.

В моем компоненте у меня есть:

import * as d3 from './lib/d3/v3/d3';

и в папке d3 d3.js минимизированный сценарий v3 d3:

const d3 = !function(){function n(n){return n&&(n.ownerDocument||n....

export default d3;

но я получаю следующую ошибку:

Не удалось скомпилировать.

./src/components/d3/NetworkTopology/D3_NetworkTopology.js
Attempted import error: 'behavior' is not exported from './lib/d3/v3/d3' (imported as 'd3').

NetworkTopology.js:

  ...
  const zoom = d3.behavior
    .zoom()

"поведение" было удалено в v4, поэтому мне кажется, что это вытягивает версию D3 V5 вместо V3. Как я могу настроить это, чтобы использовать обе версии D3?

Я изменил импорт на:

import d3 from './lib/d3/v3/d3';

но получил эти ошибки компиляции: Не удалось скомпилировать.

. / SRC / компоненты / d3 / NetworkTopology / Библиотека / d3 / v3 / d3.js

  Line 1:   Expected an assignment or function call and instead saw an expression  no-unused-expressions

и я получаю ту же ошибку с исходным import * as d3 from './lib/d3/v3/d3'; в сочетании с удалением const и экспортом в d3.js (просто используйте оригинальный уменьшенный файл).

Answer 1

вы должны обновить

    import d3 from './lib/d3/v3/d3';

Answer 2

В то время как предыдущие ответы помогли мне обойти исходную ошибку в верхней части моего вопроса, используя:

импорт d3 из './lib/d3/v3/d3

, в итоге я получил ошибки ES-Lint, которые я получил, добавив

/ * eslint-disable * /

Как бы то ни было, я получил ошибку, вызванную тем, что Бабел вставил «минимизировать использование кода» в минимизированный код D3. Поскольку Create React App не позволяет изменять конфигурацию Babel без удаления приложения, я застрял. Я думал о том, чтобы вставить скрипт в шаблон или вызов AJAX, чтобы получить скрипт D3 из CDN, но я не уверен, что он работал бы с двумя версиями D3 в одном приложении.

То, что в итоге сработало, было следующим. Я клонировал более раннюю версию D3 в каталог в корне моего приложения, затем изменил имя в его package.json на «d3-v3» и переименовал каталог в «d3-v3». Наименование пакета в формате npm было бы предпочтительнее для имени пакета.

Тогда я сделал:

npm install file:./d3-v3

Из моего компонента React я использовал следующее для D3 v3

import * as d3 from 'd3-v3';

и для v5 используется:

import * as d3 from 'd3';

Answer 3

Не думаю, что это имеет какое-либо отношение к версиям d3. Ваша проблема в том, что ваш скрипт с минифицированной библиотекой имеет один export default d3 (экспорт с именем default, связанный с константой со значением d3), в то время как ваш компонент делает пространство имен import * as d3, что означает, что d3 будет модульным объектом, содержащим все экспорты - в вашем случае только default. Так что d3.default.behaviour может работать. Но вы должны просто изменить свой импорт, чтобы не использовать объекты пространства имен, а вместо этого импортировать одно значение напрямую:

import d3 from './lib/d3/v3/d3';
// which is short for
import { default as d3 } from './lib/d3/v3/d3';