Как получить объект (который использует синтаксис esnext) из конфигурации веб-пакета в машинописи - PullRequest
Новая
       58

Как получить объект (который использует синтаксис esnext) из конфигурации веб-пакета в машинописи

0 голосов
/ 20 сентября 2019

Я пытаюсь добиться того, чтобы использовать динамически созданный объект в конфигурации веб-пакета в проекте сценария машинописного текста (который использует esnext синтаксис модуля, такой как import , export , динамический import () )

т.е. что-то вроде ниже (в DefinePlugin)

Файл - webpack.config.js 

const productA = require("./<path>/ProductA");
const productB = require("./<path>/ProductB");
let product;

switch(process.env.PRODUCT_TYPE) {
  case 'ProductA':
    product = new ProductA();
    break;
  case 'ProductB':
    product = new ProductB();
    break;
  default:
    console.log("ERROR - Incorrect product type")
    process.exit(-1);
 }
...
...
{
  entry: './src/entry.ts',
  module: {
    rules: [{
        test: /\.tsx?$/,
        use: 'ts-loader'
    }]
  },
  ...
  ...
  plugins: [
    new webpack.DefinePlugin({
        productType: () => {
            return product;
        }
    })
  ]
}

Сценарий - DynamicLoad.ts 

let product = productType();
product.run();

Но проблема, с которой я сталкиваюсь, связана с типами синтаксиса esnext, то есть классы ProductA и ProductB здесь используют синтаксис esnext, такой как import , export и реализуют ключевых слов.Итак, webpack выдает ошибку при импорте этих классов в файлы webpack.config.js .

Итак, есть ли способ сделать webpack.config.js понимаете синтаксис esnext ?

Пробовали и обходились различные обходные пути

  1. Используйте babel

babel поддерживает import , export и динамический import () синтаксис.Итак, следует Как я могу использовать ES6 в webpack.config.js? и попробовать с babel (то есть webpack.config.babel.js)

Проблема: Но, с этим я столкнулся с ошибками:

  • babel не смог определить реализует ключевое слово .
  • не удалось найти модуль .css (в моем веб-пакете есть css-loader и style-loader)

webpack в формате машинописи

Проблема: Но проблема с этим webpack.config.ts требует типа модуля commonJS , тогда как мой проект использует esnext .Таким образом, генерируется много ошибок идентификации синтаксиса.

Итак, есть ли способ достичь этого в веб-пакете?

...