如何发布Vue.js组件库？ [英] How to publish a library of Vue.js components?

问题描述

我正在处理一个包含Vuex模块和用户可以从中扩展的抽象组件的项目。

I am working on a project containing a Vuex module and an abstract components that users can extend from.

我希望在NPM上发布这个内容，以清理我的代码库，并将其从我的项目中拉出，作为一个经过良好测试的模块。我已经指定了 package.json 中的主文件，以加载导入我要公开的所有内容的索引：

I would love to publish this on NPM to clean up my codebase and pull this away from my project as a solid well tested module. I have specified the main file in package.json to load an index which imports everything I want to expose:

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（如果我错了，请更正我）。此外，我可能会是一个好主意，所以它可以被不同的系统使用。

For this to work I need to transpile this since a babel compiler normally won't transpile files imported from node_modules(Correct me if I am wrong here). Besides that I would probably be a good idea to do this so it can be used by different systems.

如何通过Webpack只扫描我需要的文件？我必须为此创建一个单独的配置？

How do I transpile only the files that I need though with Webpack? Do I have to create a separate config for this?

这样的配置是什么样的？我知道vue-cli对于单个文件组件有一个 build 命令，但这有点不同。

What does a config like that look like? I know the vue-cli has a build command for one single file component but this is a bit different.

任何关于如何蜕变这样的提示或建议是值得欢迎的。

Any tips or suggestions on how to transpile something like this are welcome.

修改

这似乎也是一个好的开始：

This seems like a good start as well:

https://github.com/Akryum/vue-share-components

Webpack用户注意到的最重要的事情是你需要通过以下方式设置UMD中的文件：

The most import thing for Webpack users to notice is that you need to transpile your files in UMD which can be set by:

libraryTarget: 'umd'

这将确保您的通用模块定义，意味着您的代码将在不同的环境中工作，如AMD，CommonJS，作为一个简单的脚本标签等。

This will make sure your are transpiling for Universal Module Definition, meaning your code will work in different environments like AMD,CommonJS, as a simple script tag, etc.

除了在webpack中提供外部属性的导入：

Besides that it is import to provide the externals property in webpack:

externals: {}

这里您可以定义项目用户的哪些库，但不应该在 dist 文件。例如，您不希望Vue库被编译/纳入您的NPM包的源头。

Here you can define which libraries your project users but should not be built into your dist file. For example you don't want the Vue library to be compiled / transpiled into the source of your NPM package.

我会研究一点，到目前为止最好的选择想要自己创建自定义项目如果我想要灵活性和单元测试。

I will research a bit more, so far the best options looks like to create a custom project myself If I want flexibility and unit testing.

Webpack文档

这也是一个有用的页面，深入了解如何使用Webpack发布内容：

This is also a useful page which goes in depth about how to publish something with Webpack:

https://webpack.js.org/guides/author-libraries/#add-librarytarget

推荐答案

最好的方法是构建模块，并将 main 在 package.json to my_dist / my_index.js 。否则，将使用您的模块的每个项目都必须将其添加到 include ，这是乏味的。

The best way probably will be to build the module and set main in your package.json to my_dist/my_index.js. Otherwise every project that will use your module will have to add it to include which is tedious.

您还希望您的Webpack构建遵循UMD（通用模块定义）。为此，您必须将 libraryTarget 设置为 umd ：

You will also want your webpack build to follow UMD (Universal Module Definition). For that you must set libraryTarget to umd:

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

还有一件好事是添加 Vue to externals ，以便您没有额外添加200kb的vue库。

Also a good thing will be to add Vue to externals so that you didn't pack extra 200kb of vue library.

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组件的现有示例，可以查看我维护的其中一个模块：

If you need an existing example of how to pack a vue.js component, you can take a look in one of the modules I maintain:

<啊ref =https://github.com/euvl/vue-js-popover =nofollow noreferrer> https://github.com/euvl/vue-js-popover

特别是 webpack.config.js 和 package.json 将会很有趣你。

Particularly webpack.config.js and package.json will be interesting for you.

这篇关于如何发布Vue.js组件库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！