vue封装npm组件

时间 2019-12-08

标签 vue 封装 npm 组件栏目软件设计繁體版

原文原文链接

涉及知识点：javascript

vue
单元测试
npm
gitlab ci/cd

根据部门大佬需求，封装一个电话号码自动格式化的一个vue插件。以下：css

组件封装

vue组件封装的三个关键点vue

props
slot
events

props支持以下的值：java

slot的话，由于平时不多用，因此这块不知道该怎么应用进去，但愿有知道的能够提供一下思路。node

events支持以下的值：git

目前想到的是，尽量多的给回调到父元素。github

不足的地方：npm

没法与父组件的data进行双向绑定。
没有用到插槽

代码管理

公司代码是托管在gitlab上的，因为公司级别的组件库不能直接push代码，因此只能先fork一份代码，而后再merge request合并过去。json

代码提交前有单元测试，eslint校验，若是不经过，不容许提交代码。一份好的代码提交格式（参考网上）：segmentfault

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

复制代码

分别由以下部分构成:

type: commit 的类型
feat: 新特性
fix: 修改问题
refactor: 代码重构
docs: 文档修改
style: 代码格式修改, 注意不是 css 修改
test: 测试用例修改
chore: 其余修改, 好比构建流程, 依赖管理.
scope: commit 影响的范围, 好比: route, component, utils, build...
subject: commit 的概述, 建议符合 50/72 formatting
body: commit 具体修改内容, 能够分为多行, 建议符合 50/72 formatting
footer: 一些备注, 一般是 BREAKING CHANGE 或修复的 bug 的连接.

参考：优雅的提交你的 Git Commit Message

原本想集成进去，可让代码自动生成这种格式，可是时间不够（需求不用作了？），就先这样吧。

提一下，能够有些人不知道，拦截提交是husky和lint-staged的功劳，在安装了这两个以后，在package.json的scripts中写以下代码："precommit": "lint-staged",除此以外，还须要加

"lint-staged": {
    "src/**/*.vue": ["eslint --fix", "git add"]
 }
复制代码

参考：用 husky 和 lint-staged 构建超溜的代码检查工做流

这样子就会只lint改动后的代码而不会所有lint一次了。

单元测试

单元测试是参考了Vue Test Utils 这边文章写的，最后选用的是jest。

之前一直不明白为何要写单元测试，每一种状况什么的，让测试本身去测不就完了，如今懂了，就是防止改代码改出什么奇怪的bug。

好比单元测试写了不少测试用例，历经千辛万苦，终于跑通了，可是下一次改动了代码，再跑一次单元测试就是为了保证你的代码仍是正常的（不过写单元测试是真心无聊。。。）。

集成jest的时候还遇到一个坑，jest竟然不认识import语法，@babel/env不起做用吗？

后来在网上找了个解决方法：

yarn add --dev babel-core@^7.0.0-bridge.0
复制代码

能够认为 babel-core@^7.0.0-bridge.0 插件是将 babel6 衔接到 babel7 的一个桥梁

另外的话，若是编辑器使用的是vscode，就能够集成Jest和Jest Snippets，这样每次打开项目的时候，会自动帮你跑测试用例。

发布组件

为了防止npm publish的时候，忘了打包文件，在scripts字段中加入

"prepublishOnly": "npm run build", // 加的是这句，下面两句是关联的
"prebuild": "npm run test", 
"test": "jest",
复制代码

这样子在发布前就会跑单元测试和打包代码，防止乌龙事件。

另外若是想让用户体验新特性，可是又不想更新大版本，通常会采用什么@beta之类的。就是发npm包的时候，打tag

npm publish --tag beta
复制代码

须要注意，打包的代码多是须要运行在你浏览器端或者node端

因此你要在package.json中引入四个字段:

"main": "dist/my-component.umd.js",
  "module": "dist/my-component.esm.js",
  "unpkg": "dist/my-component.min.js",
  "browser": {
    "./sfc": "src/my-component.vue"
  },
复制代码

掘金里有一篇优秀的文章推荐食用：package.json 中你还不清楚的 browser，module，main 字段优先级

因为公司是搭建了私人的npm仓库，因此在发布前须要切换到公司的源，而且使用公司的帐号密码登陆，本身封装的时候要注意问清楚公司是否有本身的npm仓库。

对于以上的操做，已经有人封装好了一个特别优秀的npm插件以供大伙使用，那就是：

vue-sfc-cli，一款组件开发脚手架，开发组件并发布至npm的利器，基本上我上述的操做他都集成进去了，除了单元测试。十分好用的东西，强烈安利，

最后还能作的东西就是充分利用gitlab的ci功能了，其实上述操做能够彻底脱离人工publish什么的，咱们只须要关注业务代码，而且提交代码，剩余的交给gitlab ci去作就能够了。这部分还在学习，大概的需求其实就是，开发完毕后，交给gitlab的runner去跑对应的脚本，脚本中能够写代码的

代码lint
单元测试
文件打包
代码发布

gitlab的强大之处是在于它能够指定分支作指定的事（多人协做开发很好使，若是是一我的爱怎么搞怎么搞），而且能够选择手动部署仍是自动化部署，建议学习gitlab的ci，早日脱离原始时代的刀耕火种。