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

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

...
"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文件。我知道这不是一个合适的解决方案，但可能足以满足您的需求。

如何发布Vue.js组件库？

2 个答案: