如何发布 Vue.js 组件库？

Question

我正在开发一个包含 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

Answer 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 你会很感兴趣。

Answer 2

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