javascript - Comment changer dynamiquement les chemins d'importation dans webpack ?

J'ai un ensemble d'exports que j'importe normalement depuis un répertoire :

import { myThing } from 'path/to/dir/es5/things'

Cependant, si j'exécute webpack avec un NODE_ENV spécifique défini, j'aimerais que la racine de toutes ces importations soit traitée comme es6 :

import { myThing } from 'path/to/dir/es6/things'

Comment puis-je faire cela, par exemple, faire en sorte que webpack résolve dynamiquement path/to/dir/es5/* en path/to/dir/es6/* ?

Réponse #1

Vous pouvez utiliser un alias pour cela.

Par exemple, dans votre configuration webpack, vous pouvez utiliser quelque chose comme :

const alias = {};
if (NODE_ENV === ...) {
    alias['path/to/dir/es5'] = 'path/to/dir/es6'
}

Lecture complémentaire : https://webpack.js.org/configuration/resolve/

Réponse #2

Voici ma façon de gérer ce genre de choses.

DefinePlugin intégré couplé avec une variable d'environnement.

dans votre package.json, ajoutez la variable d'environnement de la manière suivante

"script": "... webpack --env.SOME_ENV_VAR=value -p"

Ensuite, ajoutez votre DefinePlugin dans votre fichier webpack.config

plugins: [
    ...

    new webpack.DefinePlugin({
        SOME_ENV_VAR: env.SOME_ENV_VAR,
    }),

    ...
]

Vous pouvez ensuite utiliser SOME_ENV_VAR comme variable globale dans votre code

/* global SOME_ENV_VAR */    

const esX = SOME_ENV_VAR === value ? 'es5' : 'es6';

myThing = require(`path/to/dir/${esX}/things`)