Come si crea un modulo compatibile con CommonJS, AMD e Browser in ES6 con Babel?

Question

Nel normale ES5 se voglio all'autore un pacchetto che potrebbe essere l'uso su entrambi i lati del server (tramite CJS, AMD, RequireJS) o del browser, vorrei fare qualcosa di simile:

(function(name, definition)){ 
    if (typeof exports !== 'undefined' && typeof module !== 'undefined') { 
     module.exports = definition(); 
    } else if (typeof define === 'function' && typeof define.amd === 'object') { 
     define(definition); 
    } else { 
     this[name] = definition(); 
    } 
}('foo', function foo(){ 
     'use strict'; 

     return 'foo'; 
}) 

Come sono raggiungo questa funzionalità durante la scrittura di un pacchetto in ES6?

Quello che ho cercato:

if (typeof exports !== 'undefined' && typeof module !== 'undefined') export Foo; 
else if (typeof define === 'function' && typeof define.amd === 'object') define(Foo); 
else this['Foo'] = Foo; 

Mentre transpiling questo, Babel mi genera un errore:

SyntaxError: src/index.js: 'import' and 'export' may only appear at the top level (10:69) 
    9 | 
> 10 | if (typeof exports !== 'undefined' && typeof module !== 'undefined') export Foo; 
    |                 ^
    11 | else if (typeof define === 'function' && typeof define.amd === 'object') define(Foo); 
    12 | else this['Foo'] = Foo; 
    13 | 

ha funzionato quando ho usato module.exports invece di export Ma è possibile fare questo rigorosamente usando ES6?

Answer 1

Quindi non esiste un modo reale per includere i moduli ES6 in una definizione di modulo universale perché i moduli ES6 sono rigorosamente uno per file e tutte le istruzioni di importazione ed esportazione devono essere al livello superiore.

Quando le specifiche loader è fatto ci sarà probabilmente un modo per aggiungere un modulo nel Registro di sistema e che sarà come si sarebbe includere moduli ES6 in un UMD, fino ad allora, dal momento che nessun browser in realtà sostengono ES6 moduli tuo unico gli obiettivi sono AMD e CommonJS, ma dovresti usare uno dei tanti compilatori o trsnspilers come browserify o Babel per farlo per te.

Answer 2

Non si dispone di un'uscita universale ma StealJS può esportare il progetto ES6 transpiled Babel in CommonJS, AMD e come standalone. Per CommonJS e AMD la struttura del modulo originale viene mantenuta in modo da poter caricare solo le dipendenze di cui si ha realmente bisogno.

La guida project exporting spiega in un po 'più in dettaglio, ma quando si utilizza il flusso di lavoro NPM questo è come il vostro script di build sembra (sarà anche costruire CSS/MENO/SASS e altre dipendenze, se inclusi):

{ 
    dist: { 
     system: { 
      config: "package.json!npm" 
     }, 
     outputs: { 
      "+cjs": {}, 
      "+amd": {}, 
      "+global-js": {}, 
      "+global-css": {} 
     } 
    } 
}