如何寫一個易用的組件庫？

2020年你們的flag裏有沒有創造組件這一項呢？

此次重點放在瞭如何搭建一個好用的組件庫上，內容涉及到開源組件庫必備的文檔、代碼規範控制、工程化、編譯、單測等各個環節。爲了說明組件庫必備的各個部分，寫了一個簡單的栗子🌰。這個組件名爲himood, 功能是爲你生成專屬的顏文字。

先放栗子🌰：himood

組件github：github.com/sikazhang/m…

組件示例github：github.com/sikazhang/m…

npm： www.npmjs.com/package/him…

quick start

首先咱們要在github上建立一個組件庫，目錄能夠參照miniDemo（github.com/sikazhang/m…）

組件庫項目包括文檔（docs）、工程代碼（src）、dist以及一些配置文件。docs主要用來存放工程文檔，src存放組件代碼，dist是生成編譯後的代碼，也是引用該組件的開發者實際使用的代碼。

接下來就能夠在src中，實現本身的組件功能啦～這部分不是今天的重點，因此你們能夠自由發揮，也能夠參照我提供的示例代碼。

工程化

1.編譯打包

因爲咱們的代碼是由es6實現的，所以使用babel 7進行編譯，從而適配不一樣的運行環境。

babel的目的就是爲了解決瀏覽器的自身對於es語言的差別性而帶來的一款工具。本項目使用到的庫包括：

• @babel/cli
• @babel/core
• @babel/preset-env

下面配置babel.config.js

const presets = [
[
	'@babel/env',
  {
    targets: {
    	browsers: ['> 0.25%', 'not dead'],
  	},
  	useBuiltIns: 'usage',
  },
],
];
module.exports = { presets };
複製代碼

具體babel的詳細教程可參考以下連接：

www.jianshu.com/p/cbd48919a… babel.docschina.org/docs/en/con…

在配置好以後，執行以下命令，就能夠完成編譯啦

"compile": "rimraf dist && npx babel src --source-maps --out-dir dist"
複製代碼

2.代碼規範

因爲是開源項目，並且本篇教程也想總結下工程化的內容，因此引入了代碼規範的部分。

（1）changelog changelog用於規範commit，清晰明瞭的說明本次提交的目的。 命令參考以下：

"changelog": "npx conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
複製代碼

具體使用方法參考： www.ruanyifeng.com/blog/2016/0…

（2）husky husky是在代碼提交前，設置一個鉤子，用於執行代碼檢查命令，用於保證代碼風格一致：

// package.json
{
...
    "scripts": {
        ...
        "precommit": "lint-staged", // git commit 執行這個命令，這個命令在調起 lint-staged
    },
    "lint-staged": {   // lint-staged 配置
        "app/**/*.{js,jsx}": [
            "prettier --tab-width 4 --write",
            "eslint --fix",
            "git add"
        ]
    },
...
}
複製代碼

具體使用方法參考： www.jianshu.com/p/cdd749c62…

3.文檔

開源項目通常配套相應的文檔說明，所以小編總結了兩個經常使用的庫供你們使用：

(1) vuepress "docs:dev": "npx vuepress dev docs",

(2) docsify  "docs": "docsify serve docs",

4.發包

針對於一個工程裏有多個項目的狀況，若是本身來管理版本號的話會很是繁瑣，所以推薦使用lerna，自動管理髮包。

"release": "lerna publish from-package",
複製代碼

5.單測

最後的選手登場了，若是是一個完整的組件庫，單測是必不可少的，下面提供了經常使用的單測庫及相應的命令供你們參考。但在本次示例中沒有包含單測（主要是懶）。

庫：

"mocha": "^5.2.0",
"mochawesome": "^3.1.1",
"mustache": "^3.1.0",
複製代碼

命令：

"test:component": "mocha -t 180000 test/case/component/**/*.spec.js --exclude **/preview/* --reporter mochawesome",
複製代碼

6.其餘

生成readme： 若是但願用到酷炫的標籤，能夠訪問這個網站哦～

shields.io/

最後但願你們均可以實現本身滿意的組件庫哦～