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去跑對應的腳本，腳本中能夠寫代碼的