Un modo per usare il webpack per caricare una risorsa in fase di runtime?

Question

Ho un singolo file .json che contiene elementi di configurazione a cui vorrei fare riferimento da un altro file di script usando la tipica sintassi import/require. Attualmente sto usando il webpack per risolvere queste dipendenze e raggrupparle per me. Questo file però voglio essere caricato in fase di runtime e speravo che ci potesse essere qualche tipo di caricatore che potesse risolversi e caricare questo file per me in fase di runtime. Finora non ho trovato nulla che corrisponda esattamente alle mie esigenze.

Esempio:

var jQuery = require('jQuery'); 
var sol = require('some-other-lib'); 
var myConfig = require('/real/production/url/myconfig.json'); 

console.log(myConfig.myFavoriteSetting); 

Nell'esempio di cui sopra mi piacerebbe avere myconfig.json risolto e caricati in fase di esecuzione.

domande Forse Related:

• how to use webpack to load CDN or external vendor javascript lib in js file, not in html file
• Webpack - dynamic require and paths
• Require JS files dynamically on runtime using webpack

Answer 1

penso che quello che vuoi è require.ensure, il codice di divisione webpack. I moduli che "assicurate" vengono messi in un bundle separato e quando il vostro "assicuratevi" viene eseguito in fase di esecuzione, il runtime del pacchetto Web recupera automaticamente il pacchetto tramite ajax. Notare la sintassi di callback per assicurarsi che la callback venga eseguita al termine del caricamento del pacchetto. Hai ancora bisogno di richiedere i moduli desiderati in quel punto; . L'assicurazione si limita a garantire che siano disponibili.

La suddivisione del codice è una delle principali funzionalità del pacchetto Web, consente di caricare solo ciò che è necessario in un dato momento. Esistono plug-in, ecc. Per ottimizzare anche i bundle multipli.

Answer 2

Con Webpack 2, è possibile utilizzare System.import. Usa l'API Promise. AFAIK, al momento non è possibile eseguire il codice di attesa/attesa nel browser. Credo che Babel possa solo traspondere async/attendere fino a ES2015 in modo che solo l'ultima versione di Node (v6.x) possa eseguirlo. Non penso che i browser siano in grado di capirlo ancora perché il codice transpiled usa i generatori.

Per System.import, si noti che alcuni browser meno recenti (IE 11 e versioni precedenti) richiedono che venga eseguito il polyfill dell'API Promise. Dai un'occhiata a polyfill.io per questo.

Se si desidera VERAMENTE utilizzare async/await nel browser, è possibile eseguire un polyfill completo per ES2015.

Answer 3

Ho avuto lo stesso caso con un file (config.json).

ho deciso di copiarlo con Copy-Webpack-Plugin

new CopyWebpackPlugin([ 
    // Copy directory contents to {output}/ 
    { from: 'config.json' } 
    ]) 

Dopo di che, il mio file è nella directory di output di generazione. Ho usato immobili 'esterni' per fare riferimento a mio file nel mio file webpack.config:

externals: { 
    'config': "require('./config.json')" 
    } 

Nel mio file js che caricare il config.json:

import config from 'config' 

'config' carico require ('. /config.json) che è quello nella directory di generazione dell'output.

So che è difficile ma non ho trovato un'altra soluzione al mio problema.Forse aiuterà qualcuno.

EDIT

ho dovuto usare webpack al fine di costruire perché import config from 'config' non era comprensibile senza di essa. Ecco perché sostituisco:

externals: { 
    './config.json': "require('./config.json')" 
    } 

e

var config = require('./config.json') //replace import config from 'config' 

Senza webpack, Javascript capire var config = require('./config.json') perché è la strada giusta.

E quando costruisco con webpack, cambia da require('./config.json') quando vede './config.json', quindi funziona