如何发布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'
  }
}

并把它添加到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将是你感兴趣的.