如何发布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文件。 我知道这不是一个合适的解决方案，但也许它足以满足您的需求。