Dear Stack Overflow / Vue. js / Rollup community
Это может быть вопросом новичка для разработчиков мастер-плагинов, работающих с Vue и Rollup. Я напишу вопрос очень явно, надеясь, что в будущем это может помочь другим новичкам, таким как я.
У меня есть простой плагин, который помогает с проверкой формы. Один из компонентов в этом плагине импортирует Vue, чтобы программно создать компонент и добавить его в DOM при монтировании, как показано ниже:
import Vue from 'vue'
import Notification from './Notification.vue' /* a very simple Vue component */
...
mounted() {
const NotificationClass = Vue.extend(Notification)
const notificationInstance = new NotificationClass({ propsData: { name: 'ABC' } })
notificationInstance.$mount('#something')
}
Это работает, как и ожидалось, и этот плагин связывается с помощью Rollup с Конфигурация выглядит следующим образом:
import vue from 'rollup-plugin-vue'
import babel from 'rollup-plugin-babel'
import { terser } from 'rollup-plugin-terser'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
export default {
input: 'src/index.js',
output: {
name: 'forms',
globals: {
vue: 'Vue'
}
},
plugins: [
vue(),
babel(),
resolve(),
commonjs(),
terser()
],
external: ['vue']
}
Как видите, Vue. js выходит из этого пакета. Цель (и предположение) состоит в том, что клиентское приложение, которое импортирует этот плагин, будет работать на Vue, поэтому нет необходимости связывать его здесь (предположение).
Очень простой src / index. js, который использует упаковщик, приведен ниже:
import Form from './Form.vue'
export default {
install(Vue, _) {
Vue.component('bs-form', Form)
}
}
Скопление создает 2 файла (один esm и один umd) и ссылается на них в плагинах. package. json файл, как показано ниже:
"name": "bs-forms",
"main": "./dist/umd.js",
"module": "./dist/esm.js",
"files": [
"dist/*"
],
"scripts": {
"build": "npm run build:umd & npm run build:es",
"build:es": "rollup --config rollup.config.js --format es --file dist/esm.js",
"build:umd": "rollup --config rollup.config.js --format umd --file dist/umd.js"
}
До этого момента все работало, как и ожидалось, и пакеты успешно генерируются.
Клиентское приложение (Nuxt SSR) импортирует этот плагин ( используя npm -ссылку, так как она находится в разработке) с очень простым импортом в файл плагина:
/* main.js*/
import Vue from 'vue'
import bsForms from 'bs-forms'
Vue.use(bsForms)
Этот файл плагина (main. js) добавляется в nuxt.config. js как плагин:
// Nuxt Plugins
...
plugins: [{src: '~/plugins/main'}]
...
Все по-прежнему работает, как и ожидалось, но здесь возникает проблема:
Поскольку клиенты являются приложением Nuxt, Vue по умолчанию импортируется, но внешний модуль Vue (с помощью плагина форм) также импортируется в клиент. Поэтому в пакете клиента есть дублирование этого пакета.
Я полагаю, клиентское приложение может настроить свою конфигурацию webpack для удаления этого дублированного модуля. Возможно, используя что-то вроде плагина Dedupe или что-то еще? Может кто-нибудь подсказать, как лучше всего справиться с подобной ситуацией?
Но то, что я действительно хочу выучить, - это лучшая практика в первую очередь связывать плагин, чтобы клиенту не приходилось ничего менять в его конфигурации и просто импортирует этот плагин и двигаться дальше.
Я знаю, что импортировать Vue. js в плагин, возможно, не очень хорошая вещь для начала. Но могут быть и другие причины для такого импорта, например, представьте, что плагин может быть написан на Typescript, а Vue. js / Typescript написан с использованием операторов Vue .extend (см. Ниже), которые также импортирует Vue (чтобы включить интерфейс типа):
import Vue from 'vue'
const Component = Vue.extend({
// type inference enabled
})
Итак, вот длинный вопрос. Пожалуйста, мастера Rollup, помогите мне и сообществу, предложив подходы наилучшей практики (или ваши подходы) для решения подобных ситуаций.
Спасибо !!!!