ES6 exportation d'un script

voix
0

J'utilise v5 D3 dans React et a une visualisation qui utilise v3. J'utilise des modules de NPM pour la v5 mais pour v3, je suis en train d'importer D3 à utiliser dans cette visualisation.

Dans mon composant je:

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

et dans les d3.js du dossier d3, le script v3 d3 minified:

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

export default d3;

Buti obtenir l'erreur suivante:

Impossible de compiler.

./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()

« Comportement » a été supprimé en v4 alors pour moi, il ressemble à ceci tire la version D3 V5 au lieu de V3. Comment puis-je configurer cela d'utiliser les deux versions de D3?

J'ai changé l'importation:

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

mais ceux-ci ont obtenu erreurs de compilation: Impossible de compiler.

./src/components/d3/NetworkTopology/lib/d3/v3/d3.js

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

et je reçois la même erreur avec l'original import * as d3 from './lib/d3/v3/d3';combiné à la suppression const et à l' exportation dans les d3.js ( il suffit d' utiliser le fichier minified d' origine).

Créé 07/11/2018 à 20:22
source utilisateur
Dans d'autres langues...                            


3 réponses

voix
0

Alors que les réponses précédentes me contournaient l'erreur d'origine dans la partie supérieure de ma question, en utilisant:

d3 importation de » ./lib/d3/v3/d3

, Je fini par obtenir des erreurs ES-Lint que je glissai autour en ajoutant

/ * Eslint-disable * /

Howevever, je puis ai eu une erreur causée par l'insertion Babel « use strict » sur le code D3 minified. Depuis Créer React App ne permet pas de modification de la configuration Babel sans éjecter l'application, j'étais coincé. Je pensais à mettre dans un script dans le modèle ou un appel AJAX pour obtenir le script D3 d'un CDN, mais je ne suis pas sûr qu'il aurait travaillé avec les deux versions D3 dans la même application.

Ce qui a finalement travaillé était le suivant. Je cloné la version précédente de D3 dans un répertoire à la racine de mon application, je modifié le nom dans son package.json être « d3-v3 » et renommé le répertoire 'd3-v3. nommage des paquets de NPM scope aurait été préférable que le nom du package.

Ensuite, je l'ai un:

npm install file:./d3-v3

De mon React composante je les éléments suivants pour D3 v3

import * as d3 from 'd3-v3';

et pour v5 utilisé:

import * as d3 from 'd3';
Créé 08/11/2018 à 23:11
source utilisateur

voix
0

vous devez mettre à jour

    import d3 from './lib/d3/v3/d3';
Créé 07/11/2018 à 20:48
source utilisateur

voix
0

Je ne pense pas que cela n'a rien à voir avec les versions de d3. Votre problème est que votre script avec la bibliothèque minified a une seule export default d3(une exportation avec le nom defaultlié à une constante avec la valeur d3), tandis que votre composant fait un espace de noms import * as d3qui signifie que d3sera un objet de module contenant toutes les exportations - dans votre cas , seul l' defaultun. Donc , d3.default.behaviourpourrait fonctionner. Mais vous devez simplement changer votre importation pour ne pas utiliser des objets d'espace de noms , mais plutôt que la seule valeur importée directement:

import d3 from './lib/d3/v3/d3';
// which is short for
import { default as d3 } from './lib/d3/v3/d3';
Créé 07/11/2018 à 20:42
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more