Typescript условного импорта

Question

У меня есть API со следующим интерфейсом (только для примера)

export type FrogAPI = {
  getFrogs(): Promise<Frog[]>
  putFrogs(frogs: Frog[]): Promise<void>
}

У меня есть 2 версии этого, 1 фиктивная версия, которая читает и пишет из localStorage:

export class LocalStorageFrogAPI implements FrogAPI {
  getFrogs(): Promise<Frog[]> {
    return Promise.resolve(JSON.parse(localStorage.getItem('@frogApi/frogs')))
  }
  // ...
}

И реальная версия, которая работает с удаленным API:

export class HttpFrogAPI implements FrogAPI {
  getFrogs(): Promise<Frog[]> {
    return fetch('/frogs').then((res) => res.json())
  }
  // ...
}

Для разработки я использую localStorage, для производства http.

Вопрос : Как я могу условно импортировать правильный файл, чтобы при build time в вывод js включались только нужные источники?Это важно, потому что оба файла стали довольно громоздкими.Я также не хочу показывать версию localStorage в производстве по соображениям безопасности.

Если я сделаю это:

const ApiConstructor = process.env.ENV === 'development' 
    ? require('./LocalStorageFrogAPI')
    : require('./HttpFrogAPI')

export const API = new ApiConstructor() as FrogAPI

Оба источника все равно будут включены в сгенерированный вывод.Как правильно иметь только один правильный выходной JS?Возможен ли какой-нибудь конфиг вебпака?

Answer 1

У меня было похожее требование в проекте, над которым я работал. Есть 2 основных варианта, как я нашел. Первое - это использовать асинхронный импорт, например:

const ApiConstructor = await import("./LocalStorageFrogAPI");

Это можно сделать условно. Но здесь могут быть проблемы с условиями гонки. Особенно в разработке. Когда все импорта будут загружены и кэшированы, кроме этого. Может привести к ошибкам.

Решение, которое мы получили в итоге, состоит в том, чтобы создать 2 версии файла, использующего этот условный импорт. Итак, в вашем случае один файл (для dev) будет использовать

const ApiConstructor = require("./LocalStorageFrogAPI");

и для продукта:

const ApiConstructor = require("./HttpFrogAPI");

Остальной код будет таким же.

А затем вы просто подставляете файлы с помощью веб-пакета в зависимости от сборки (dev / prod).

Вы можете использовать NormalModuleReplacementPlugin для замены. Или иначе, эта статья дает хороший обзор того, как разделить зависимости dev и prod с помощью webpack: Управление сборками Dev и Production с помощью Webpack