使用 Vue CLI3 编写组件库并发布至 npm
前几天研发部老大来跟我说,由于现在公司业务中台化,基本上公司所有的系统都要进行迁移,并将原来使用的jQuery + Bootstrap 技术栈更新为 Vue + Element。既然统一了技术栈,那么在开发过程中肯定会有很多组件是可以共用的,甚至登录页。因此要求我开发一个公共组件库,以避免开发过程中写重复代码,提高开发效率。我也正好趁此机会了解一下相关的知识。
先放上组件地址:hzsj-components。因为不涉及公司业务,所以就把它发布到了 npm 上。
这个组件库是在 Element 的基础上进行开发的,而且是第一次开发,不了解如何合理配置目录,因此我的组件库目录部分参考了 element-ui 的结构。
以 HzCopy
组件为例:
所有组件都放置在 /packages
目录下,/packages/index.js
用于整合所有组件,导出整个组件库。而 /packages/copy/index.js
用于导出单个组件,比如需要按需引入组件时。
1 | // /packages/index.js |
1 | // /packages/copy/index.js |
这样就编写完了一个组件,但要发布还得做一些其他工作。
完善 package.json
:
name:包名,就是
npm install
的时候输入的包名version:版本
description:对包的描述,有利于用户搜索
keywords:关键字,以空格分离,有利于搜索
private:是否私有,必须修改为 false
author:作者
license:开源协议
repository:在 npm 介绍页面显示项目入口,参考格式
1
2
3
4"repository": {
"type": "git",
"url": "https://github.com/xxxx/xxxx.git"
}scripts:新增一条打包库的命令
--target
: 构建目标,默认为应用模式。这里修改为lib
启用库模式。--dest
:输出目录,默认dist
。这里我们改成lib
。[entry]
: 最后一个参数为入口文件,默认为src/App.vue
。这里我们指定编译packages/
组件库目录。
1
2
3"scripts": {
"lib": "vue-cli-service build --target lib --name hzsj-components --dest lib packages/index.js"
}
main:定义包的入口文件
1
"main": "lib/hzsj-components.umd.min.js"
engines:告诉用户运行你的包对 NodeJs 版本的要求
1
2
3"engines": {
"node": "v11.8.0"
}
修改好 package.json
后就可以准备发布包了。
首先如果使用了淘宝或其他镜像需先设置回 npm 镜像
1 | npm config set registry http://registry.npmjs.org |
或者如果使用 nrm 可使用:
1 | nrm use npm |
然后去 npm 注册一个账号,注册完了在终端登录
1 | npm login |
发布
1 | npm publish |
如果你的包名以 @ 开头,用上面命令可能会发布失败,需要用以下命令发布
1 | npm publish --access public |