vue封装npm组件-CSDN博客

涉及知识点：

vue
单元测试
npm
gitlab ci/cd

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

组件封装

vue组件封装的三个关键点

props
slot
events

props支持如下的值：

slot的话，因为平时很少用，所以这块不知道该怎么应用进去，希望有知道的可以提供一下思路。

events支持如下的值：

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

不足的地方：

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

代码管理

公司代码是托管在gitlab上的，由于公司级别的组件库不能直接push代码，所以只能先fork一份代码，然后再merge request合并过去。

代码提交前有单元测试，eslint校验，如果不通过，不允许提交代码。一份好的代码提交格式（参考网上）：

<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去跑对应的脚本，脚本中可以写代码的