我正在做一个包含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