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

·  阅读 579

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/

最后希望大家都可以实现自己满意的组件库哦~

分类:
前端
标签:
分类:
前端
标签: