Webpack wymaga tablicy wymagań (wymagany ciąg dynamiczny).

Question

Chciałbym wymagać listy wymagań w pakiecie sieci Web. Gdy tylko zmienię parametr ciągu funkcji wymagającej na zmienną lub stałą, nie można już wstrzykiwać tego wymogu.

Oto przykład doskonale pracy:

const angular = require('angular'); 

Ale tak szybko, jak to zmienić do następujących, nie robi już pracować:

const angularString = 'angular'; 
const angular = require(angularString); 

Moim celem jest mieć statyczną listę zależności i wstrzykiwać je jeden po drugim, tak:

const angularDependencies = [ 
    'angular-socket-io', 
    'angular-ui-router' 
]; 

for(var i = 0; i < angularDependencies.length; i++) { 
    require(angularDependencies[i]); 
} 

To jest komunikat o błędzie, który dostałem:

WARNING in ./app/app.js 
Critical dependencies: 
14:1-14 the request of a dependency is an expression 
@ ./app/app.js 14:1-14 

WARNING in ./app ^\.\/.*$ 
Module not found: Error: a dependency to an entry point is not allowed 
@ ./app ^\.\/.*$ 

WARNING in ./app ^\.\/.*$ 
Module not found: Error: a dependency to an entry point is not allowed 
@ ./app ^\.\/.*$ 

Answer 1

To nie zadziała, ponieważ WebPack to narzędzie do kompilacji, które analizuje pliki źródłowe pod kątem ćwiczeń, które należy uwzględnić. Nie uruchamia twojego kodu, aby zobaczyć, co robi. Oznacza to, że twój kod może zawierać tylko ciągi w instrukcjach wymagających.

Jeśli chcesz napisać swój kod w ten sposób, spójrz na SystemJS zamiast WebPack.

https://github.com/systemjs/systemjs

Answer 2

WebPACK wspiera dynamikę wymaga jednak trzeba powiedzieć to, jak znaleźć pliki za pomocą contexts. Można spróbować coś takiego przed wymagające moduły:

var req = require.context(".", true, /^angular-.+$/) 
req("angular-thing") 

Jeśli coś jak to nie zadziała, trzeba będzie użyć innego podejścia w kodzie bo WebPack musi wiedzieć, jakie moduły uwzględnić w pakiet w czasie kompilacji.

Answer 3

Tworzenie angularDependencies.js:

module.exports = [ 
    'angular-socket-io', 
    'angular-ui-router' 
]; 

następnie dodać go do webpack.config.jsentry section. Powinno to wyglądać następująco:

require('./src/angularDependencies').concat(['./myApp.js'])