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： 如果希望用到酷炫的标签，可以访问这个网站哦～
最后希望大家都可以实现自己满意的组件库哦～
