5

У меня есть несколько смежных проектов, у которых на админке общая основа. Есть некоторые вещи, которые реализованны одинаково в этих проектах. Например, редактор пользователей и прав.

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

Не получается разбить проект на подпроекты так чтоб можно было менять набор компонентов.

Например одному клиенту я отдам однопользовательскую админку бесплатно с одной табличкой, а другому с расширенным функционалом. Проект подразумевает хостинг на стороне клиента и не хочется чтоб расширенный функционал был вкомпилен. Также необходимо обрезать недокументированные возможности.

Создаю папки

/core/ --компоненты табличек и форм редактирования - обязательный компонент
     /router/ --менеджер урлов и менюшки
/common-tools/ --загружается менеджером зависимостей вэбпака: враперы апи, перевод даты и времени в человекочитаемый формат и полобные функции 
/auth/ --авторизация
/admins/ --редактирование админов, права доступа
/cars/ --список автомобилей, автобусов
/maps/ --карты
/abonents/ --абоненты какойто абстрактной услуги: фитнес, интернет, gps. начисление и списание платы
/routers/ --роутеры доступа в интернет
/hotspots/ --настройки страничек регистрации для бесплатного интернета

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

make --with-abonents 

Для контроля автопарка на аутсорсе

make --with-cars --with-admins --with-auth --with-map

Для управления абонентами провайдера интернет

make --with-auth --with-abonents --with-routers

А для хотспота на транспорте, ведь по прошлогоднему закону надо ещё и писать местоположение хотспотов если они не стационарны.

make --with-auth --with-cars --with-routers

Есть ли какие-то широко используемые вещи, которые помогут собирать один проект из нескольких? Как называется такая парадигма чтоб её погуглить?

Наверное у меня получится собрать такие проекты каждый в своей папке, но в этом случае это всё нужно мержить постоянно.

2
  • я использую для этого зависимости в package.json на свои же гит репозитории 19 ноя 2019 в 6:43
  • Контроль компиляции интересует. Какой модуль включать - какой не включать в сборку. А так автоматические роуты от nuxt даже подойдут.
    – eri
    19 ноя 2019 в 20:03

2 ответа 2

3
+500

Я буду отталкиваться от этой главной мысли:

Проект подразумевает хостинг на стороне клиента и не хочется чтоб расширенный функционал был вкомпилен.

В файл package.json добавим:

"scripts": {
  "cars": "FILE_NAME=cars.js WITH_CARS=1 webpack --mode development",
  "admins": "FILE_NAME=admins.js WITH_CARS=1 WITH_ADMINS=1 webpack --mode development"
},

Это позволит выполнять команды npm run cars и npm run admins с определенными переменными окружения. --mode development - будет сформирован не сокращенный файл, который можно открыть и посмотреть реальный код. Для конечной сборки нужно запускать с --mode production, но тогда код станет не читаемым.

В файле webpack.config.js:

  • определяем константу bundleConfig, которая будет доступна на фронте и содержать опции на момент компиляции (поэтому JSON.stringify)
  • используется модуль webpack-conditional-loader, который позволяет создавать условия для import ... from ... - это нужно для исключения отдельных модулей. Более "правильное" или "лучшее" решение я не нашел. Файл src/lib/dummy.js - пустышка: export default { };
  • скомпилированный файл будет иметь название process.env.FILE_NAME, которое мы передаем из package.json

Вот что получилось:

const webpack = require("webpack");

const bundleConfig = {
  withCars: process.env.WITH_CARS === "1",
  withAdmins: process.env.WITH_ADMINS === "1"
};

module.exports = {
  entry: ["./src/index.js"],
  output: {
    filename: process.env.FILE_NAME,
    path: __dirname
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'webpack-conditional-loader'
        }
      }
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      bundleConfig: JSON.stringify(bundleConfig)
    })
  ]
};

Файл src/index.js:

// #if process.env.WITH_CARS === '1'
import Cars from './lib/cars';
// #endif

// #if process.env.WITH_CARS !== '1'
import Cars from './lib/dummy';
// #endif

// #if process.env.WITH_ADMINS === '1'
import Admins from './lib/admins';
// #endif

// #if process.env.WITH_ADMINS !== '1'
import Admins from './lib/dummy';
// #endif

console.log(bundleConfig);
console.log(Cars);
console.log(Admins);

Теперь собираем и проверяем два отдельных бандла:

npm run cars && node cars.js

# Вывод:
{ withCars: true, withAdmins: false }
{ name: 'cars', data: [Function: data] }
{}
npm run admins && node admins.js

# Вывод:
{ withCars: true, withAdmins: true }
{ name: 'cars', data: [Function: data] }
{ name: 'admins', data: [Function: data] }

Теперь проверим, чтобы не попало ничего лишнего. Файл src/lib/admins.js имеет строку hasAdmins:

export default {
  name: "admins",
  data() {
    return {
      "hasAdmins": true
    }
  }
};

проверим куда она попала:

grep -l hasAdmins admins.js cars.js

# Вывод:
admins.js

Надеюсь, что это решение поможет. Vuejs как мне кажется, тут не играет принципиальной роли. Полностью код на гитхабе.

2
  • В webpack-conditional-loader есть else? Можно ли вырезать куски кода внутри объектов или работает только с импортом?
    – eri
    21 ноя 2019 в 0:38
  • @eri, в нем нет else. Там все довольно просто сделано: разрезается на блоки, затем каждый блок проверяется через eval, что получилось - склеивается. 21 ноя 2019 в 5:09
2

Если на сервер к заказчику приходит уже скомпилированная версия бандла (без node_modules). То модно наш функционал положить в приватный пакет npm. Его можно шарить оределённым группам/людям.
Вся идея заключается в том, что мы импортим элемент админки и добавляем его в роут так как нам надо, допустим:

import Vue from 'vue'
import Router from 'vue-router'
import {adminRoutes, authRoutes, abonentRoutes} from '@username/common-admin'

const project_name = 'Common admin panel'
const api_backend = '/custom/api/path'

const router = new Router({
    mode: 'hash',
    routes: [
//        {path: '/app-page', component: MyComponent, name: 'app-page'},
        ...adminRoutes({project_name, api_backend}),
        ...authRoutes({project_name, api_backend}),
        ...abonentRoutes({project_name, api_backend}),
    ],
})

Каждая такая функция возвращает массив с роутами для определённого функционала, а параметры которые мы туда передаём, допустим, меняют заголовок, привелегии с которыи юзер может зайти на неё, кастомный урл апи и прочее.
Также можно экспортить не функции, как я показал, а просто массивы с роутами, если передавать ничего не надо.
Вебпак всё обработает и просто не будет использовать не используемые элементы в приватном пакете. Если же это не происходит, то стоит импортить конкретно файл с определёнными роутами, например import abonentRoutes from '@username/common-admin/abonentRoutes'.
Та же история с vue компонентами: импортим их и юзаем без проблем.
Этот подход полезен если проекты находятся в разных папках, тогда нам ничего не надо копироватьь а просто сделать npm install @username/common-admin.
Итог: мы имеем одну кодовую базу для всех проектов, можем пофиксить баг сразу у всех, полный код доступен только тем, кто имеет доступ к пакету в npmjs.

4
  • ну, а я зашёл немного дальше, понимая, что проекты находятся в разных папках и копипастить файлы это такое себе, решил предложить это. да и к тому же: и твой и мой вариант вебпак будет обрабатывать, также, с отбрасыванием не нужного кода. хотя, можнно и этого избежать, сказав npm грузить файлы из соседнего проекта.
    – ThunderAL
    19 ноя 2019 в 6:34
  • В этом что то есть. А вот ещё в эту тему: в вебпаке есть структуы вроде сишных #ifdef Adminka? Чтоб из переменных окружения дергать флаг и включать - выключать модуль с админкой
    – eri
    19 ноя 2019 в 14:43
  • @eri если очень просто, то запускаем webpack с переменной окружения Adminka=allow и в js пишем if (process.env.Adminka === 'allow') { ... }. есть и более адекватные (а не через переменные окружения) варианты, но сходу вспомнить не смогу, а так: вебпак почти всё что может прекомпилит. были даже какие-то плагины для бабелев которые это упрощали, но, думаю, process.env тебе хватит. бтв, это плохая затея. лучше раздели на отдельные файлы и грузи их. меньше багов будет
    – ThunderAL
    19 ноя 2019 в 17:12
  • @ThunderAL, да именно такая конструкция и интересна. Вэбпак выкинет то что в скобках из билда или нет? макросы с чанками явно описанны в документации, а вот такие конструкции как себя поведут - пока ищу-читаю.
    – eri
    19 ноя 2019 в 17:32

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.