Javascript 如何发布Vue.js组件库？

我正在从事一个包含Vuex模块和抽象组件的项目，用户可以从中进行扩展

我很想在NPM上发布这篇文章来清理我的代码库，并把它作为一个经过良好测试的模块从我的项目中分离出来。我在

package.json

中指定了主文件，以加载一个索引，该索引导入了我想要公开的所有内容：

该索引目前包含以下内容：

import AbstractFilter from './src/components/filters/abstract/AbstractFilter.vue';
import Search from './src/store/modules/search';

module.exports = {
    AbstractFilter,
    Search
};

为了实现这一点，我需要对其进行传输，因为巴贝尔编译器通常不会传输从node_模块导入的文件（如果我在这里出错，请纠正我）。此外，我可能会是一个好主意，这样它可以被不同的系统使用

如何使用Webpack仅传输我需要的文件？我必须为此创建单独的配置吗

这样的配置看起来像什么？我知道vue cli有一个针对单个文件组件的

build

命令，但这有点不同

欢迎提供任何有关如何传输此类内容的提示或建议

编辑

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

Webpack用户需要注意的最重要的一点是，您需要在UMD中传输您的文件，可以通过以下方式进行设置：

libraryTarget: 'umd'

这将确保您正在传输

通用模块定义

，这意味着您的代码将在不同的环境中工作，如AMD、CommonJS，作为一个简单的脚本标记，等等

此外，在网页包中提供externals属性也是很重要的：

externals: {}

在这里，您可以定义哪些库是项目用户的库，但不应构建到

dist

文件中。例如，您不希望Vue库被编译/传输到NPM包的源代码中

我将进一步研究，到目前为止，如果我想要灵活性和单元测试，最好的选择是自己创建一个定制项目

网页文档

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

---

我正在搜索一个类似的解决方案，找到了rollup（但无法使其工作）和这个组件，其中所有组件代码都被编译到一个可重用的js文件中。

---

我知道这不是一个合适的解决方案，但它可能足以满足您的需要。

最好的方法可能是构建模块并将

包中的
main
设置为
my\dist/my\u index.js
。否则，将使用您的模块的每个项目都必须将其添加到
include
，这是一件乏味的事情

您还希望您的网页包构建遵循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组件的现有示例，可以查看我维护的其中一个模块：


特别是
webpack.config.js
和
package.json
会让你感兴趣。
Rollup只是另一个捆绑工具，我想留在webpack生态系统中，因为我已经在使用它了。我知道如何传输文件，我只需要一种方法，将每个文件分别传输到适用于所有模块系统的通用ES5文件。谢谢你的回答。谢谢。这看起来是个很好的开始，可能也是我想要的。我今晚会查看它，如果它回答了我的问题，我会告诉你。只是好奇，你是自己为这个项目创建了网页配置，还是参与了另一个同样为
umd
构建的项目？还有，你是如何开发这个项目的？没有监视程序，也没有Vue.js的导入。看起来您只能通过将整个项目连接到实际导入Vue的回购协议来进行开发。您如何处理这个问题？我最好有一个完全独立的项目，这样我也可以运行单元测试、e2e测试等。@Stephan-v起初我使用vue cli webpack simple config，因为我无法理解webpack conf:D中的任何内容，但随着做更多的项目和获得更多的经验，我已经调整了它以满足我的需要。@Stephan-v我发现对自己来说很方便的设置是：当我使用
npm run build
进行更改时，我手动构建库，并且我有
demo
文件夹来运行它
npm运行dev
一次，然后使用我的回归测试（基本上是我的演示用例）测试更改。简单地创建一个使用带有类型脚本块的SCF文件并将自身传输到esm模块的vue组件库是多么痛苦，我感到困惑。你可能会认为，现在，考虑到每种工具的成熟度，这将是轻而易举的事，但不是！让我想尖叫。。。