如何将多个 vue 组件变成一个 npm 包？答案

【问题标题】：How to turn multiple vue components into one single npm package?如何将多个 vue 组件变成一个 npm 包？
【发布时间】：2020-09-16 16:09:57
【问题描述】：

我工作的公司的项目经理告诉我，将我们正在处理的 vue 项目的所有全局组件转换为单个 npm 包，任何从事该项目的人都可以导入并开始使用.本质上，我必须将全局组件转换为像 vuetify 这样的组件库，它是使用 npm 安装的，而不是从节点模块目录中导入的。

我想知道你们能否为我指明如何实现这一目标的正确方向。提前致谢。

【问题讨论】：

【解决方案1】：

因此，无论实施如何，您需要的主要内容是遵循本指南，了解如何创建 npm 包 https://docs.npmjs.com/creating-and-publishing-private-packages

那么

您创建一个 src 文件夹。在 src 中，您将创建一个名为“components”的文件夹，其中包含所有 -duh- 组件。

在 src 文件夹中，您还将创建一个 index.js 文件，从那里您将导出您的组件。

export { default as VDataTable } from './components/VDataTable.vue'
// ...etc

选项1

如果您为您的项目使用捆绑器，并且您知道所有代码库都将使用捆绑器，那么您可以简单地使用 package.json 创建一个文件夹。

然后你会在你的 package.json 中

  "module": "src/index.js",
  "main": "src/index.js"

在这种情况下，您让您的主项目捆绑器（正在使用包）为您转译所有包，（babel，单文件组件）

选项 2

如果您完全不知道可以使用您的库的项目的性质，您将需要一个用于组件的打包器。

Rollup 就是一个例子。

我推荐这两个指南。

长话短说，Rollup 将为您转换您请求的文件（js 和 css），并且您必须从您的 package.json 中提供它们

  "module": "src/dist/library.esm.js",
  "main": "src/library.common.js"

然后你就可以发布你的包了。可能私下进行，否则您可能会被解雇：P

【讨论】：