Передайте переменную из записей веб-пакета

Question

У меня есть несколько записей, таких как в документах веб-пакета

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

Допустим, каждый из этих файлов (index.js) одинаков, и единственное, что изменяется, - это импорт других маршрутов.

Я бы создал один файл, чтобы сохранить принцип СУХОГО, но мне нужно было бы передать что-то, чтобы фактически знать, какой маршрутизатор я хочу импортировать.

Например, pageOne / index.js равен

import Vue from 'vue'
import axios from 'axios'
import App from '../App'
import { store } from '../store';
import VueProgressBar from 'vue-progressbar'
import Router from '../routers/router';
import interceptor from '../../config/httpInterceptor.js';

console.log('in main', window.location.href)

const routerInstance = new Router('main');
routerInstance.createRouter()
    .then(router => {
        interceptor();

        if (!process.env.IS_WEB) Vue.use(require('vue-electron'));
        Vue.http = Vue.prototype.$http = axios;
        Vue.config.productionTip = false;
        Vue.use(VueProgressBar, {
            color: 'rgb(255, 85, 0)', failedColor: 'red', thickness: '5px'
        });

        new Vue({
            components: { App },
            router,
            store,
            template: '<App/>'
        }).$mount('#app');
    });

и в стр .wo / index.js единственная строка, которая изменяется с

const routerInstance = new Router('main');

на

const routerInstance = new Router('second');

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

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js?page=main',

, но теперь, когда в index.js я регистрирую

console.log('in main', window.location.href)

этоis

http://localhost:9080/#/

Так что я не могу требовать другого маршрутизатора, основываясь на этом. Мне нужно другое решение.

---

Редактировать

@ Даниэль Лизик в разделе комментариев предложил использовать переменную окружения. Он также сказал использовать конфигурацию webpack, чтобы установить его. Учитывая, что я бы реорганизовал мой объект записи следующим образом:

module.exports = {
  entry: {
    pageOne: './src/index.js',
    pageTwo: './src/index.js',
    pageThree: './src/index.js'
  }
};

Мне нужно как-то настроить webpack для установки переменной среды сразу после импортированного файла webpack.

Возможно, Webpack зацикливается на этом объекте иимпортировать файлы. Сразу после прочтения этой строки

pageOne: './src/index.js',

Мне нужно установить некоторую переменную env в 'pageOne', чтобы при выполнении index.js она могла проверить эту переменную и импортировать правильный маршрутизатор.

Однако я понятия не имею, как мне этого добиться.

Answer 1

Вам не нужно передавать параметр запроса в конфигурации точки входа. Вы должны передать его из браузера. Затем вы можете проанализировать параметр запроса и передать его в new Router(). Вы можете использовать urijs модуль узла для синтаксического анализа параметра запроса.

import URI from "urijs";
...
const uriObj = new URI(url);
const page = uriObj.query(true)[page] || "main";
const routerInstance = new Router(page);

В браузере вы вводите URL с параметром страницы, например http://localhost:9080/page=second