javascript - Hvordan ændrer man dynamisk importstier i webpack?

Jeg har et sæt af eksporter, som jeg normalt importerer fra en mappe:

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

Men hvis jeg kører webpack med en specifik NODE_ENV indstillet, vil jeg gerne have, at roden af alle sådanne imports behandles som es6 i stedet:

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

Hvordan kan jeg gøre dette, f.eks. få webpack til dynamisk at løse path/to/dir/es5/* til path/to/dir/es6/*?

Svar #1

Du kan bruge et alias til det.

For eksempel kan du i din webpack-konfiguration bruge noget som:

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

Yderligere læsning: https://webpack.js.org/configuration/resolve/

Svar #2

Her er min måde at håndtere det her på.

Indbygget DefinePlugin kombineret med env-variabel.

i din package.json, tilføj miljøvariabel på følgende måde

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

Tilføj derefter din DefinePlugin inde i din webpack.config-fil

plugins: [
    ...

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

    ...
]

Så kan du bruge SOME_ENV_VAR som en global variabel i din kode

/* global SOME_ENV_VAR */    

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

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