Общая папка со скриптами на несколько версий приложения VUE

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

Допустим у вас несколько версий приложения. Мобильная, десктопная и особая версия для мобильного приложения (PWA), либо вообще Cordova и Electron. Все пользуются едиными файловыми наборами. Миксины, авторизации, константы едины.

Вы выносите папку выше папки с репозиторием и... компилятор не видит данного пути и предлагает установить зависимость через npm install

Вот какие варианты решения доступны:

 

 

Возможно вы пришли к выводу, что самый правильный способ это сделать - будет оформить через пакет NPM. На самом деле - если вы делаете публичную библиотеку - это отличный и правильный способ. Иначе - у вас будут трудности и проблемы. Любое малейшее обновление - потребует обновление пакета, выкладки во всех и вся и принудительный запуск обновления зависимостей на каждой версии приложения. Слишком много телодвижений для частого обновления общих данных. Я уж не говорю о том что библитека будет публичная

Другой способ решения проблемы - оформить общую папку внутри единой точки старта во VUE репозитории. Возможно в некоторых случаях и такой способ будет удобен. Если во всех папках используются одинаковые записимости package.json. Маловероятно. Но вы можете настроить разные конфичи и компилировать сразу несколько приложений из одной точки

Пример файла

const path = require('path')

module.exports = {
    outputDir: 'dist/admin',
    pages: {
        admin: {
            entry: 'src/projects/admin/main.js',
            template: 'public/index.html',
            filename: 'index.html',
        }
    }
}

При этом в package.json нужно расширить скрипты для каждой из конфигураций

"serve:admin": "env VUE_CLI_SERVICE_CONFIG_PATH=$PWD/config/vue.config.admin.js vue-cli-service serve",

Здесь также присутствует переменная PWD которую нужно прописать чтобы она вела на текущую папку.

В общем много особенностей и ограничений

 

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

 

И четвертый вариант

Вы добавляете папку на уровень выше, как и планировалось изначально. Далее добавляете в webpack алиас через конфигурацию vue.config.js в каждом из репозиториев следующее содержание

const path = require( 'path' );

module.exports = {
configureWebpack: {
resolve: {
alias:{
'~': path.resolve( __dirname, '..', 'common' )
},
}
},
//...
}

где common - это название папки. Всё, теперь у вас появляется возможность указать путь через ~/Enums ~/Mixin красиво и удобно

Чтобы линтер не ругался - пришлось скопировать package.json в папку common, но потом я его удалил и линтер также не ругался.

Само собой - зависимости внутри компонентов вы можете использовать только установленные в папке common через package.json (но это не точно)

Выбирайте удобный для вас вариант и красивого кодинга

  • Автор: kosmom
  • Рейтинг: 0
  • Просмотров: 502
  • Комментариев: 0
  • Создан: 05.04.2021 15:37

Комментарии (0)

Ваши предложения и пожелания пишите на pro@kosmom.ru

Теги

backup bootstrap eloquent excel html ios javascript keep-alive kpi laravel mvp php scroll timestamp undefined vue vuetify watch безопасность биометрический паспорт ваша любаша для путешествий загран на 10 лет загран паспорт загранпаспорт нового образца как заполнить анкеты кеширование логирование мцф образец заполнения антеты паспорт для путешествий паспорт нового поколения печать продукт проектирование прокси разработка ремонт ремонт в апартаментах ремонт нежилого помещения самокат сколько стоил ремонт апартаментов спорт стандарты таблица хостинг цена ремонта юзабилити

Случайный пост

15.01.2020 19:32
Стандарты именования. Текущее положение дел