Come caricare dinamicamente i moduli in Babel e Webpack?

Question

Sto cercando di utilizzare la funzione di caricamento dinamico dei moduli in ES6 e sembra che non sia ancora stato implementato. Ma ci sono sostituti come ES6 Module Loader Polyfill che presumibilmente dovrebbe fare il trucco per il momento.

Quindi ho un progetto ES6 transpilato in ES5 utilizzando Babel e Webpack e funziona perfettamente. Ma tutto il mio codice è fuso in un file bundle.js che vorrei suddividere in moduli. E quando ho provato il suddetto Polyfill, esso genera qualche errore dall'interno e il progetto non inizierà nemmeno.

index.js:6 Uncaught TypeError: Cannot read property 'match' of undefined 

E la linea 6 si legge:

var filePrefix = 'file:' + (process.platform.match(/^win/) ? '/' : '') + '//'; 

Ecco la mia package.js di file:

{ 
    "dependencies": { 
    "es6-module-loader": "^0.17.11", 
    "events": "^1.1.0", 
    "flux": "^2.1.1", 
    "fs": "0.0.2", 
    "react": "^15.0.2", 
    "react-addons-css-transition-group": "^15.0.2", 
    "react-dom": "^15.0.2", 
    "react-router": "^2.4.0", 
    "react-tap-event-plugin": "^1.0.0", 
    }, 
    "devDependencies": { 
    "babel-core": "^6.8.0", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "html-webpack-plugin": "^2.16.1", 
    "react-hot-loader": "^1.3.0", 
    "transfer-webpack-plugin": "^0.1.4", 
    "webpack": "^1.13.0", 
    } 
} 

Per favore qualcuno può puntare a un esempio di lavoro di caricamento del modulo dinamico con Webpack e Babel?

Answer 1

Ci sono davvero tre cose in gioco qui ... dynamicimporting, caricamento lento e scissione/raggruppamento del codice. Il System.import metodo, poli-pieno di ES6 Module Loader permetterà importazioni dinamici ma non dinamica code splitting:

Tuttavia, maggior parte transpilers non supportano la conversione System.load chiamate a require.ensure quindi bisogna farlo direttamente, se si desidera utilizzare la divisione dinamica del codice.

La divisione del codice dinamico si ha quando si creano bundle figlio all'interno di un punto di ingresso, che può essere quindi caricato in modo dinamico. Per questo mi consiglia di utilizzare il promise-loader che è un po 'più amichevole di require.ensure:

import LoadEditor from 'promise?global,[name]!./editor.js'; 

... 

if (page === 'editor') { 
    LoadEditor().then(Editor => { 
    // Use the Editor bundle... 
    }) 
} 

Webpack ora rompere il modulo editor.js e tutto è dipendenze in un fascio separato che può essere caricato immediatamente o dinamico (come mostrato sopra). Infine, a seconda delle dimensioni dell'app, penso che dovresti considerare anche splitting the vendor code out.

UPDATE

System.import stata cancellata dal spec e sostituire semplicemente import(). I nuovi documenti webpack hanno un page that discusses dynamic imports nel webpack e le limitazioni di essi.