将插件与汇总绑定，但在客户端应用程序中导入重复的Vue.js包'；s束（Nuxt）

亲爱的Stack Overflow/Vue.js/Rollup社区

对于使用Vue和Rollup的主插件开发人员来说，这可能是一个难题。我将非常明确地写下这个问题，希望它能在将来帮助像我这样的noob

我有一个简单的插件，可以帮助表单验证。此插件中的一个组件导入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')
}

  "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"
  }

这正如预期的那样工作，该插件使用如下配置的汇总绑定：

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上运行，因此无需在此处捆绑（假设）

bundler使用的非常简单的src/index.js如下所示：

import Form from './Form.vue'

export default {
  install(Vue, _) {
    Vue.component('bs-form', Form)
  }
}

Rollup创建2个文件（一个esm和一个umd），并在plugins package.json文件中引用它们，如下所示：

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')
}

  "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模块（通过forms插件）也会导入客户端。因此，客户端包中存在此包的副本

我猜客户端应用程序可以配置其网页包配置，以删除此重复模块。也许通过使用重复数据消除插件之类的东西？有人能建议如何最好地处理这种情况吗

但我真正想了解的是，首先捆绑插件的最佳实践，这样客户端就不必更改其配置中的任何内容，只需导入该插件并继续

我知道在插件中导入Vue.js一开始可能不是一件好事情。但这样导入也可能有其他原因，例如，假设插件可以用Typescript编写，Vue.js/Typescript是通过使用Vue.extend语句（见下文）编写的，该语句也导入Vue（以便启用类型接口）：

这是一个很长的问题。请掌握汇总，通过建议最佳实践方法（或您的方法）来帮助我和社区解决这些问题

---

谢谢

我对这个问题提出了一个有趣的警告：

通过NPM软件包使用插件时，不会导入重复的Vue软件包（由

NPM安装-保存
安装）

但是，在开发过程中，如果使用包vie npm链接（如
npm链接
），那么Vue会被导入两次，如原始问题中的图像所示

如果将来遇到类似问题，请尝试发布和导入您的软件包，看看是否有什么不同。

谢谢大家!
 我对这个问题提出了一个有趣的警告：

通过NPM软件包使用插件时，不会导入重复的Vue软件包（由
NPM安装-保存
安装）

但是，在开发过程中，如果使用包vie npm链接（如
npm链接
），那么Vue会被导入两次，如原始问题中的图像所示

如果将来遇到类似问题，请尝试发布和导入您的软件包，看看是否有什么不同。

谢谢大家!
 我也有同样的问题，我发现@vatson的帮助很大

您的问题是“npm链接”、nodejs模块加载的性质以及vue对来自不同位置的多个实例的不容忍性的结合

简短介绍如何在nodejs中导入。如果脚本具有某种库导入，则nodejs最初会在“本地节点\模块”文件夹中查找，如果“本地节点\模块”不包含所需的依赖项，则nodejs会转到上面的文件夹中查找节点\模块和导入的依赖项

您不需要在NPM上发布包。如果您使用
npm-pack
在本地生成包，然后将其安装到其他项目
npm-install/absolute\u-path\u到\u-local\u-package/your\u-package\u-name.tgz
，就足够了。如果您更新了软件包中的某些内容，您可以在其他项目中重新安装它，一切都应该正常

以下是关于
npm-pack
和
npm-link
之间差异的来源，我也有同样的问题，我发现@vatson非常有用

您的问题是“npm链接”、nodejs模块加载的性质以及vue对来自不同位置的多个实例的不容忍性的结合

简短介绍如何在nodejs中导入。如果脚本具有某种库导入，则nodejs最初会在“本地节点\模块”文件夹中查找，如果“本地节点\模块”不包含所需的依赖项，则nodejs会转到上面的文件夹中查找节点\模块和导入的依赖项

您不需要在NPM上发布包。如果您使用
npm-pack
在本地生成包，然后将其安装到其他项目
npm-install/absolute\u-path\u到\u-local\u-package/your\u-package\u-name.tgz
，就足够了。如果您更新了软件包中的某些内容，您可以在其他项目中重新安装它，一切都应该正常

以下是有关
npm-pack
和
npm-link
之间区别的来源。您能否发布一个设置库，以便更容易复制？这也是一个无关的问题，该怎么办