如何发布Vue.js组件库?
我正在研究一个包含Vuex模块和用户可以扩展的抽象组件的项目。
我很乐意在NPM上发布这个代码来清理我的代码库,并将其从我的项目中抽离出来,作为一个经过严格testing的模块。 我已经指定了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 };
为了这个工作,我需要transpile,因为一个babel编译器通常不会transpile从node_modules导入文件(如果我在这里错了,纠正我)。 此外,我可能是一个好主意,这样做可以被不同的系统使用。
如何仅使用Webpack只传输我需要的文件? 我必须为此创build一个单独的configuration吗?
这样的configuration是什么样的? 我知道vue-cli有一个单一文件组件的build
命令,但是这有些不同。
任何提示或build议如何transpile这样的东西是值得欢迎的。
编辑
这似乎也是一个好的开始:
https://github.com/Akryum/vue-share-components
Webpack用户要注意的最重要的事情是,您需要在UMD中传输您的文件,可以通过以下方式进行设置:
libraryTarget: 'umd'
这将确保您正在进行Universal Module Definition
,这意味着您的代码可以在不同的环境中工作,如AMD,CommonJS,作为简单的脚本标记等。
除此之外,在webpack中提供外部属性是重要的:
externals: {}
在这里,您可以定义哪些库是您的项目用户,但不应将其构build到您的dist
文件中。 例如,您不希望将Vue库编译/转译到您的NPM软件包的源代码中。
我会研究一下,到目前为止,最好的select看起来像自己创build一个自定义项目如果我想灵活性和unit testing。
Webpack文档
这也是深入了解如何使用Webpack发布内容的一个有用的页面:
https://webpack.js.org/guides/author-libraries/#add-librarytarget
最好的方法可能是构build模块,并将package.json
中的my_dist/my_index.js
设置为my_dist/my_index.js
。 否则每个将使用你的模块的项目将不得不添加它,以include
乏味。
您还将希望您的webpack版本遵循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.js
和package.json
会对你很有意思。
我正在寻找一个类似的解决scheme,发现汇总https://github.com/thgh/rollup-plugin-vue2 (但无法使其工作),这个组件https://github.com/leftstick/vue-展开所有的组件代码被编译成一个可重用的js文件。 我知道这不是一个适当的解决scheme,但也许这足以满足您的需求。
- 如何运行由webpack转换的函数?
- 如何使用es6风格导入导入MongoDB?
- EcmaScript产量的优先级6
- React / Node / Express / Webpack – 必须返回一个有效的React元素(或null)
- 使用index.ts导出“默认”
- 使用节点中的psql(pg-promise)来承诺循环/ promise.all
- 意想不到的严格模式保留字 – 屈服? 节点v0.11,和谐,es6
- Uncaught TypeError在ES6中使用React Router呈现<Router>:type.toUpperCase不是函数
- node.js简单的项目:ReferenceError:<ClassName>没有定义