Использовать компоненты CDN со сборкой CLI?

Вы хотели бы управлять своими приложениями с помощью сборки CLI Vue Webpack, но сохраняя гибкость в использовании независимых компонентов Vue, то есть служили отдельными файлами, которые являются общими для нескольких приложений/проектов. Это архитектура, которую вы описываете с помощью "внутреннего CDN".

Как отметил @RandyCasburn, вы могли бы достичь вышеуказанной цели, просто разоблачив Vue глобально (обычно загружая его в <script> из CDN), а затем загружая свои независимые файлы, которые используют Vue.component для регистрации ваших компонентов по всему миру.

Ссылка: Как импортировать компонент Vuejs в index.html?

Тем не менее, вы хотели бы иметь возможность разрабатывать эти независимые компоненты Vue как компоненты единого файла (SFC).

Я вижу в основном 2 интересных решения для описания, которое вы описываете:

1. Заполнение пробела в создании инструмента для создания небольших блоков для преобразования вашего SFC в простой JS файл, который может быть загружен с помощью <script> и который регистрирует компонент глобально с помощью Vue.component.
2. Вместо того, чтобы создавать JS файл, который регистрируется через Vue.component, Vue.component его открыть объект Vue Component configuration/options, чтобы он мог локально регистрироваться и загружаться асинхронно. Это требует больше работы, потому что вам нужно настроить каждую конфигурацию webpack для каждого приложения, чтобы асинхронно загружать несвязанные куски.

Вариант 1: Преобразование Vue SFC в один JS файл с Vue.component

На самом деле есть недавний шаблонный проект, который предлагает эту функцию:

https://github.com/RonnieSan/vue-browser-sfc

Шаблон для установки сборки для компиляции компонентов одиночного файла (.vue) в автономный JS файл для использования в браузере

См. Также Компилировать компонент ".vue" в браузере, только с JS?

Он использует webpack для преобразования вашего файла .vue в скомпилированный JS файл, который регистрирует компонент по всему миру с помощью Vue.component.

Вы также можете сделать очень похожий процесс, используя Rollup вместо webpack, если вам нужен более компактный код. Используйте rollup-plugin-vue.

Преимущество такого подхода заключается в том, что его легко понять, вам просто нужно реорганизовать свой HTML для загрузки Vue, а затем всех ваших общих JS файлов компонентов. Даже во время разработки эти компоненты должны быть доступны по всему миру, поэтому среда выполнения Vue не должна жаловаться на "Неизвестный пользовательский элемент" и в вашем потребительском приложении просто не import и не объявлять их.

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

Вариант 2: Преобразование Vue SFC в один JS файл в качестве объекта опций async

Это гораздо интереснее, но сложнее настроить правильно.

Как и предыдущее решение, со стороны компонента вы используете шаг сборки для преобразования файла SFC .vue, но вам не нужна дополнительная оболочка с объявлением Vue.component. Просто попробуйте webpack или Rollup обернуть объект параметров компонента в IIFE или UMD, который регистрирует объект в глобальном контексте.

Например, файл rollup.config.js будет выглядеть так:

import VuePlugin from 'rollup-plugin-vue'

export default {
  input: 'components/my-component.vue',
  output: {
    file: 'dist/my-component.js',
    name: 'MyComponent', // <= store the component on 'window.MyComponent'
    format: 'umd',
  },
  plugins: [VuePlugin()]
}

Затем в ваших потребительских приложениях вы по-прежнему import() и объявляете свои компоненты, но вам нужно настроить конфигурацию webpack, чтобы он не связывал файлы в приложении, а асинхронно загружал их из сети. Например:

components: {
  'my-component': () => import('my-component'),
},

Для этого вы можете использовать dynamic-cdn-webpack-plugin, но вы должны предоставить свою собственную функцию resolver, потому что по умолчанию module-to-cdn использует собственный список модулей, который не настраивается.

Вы указываете свои компоненты в параметре dynamic-cdn-webpack-plugin only array, предоставляете resolver который имитирует module-to-cdn но использует ваш собственный список. Например:

const modules = {
  'my-component': {
    var: 'MyComponent', // <= name under which the component will be stored.
    versions: {
      '*': {
        development: 'http://localhost:8080/my-cdn/my-component.js',
        production : 'http://localhost:8080/my-cdn/my-component.min.js',
      },
    },
  },
};

Чтобы эта схема работала, вам также нужно указать свои компоненты как модули в ваших зависимостях package.json, возможно, с фиктивным локальным путем в качестве спецификации версии, чтобы убедиться, что вы не пытаетесь загрузить их из реестра npm.

Преимущество в том, что вам не нужно касаться ваших файлов HTML, асинхронная загрузка напрямую управляется вашими приложениями. Вы можете связать Vue и не заботиться о порядке/последовательности загрузки. Компоненты CDN загружаются по требованию, когда это действительно необходимо.

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