Come utilizzare il pacchetto npm con il modulo es6 tramite Webpack e 6to5?

Question

Diciamo che voglio usare Immutable nel mio progetto (o qualsiasi pacchetto npm dato). Ho npm install ed esso, quindi è in node_modules. Ovviamente, ha le esportazioni di CommonJS lì. Io, tuttavia, voglio usare i moduli es6 nel mio progetto.

Sto usando Webpack per compilarlo tutto insieme, con il 6to5-loader per gestire la sintassi del modulo es6.

Nel mio file sorgente, dico import Immutable from 'immutable'; --- ma questo causa un problema perché l'ES6 import è alla ricerca di un ES6 default essere stato esportato, che non è il caso (per Immutabile o probabilmente qualsiasi altro NPM pacchetto). Il codice compilato ha un aspetto simile al seguente: var Immutable = require('immutable')["default"]; --- che ovviamente genera un errore, poiché non è disponibile la proprietà default.

Posso consumare i pacchetti npm con i moduli es6?

Answer 1

Babel.js contributore qui. Stai cercando il seguente:

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

Interactive demo

Nota: questo è con l'opzione common o commonInterop moduli. Per altri, vedi: https://babeljs.io/docs/usage/modules/

Answer 2

Appena capito. (La soluzione è specifica per gli strumenti --- ma i moduli es6 esistono solo ora in quanto sono abilitati agli strumenti, quindi penso che sia abbastanza di una "risposta".)

Il modulo predefinito di 6to5 transpilation utilizza l'opzione common, che risulta nel vero problema che ho lamentato sopra. Ma c'è un'altra opzione: commonInterop --- che deve essere stata costruita per affrontare esattamente la situazione con cui ho a che fare. Vedi https://6to5.github.io/modules.html#common-interop

Quindi tre applausi per 6to5.