Jakikolwiek sposób wykorzystania pakietu internetowego do załadowania zasobu w czasie wykonywania?

Question

Mam jeden plik .json, który zawiera elementy konfiguracji, które chciałbym odwołać z innego pliku skryptu przy użyciu typowej składni importu/wymagania. Obecnie używam WebPacka do rozwiązywania tych zależności i pakowania ich dla mnie. Ten plik jednak powinien być załadowany w czasie wykonywania i miał nadzieję, że może istnieć jakiś typ programu ładującego, który mógłby rozwiązać ten plik w czasie wykonywania. Do tej pory nie znalazłem niczego, co pasowałoby dokładnie do moich potrzeb.

przykład:

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

console.log(myConfig.myFavoriteSetting); 

W powyższym przykładzie ja jak do myconfig.json rozwiązany i ładowane w czasie pracy.

Ewentualnie pokrewnych pytania:

• 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

myślę co chcesz to require.ensure, kod łupania WebPACK użytkownika. Moduły, które "zapewniasz", są umieszczane w oddzielnym pakiecie, a kiedy "zapewnią" wykonanie w czasie wykonywania, środowisko uruchomieniowe sieci Web automatycznie pobiera pakiet za pośrednictwem ajax. Zapamiętaj składnię wywołania zwrotnego, aby upewnić się, że wywołanie zwrotne jest uruchamiane po zakończeniu ładowania pakietu. Nadal musisz wymagać wymaganych modułów w tym momencie; .ensure po prostu zapewnia, że ​​są one dostępne.

Podział kodu jest jedną z głównych funkcji webpacka, pozwala ładować tylko to, czego potrzebujesz w danym momencie. Istnieją wtyczki itp., Aby zoptymalizować wiele pakietów.

Answer 2

Za pomocą Webpack 2 można użyć System.import. Korzysta z Promise API. AFAIK, obecnie nie ma sposobu na uruchomienie asynchronicznego/czekania na kod w przeglądarce. Wierzę, że Babel może przenosić tylko asynchroniczne/oczekujące na ES2015, więc może go uruchomić tylko najnowsza wersja Node (v6.x). Myślę, że przeglądarki nie są w stanie tego zrozumieć, ponieważ transpiled kod używa generatorów.

Dla System.import pamiętaj, że niektóre starsze przeglądarki (IE 11 i poniżej, jak sądzę) będą wymagały dopracowania interfejsu API Promise. Sprawdź do tego polyfill.io.

Jeśli NAPRAWDĘ chcesz używać async/await w przeglądarce, możesz być w stanie wykonać pełny polyfill dla ES2015.

Answer 3

Miałem ten sam przypadek z plikiem (config.json).

postanowiłem skopiować go Copy-Webpack-Plugin

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

Po tym, mój plik był w katalogu build wyjście. Kiedyś własności 'zewnętrznymi' odwołać mój plik w moim pliku webpack.config:

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

W moim pliku js, który załadować config.json:

import config from 'config' 

require 'config' load (”. /config.json), który jest tym z wyjściowego katalogu kompilacji.

Wiem, że to trudne, ale nie znalazłem innego rozwiązania mojego problemu.Może to pomoże komuś.

EDIT

musiałem użyć WebPACK w celu zbudowania ponieważ import config from 'config' nie było zrozumiałe bez niego. Dlatego wymienić:

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

i

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

Bez WebPacka, Javascript zrozumieć var config = require('./config.json') bo to właściwa droga.

I kiedy budować z WebPack to zmienić przez require('./config.json') gdy widzi „./config.json”, tak to działa