Блог

Главная - Вопросы по программированию - Webpack. Возможно ли сделать импорт, зависящий от точки входа?

Webpack. Возможно ли сделать импорт, зависящий от точки входа?

#javascript #ecmascript-6 #webpack #bundling-and-minification

#javascript #ecmascript-6 #webpack #объединение и минимизация

Вопрос:

У меня есть приложение с несколькими точками входа, в комплекте с webpack 1.13.2. Я также использую модули ES2015 и babel с предустановкой es-2015. 

 entry: {
        entry1: "app/somechunk/entry1.js",
        entry2: "app/somechunk2/entry2.js"
}

И я хочу условный импорт для конкретного модуля. Импорт должен зависеть от точки входа. Что-то вроде этого:

 if(entry1){
    import locale from 'app/somechunk/localeDictionary1.js'
} else {
    import locale from 'app/somechunk2/localeDictionary2.js'
}

Как я могу этого добиться?

Комментарии:

1. Может быть, я не понимаю вашего вопроса, но входные файлы уже изолированы, в конце концов, это отдельные файлы. В каждой отдельной записи просто импортируйте конкретный файл, который вы хотите, условие if не требуется.

2. @MarcGreenstock. У меня есть, скажем translator.js и несколько словарей локализации. Мне нужно translator.js для каждой точки входа. И я хочу импортировать словарь локализации условно в зависимости от точки входа.

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

Ответ №1:

Ну, это вопрос, который возникает довольно часто. У вас не может быть условного импорта в javascript, зависимости — это статические свойства модулей. У вас есть в основном два варианта:

Объектно-ориентированное решение с использованием инверсии зависимостей

Используйте общий модуль и предоставьте для него функцию конфигуратора. Например:

 // locale.js
export var dictionary = {};
export function setDictionary(dict) {
  dictionary = dict;
}

// locale-en.js
import { setDictionary } from "./locale";
setDictionary({ yes: "yes" });

// locale-hu.js
import { setDictionary } from "./locale";
setDictionary({ yes: "igen" });

// entries/entry-hu.js
import "../locales/locale-hu";
import "../application";

// entries/entry-en.js
import "../locales/locale-en";
import "../application";

// application.js
import { dictionary } from "./locales/locale";
console.log(dictionary);

Статическая конфигурация с использованием псевдонимов

Настройте отдельные задачи сборки для записей и настройте их с помощью:

 {
    entry: "entry.js",
    resolve: {
        alias: {
            "locale": "/locale/locale-en.js"
        }
    }
    ...
}