如何写一个易用的组件库？

时间 2020-01-05

标签如何一个易用组件繁體版

原文原文链接

2020年你们的flag里有没有创造组件这一项呢？javascript

此次重点放在了如何搭建一个好用的组件库上，内容涉及到开源组件库必备的文档、代码规范控制、工程化、编译、单测等各个环节。为了说明组件库必备的各个部分，写了一个简单的栗子🌰。这个组件名为himood, 功能是为你生成专属的颜文字。html

先放栗子🌰：himood

组件github：github.com/sikazhang/m…vue

组件示例github：github.com/sikazhang/m…java

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

quick start

首先咱们要在github上建立一个组件库，目录能够参照miniDemo（github.com/sikazhang/m…）es6

组件库项目包括文档（docs）、工程代码（src）、dist以及一些配置文件。docs主要用来存放工程文档，src存放组件代码，dist是生成编译后的代码，也是引用该组件的开发者实际使用的代码。github

接下来就能够在src中，实现本身的组件功能啦～这部分不是今天的重点，因此你们能够自由发挥，也能够参照我提供的示例代码。npm

工程化

1.编译打包

因为咱们的代码是由es6实现的，所以使用babel 7进行编译，从而适配不一样的运行环境。json

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/

最后但愿你们均可以实现本身满意的组件库哦～