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

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

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

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

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

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

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

Пример файла

vue.config.admin.js

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 (но это не точно)

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