如何发布 Vue.js 组件库？

Posted 2023-02-22

【中文标题】如何发布 Vue.js 组件库？

【英文标题】：How to publish a library of Vue.js components?

【发布时间】：2017-12-31 02:49:49

【问题描述】：

我正在开发一个包含 Vuex 模块和用户可以扩展的抽象组件的项目。

我很想在 NPM 上发布它来清理我的代码库，并将它作为一个经过良好测试的可靠模块从我的项目中提取出来。我在package.json 中指定了主文件来加载一个索引，该索引导入我想要公开的所有内容：

https://github.com/stephan-v/vue-search-filters/

索引目前包含以下内容：

import AbstractFilter from './src/components/filters/abstract/AbstractFilter.vue';
import Search from './src/store/modules/search';

module.exports = 
    AbstractFilter,
    Search
;

为此，我需要对其进行转译，因为 babel 编译器通常不会转译从 node_modules 导入的文件（如果我在这里错了，请纠正我）。除此之外，我这样做可能是一个好主意，以便它可以被不同的系统使用。

如何使用 Webpack 仅转换我需要的文件？我必须为此创建一个单独的配置吗？

这样的配置是什么样的？我知道 vue-cli 有一个用于单个文件组件的 build 命令，但这有点不同。

欢迎任何有关如何转译此类内容的提示或建议。

编辑

这似乎也是一个好的开始：

https://github.com/Akryum/vue-share-components

Webpack 用户需要注意的最重要的事情是您需要在 UMD 中转译文件，可以通过以下方式设置：

libraryTarget: 'umd'

这将确保您正在为Universal Module Definition 进行转译，这意味着您的代码将在不同的环境中工作，例如 AMD、CommonJS、作为简单的脚本标签等。

除了在 webpack 中提供 externals 属性很重要：

externals: 

您可以在此处定义您的项目用户哪些库，但不应将其构建到您的dist 文件中。例如，您不希望 Vue 库被编译/转译到 NPM 包的源代码中。

我会进行更多研究，到目前为止，如果我想要灵活性和单元测试，最好的选择是自己创建一个自定义项目。

Webpack 文档

这也是一个有用的页面，深入介绍了如何使用 Webpack 发布内容：

https://webpack.js.org/guides/author-libraries/#add-librarytarget

【问题讨论】：

我很困惑，简单地创建一个使用带有 Typescript 块的 SCF 文件并将自身转换为 esm 模块的 vue 组件库是多么痛苦。你会认为现在，鉴于每种工具的成熟度，这将是一件轻而易举的事，但不是！让我想尖叫......

【参考方案1】：

最好的方法可能是构建模块并将main 中的package.json 设置为my_dist/my_index.js。否则，每个将使用您的模块的项目都必须将其添加到include，这很乏味。

您还希望您的 webpack 构建遵循 UMD（通用模块定义）。为此，您必须将libraryTarget 设置为umd：

...
output: 
  filename: 'index.js',
  library:'my_lib_name',
  libraryTarget: 'umd'
,
...

另外，将Vue 添加到externals 也是一件好事，这样您就不会打包额外的 200kb 的 vue 库。

externals: 
  vue: 'vue'
,
resolve: 
  alias: 
    'vue$': 'vue/dist/vue.esm.js'
  

并将其添加到package.json中的peerDependencies：

...
"peerDependencies": 
  "vue": "^2.0.0"
,
"devDependencies": 
  "vue": "^2.0.0"

...

如果你需要一个如何打包 vue.js 组件的现有示例，可以查看我维护的模块之一：

https://github.com/euvl/vue-js-popover

特别是webpack.config.js 和package.json 你会很感兴趣。

【讨论】：

谢谢，这看起来是一个很好的开始，可能是我正在寻找的。我今晚会检查一下，如果它回答了我的问题，请告诉你。

只是好奇，您是自己为这个项目创建了 webpack 配置，还是从另一个同样为 umd 构建的项目中提取了部分内容？

另外，您如何使用这个项目进行开发？没有观察者，也没有 Vue.js 的导入。看起来你只能通过将整个项目连接到一个实际导入 Vue 的 repo 来进行开发，你如何处理这个问题？我最好有一个完全独立的项目，这样我也可以运行单元测试、e2e 测试等。

@Stephan-v 起初我使用 vue cli webpack-simple 配置，因为我无法理解 webpack conf 中的内容：D 但是随着做更多项目并获得更多经验 - 我已经对其进行了调整以满足我的需求。

@Stephan-v 我发现对自己方便的设置是：当我使用npm run build 进行更改时，我手动构建库，并且我有demo 文件夹，我在其中运行npm run dev 一次并且使用我的回归测试（基本上是我的演示用例）测试更改。

【参考方案2】：

我正在寻找一个类似的解决方案，发现汇总https://github.com/thgh/rollup-plugin-vue2（但无法使其工作）和这个组件https://github.com/leftstick/vue-expand-ball，其中所有组件代码都被编译为一个可重用的js文件。 我知道这不是一个合适的解决方案，但也许它足以满足您的需求。

【讨论】：

Rollup 只是另一个捆绑工具，但我想留在 Webpack 生态系统中，因为我已经在使用它了。我知道如何转译文件我只需要一种方法将每个文件分别转译成适用于所有模块系统的通用 ES5 文件。不过感谢您的回答。