如何发布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用户需要注意的大多数的重要的事情是，你需要transpile在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

最好的方法可能是建立模块并在您的package.json到​​中设置main。否则，每个将使用你的模块的项目将不得不将其添加到include这是乏味的。

您还希望您的webpack版本能够遵循UMD（通用模块定义）。对于您必须设置libraryTarget到umd：

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

也是好事会增加Vue到externals，让你没包VUE库的额外200KB。

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