web-dev-qa-db-fra.com

Comment exiger JavaScript en utilisant Webpack à partir d'un répertoire dynamique

J'ai du vieux JavaScript ES5 simple à l'ancienne que je dois insérer dans mon application qui utilise Webpack en tant que bundler. Le problème est que l'emplacement de ces fichiers se trouve dans un dossier dont le chemin est dynamique. Il semble que le webpack ne fonctionne pas bien avec les expressions dans require et require.context Ne les autorise pas du tout.

Pour que les répertoires de chemins connus nécessitent tous les fichiers d'un répertoire et de ses sous-répertoires, cette approche fonctionne très bien:

let domainRequires = require.context('./app/domain', true, /\.js$/); domainRequires.keys().forEach(domainRequires);

Comme je ne peux pas utiliser une expression dans require.context, J'ai essayé d'utiliser simplement require et c'est ne fonctionne pas:

require('../../path/to/code/my-library-' + versionNumber + '/domain/clazz.js');

en utilisant le chemin relatif complet.

J'ai également essayé d'utiliser require.context Mais en améliorant la partie regex pour le faire fonctionner et je n'ai pas eu de chance:

require.context('../../path/to/code', true, /^my-library-.*\/domain\/.*\.js$/);

Toute réflexion, suggestion ou solution serait la bienvenue. Si j'ai besoin d'utiliser quelque chose de tiers avec webpack, c'est bien aussi.

webpackrequire
22
Alex White

J'ai fini par comprendre cela. En utilisant le webpack resolve.alias, Je pourrais ajouter:

resolve: {
  alias: {
    common: path.resolve(__dirname, '../../path/to/code/my-library-' + versionNumber + '/domain')
  }
}

dans webpack.config.

Ensuite, dans mon code, je peux exiger tous les fichiers sous /domain Via:

var commonRequires = require.context('common', true, /\.js$/);
commonRequires.keys().forEach(commonRequires);

De même, je pourrais obtenir un seul fichier via:

require('common/clazz.js'); // ../../path/to/code/my-library-1.0.0/domain/clazz.js

FWIW, pour obtenir versionNumber J'ai utilisé le module fs du nœud pour lire à partir d'un fichier json, j'ai utilisé JSON.parse(file) puis récupéré la version en haut de webpack.config

16
Alex White

Depuis Webpack 3.9 (je pense), le commonRequires n'est pas nécessaire. Je lance ceci dans webpack.config.js:

resolve: {
  alias: {
    tmpDir: path.resolve(__dirname, '/tmp')
  }
}

Et puis je charge mon module personnalisé comme:

const dynModule = require('tmpDir/dyn_module.js');

Je ne sais pas si je manque quelque chose de vos besoins mais commonRequires n'est pas nécessaire pour moi et Webpack le construit très bien (et cela fonctionne).

0
Anders