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

我很想在NPM上发布这篇文章,以清理我的代码库,并将其作为一个经过良好测试的模块从我的项目中分离出来.我在package.json中指定了主文件以加载一个索引,该索 bootstrap 入了我想要公开的所有内容:

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_模块导入的文件(如果我在这里出错,请纠正我).此外,我可能会是一个好主意,这样它可以被不同的系统使用.

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

这样的配置看起来像什么?我知道vue cli有一个用于单个文件组件的build命令,但这有点不同.

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

Edit

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

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

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

libraryTarget: 'umd'

这将确保你的代码传输速度达到Universal Module Definition,这意味着你的代码将在不同的环境下工作,比如AMD、CommonJS,作为一个简单的脚本标签,等等.

此外,在webpack中提供externals属性也是很重要的:

externals: {}

在这里,您可以定义哪些库是您的项目用户的,但不应构建到您的dist文件中.例如,您不希望Vue库被编译/传输到NPM包的源代码中.

我会做更多的研究,到目前为止,如果我想要灵活性和单元测试,最好的 Select 是自己创建一个定制项目.

Webpack docs

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

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

推荐答案

最好的方法可能是构建模块,在package.jsonmy_dist/my_index.js之间设置main.否则,每一个将使用你的模块的项目将不得不将其添加到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组件,您可以查看我维护的其中一个模块:

https://github.com/euvl/vue-js-popover

特别是webpack.config.jspackage.json会让你感兴趣.

Vue.js相关问答推荐

如何将$validator实例注入到使用组合API语法的Vue2.7应用程序中

为什么v-show需要组件的包装元素?

VUE:带自定义组件的数组输入绑定

如何使用composition api v-model Select 框获取其他JSON 值?

传单 vue3 组件变体打开错误的标记 - 单击时弹出

vuetify/mdi 不显示图标

如何在 vue js 的一页路由下显示不同的 category._id

一个 div 组件中的 Vue.js 2.0 路由链接

axios.patch / axios.put 在 Vue 和 Laravel 中不起作用

如何从 vue.js 中的自定义组件中冒泡点击事件?

如何使用 vue.js 获取所选选项的索引

在 Vue.js 中,为什么我们必须在导入组件后导出它们?

如何使用 TypeScript 在 Vue.js 中指定非react性实例属性?

动态注册本地 Vue.js 组件

如何在 JEST 测试中模拟全局 Vue.js 变量

Vue.js 3 - 替换/更新react性对象而不会失go react性

Vue $refs 对象的类型为 unknown未知

Axios 捕获错误请求失败,状态码 404

您正在运行 Vue 的 esm-bundler 构建

如何订阅store 模块