web-dev-qa-db-fra.com

Comment utiliser le paquet npm avec le module es6 via Webpack et 6to5?

Disons que je veux utiliser Immutable dans mon projet (ou n'importe quel paquet npm donné). Je l'ai npm installed, il est donc dans node_modules. Bien sûr, il y exporte CommonJS. Cependant, je souhaite utiliser les modules es6 dans mon projet.

J'utilise Webpack pour tout compiler ensemble, avec le chargeur 6to5 pour traiter la syntaxe du module es6.

Dans mon fichier source, je dis import Immutable from 'immutable'; ---, mais cela pose un problème car es6 import recherche l'export es6 default, ce qui n'est pas le cas (pour Immutable ou probablement presque tout autre paquet npm). Le code compilé finit par ressembler à ceci: var Immutable = require('immutable')["default"]; --- ce qui, bien sûr, jette une erreur, car il n’ya pas de propriété default à rechercher.

Puis-je utiliser les packages npm avec les modules es6?

commonjswebpackjavascriptecmascript-6
22
davidtheclark

Babel.js contributeur ici. Vous recherchez le suivant:

import * as Immutable from 'immutable';
// compiles to:
var Immutable = require('immutable');

Démo interactive

Remarque: Il s’agit de l’option de modules common ou commonInterop. Pour les autres, voir: https://babeljs.io/docs/usage/modules/

30
James Kyle

Je viens de le comprendre. (La solution est spécifique à un outil --- mais les modules es6 n'existent maintenant que dans la mesure où ils sont activés par un outil, je pense donc que cela suffit d'une "réponse")

La transpilation de module par défaut de 6to5 utilise l'option common, ce qui entraîne le problème que j'ai décrit précédemment. Mais il existe une autre option: commonInterop - qui doit avoir été construite pour gérer exactement la situation à laquelle je suis confronté. Voir https://6to5.github.io/modules.html#common-interop

Donc, trois acclamations pour 6to5.

0
davidtheclark