将插件与Rollup捆绑在一起，但是在客户端应用程序的捆绑包（Nuxt）中导入了重复的Vue.js软件包

Question

bounty到期在4天内。该问题的答案有资格获得+ 50声望赏金。Kemal Yalcinkaya希望引起更多关注对此问题：

插件开发是开放源代码生态系统的核心关键组件之一。必须有很多人非常擅长捆绑他们的代码。它将对将来的新手有所帮助。

亲爱的堆栈溢出/Vue.js/汇总社区

对于使用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)
  }
}

[汇总创建两个文件（一个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-link：

/* 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配置，以便删除此重复的模块。也许通过使用重复数据删除插件之类的东西？有人可以建议如何最好地处理此类情况吗？

但是我真正想学习的是，首先将插件捆绑在一起的最佳实践，这样客户端不必更改其配置中的任何内容，只需导入该插件即可继续。

我知道，首先在插件中导入Vue.js可能不是一件好事。但是也可能会有其他这样的导入原因，例如，假设该插件可以用Typescript编写，而Vue.js / Typescript是通过使用Vue.extend语句（请参见下文）编写的，该语句也可以按顺序导入Vue启用类型界面）：

import Vue from 'vue'

const Component = Vue.extend({
  // type inference enabled
})

所以这是一个很长的问题。请汇总大师，通过建议最佳实践方法（或您的方法）来处理此类情况，以帮助我和社区。

谢谢！！！

Answer 1

我通过一个有趣的警告对这个问题进行了分类：

通过NPM软件包（由npm install -save <plugin-name>安装）使用插件时，不会导入重复的Vue软件包

但是，在开发过程中，如果您使用软件包vie npm链接（如npm link <plugin-name>），则Vue将被导入两次，如原始问题中的图像所示。

将来遇到类似问题的人们，请尝试发布并导入您的软件包，以查看是否有区别。

谢谢！