Hi, 大家好！我是程序员库里。

今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。

在接下来的日子，我会持续分享前端反卷计划中的每个知识点。

以下是前端反卷计划的内容：

目前这些内容持续更新到了我的学习文档中。感兴趣的欢迎一起学习！

环境搭建

组件库名字

因为我们的组件库要发布到npm上面，所以你的组件库名称不能和其他npm包的名称重复。

我起的组件库名称是叫：curry-design

首先去 npm 仓库查找curry-design，看有没有人在使用。。

https://www.npmjs.com/search?q=curry-design

从结果可以看到，这个名字没有其他包在用，所以我可以使用这个名字作为组件库的包名。

如果你起的名字，在npm里面查询到，则需要换个名字。

创建项目

使用create-react-app创建项目

在终端执行如下命令:

 npx create-react-app curry-design --template typescript

执行后，就会下载成功react+ts模版

创建后的目录如下：

配置eslint

创建.eslintrc.js

module.exports = {

env: {

 browser: true,

 es2021: true,

extends: [

 'eslint:recommended',  // 使用 ESLint 推荐的规则

 'plugin:react/recommended',  // 使用 React 推荐的规则

 'plugin:@typescript-eslint/recommended',  // 使用 TypeScript 推荐的规则

parser: '@typescript-eslint/parser', // 使用 TypeScript 解析器

parserOptions: {

 ecmaVersion: 2021,  // ECMAScript 版本，根据需要进行更改

 sourceType: 'module',  // 模块导入方式

 ecmaFeatures: {

   jsx: true,  // 启用JSX语法支持

 },

plugins: [

 'react',  // React相关的ESLint插件

 '@typescript-eslint',  // TypeScript相关的ESLint插件

rules: {

 // 在这里添加你的自定义规则

 'no-unused-vars': 'off',  // 关闭未使用的变量检查，可以根据需要启用

 '@typescript-eslint/no-unused-vars': ['error'],  // 使用TypeScript的规则检查未使用的变量

 'react/prop-types': 'off',  // 关闭prop-types检查，如果你不使用prop-types

 'react/react-in-jsx-scope': 'off',  // 关闭React在JSX中的全局引入，适用于React 17+

 'react/display-name': 'off',  // 关闭组件名称的检查，如果你不需要

settings: {

 react: {

   version: 'detect',  // 自动检测React版本

 },

};

增加 eslint scripts命令

"lint": "npx eslint .",
安装 eslint vscode插件
执行lint命令进行检测

配置prettier

安装插件

pnpm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev
在.eslintrc.js中添加

extends: [

'plugin:prettier/recommended' // 新增

],
安装prettier vs code插件

增加format scripts命令

"format": " prettier --write 'src/**/*.+(js|ts|jsx|tsx)' "
执行 pnpm format进行格式化

在根目录创建vscode/settings.json，这个告诉vscode进行的配置。

{

 "editor.codeActionsOnSave": {

     "source.fixAll.eslint": true // 保存后字段格式化

 },

 // 检查识别不出来的单词

 "cSpell.words": [

     "ahooks",

     "antd",

     "Appstore",

     "clonedeep",

     "craco",

     "downarrow",

     "immer",

     "mockjs",

     "Popconfirm",

     "qrcode",

     "reduxjs",

     "uparrow"

 ]

}

可以修改自己想要的配置，在根目录创建.prettierrc.js，在这个文件进行配置

module.exports = {

// 箭头函数只有一个参数的时候可以忽略括号

arrowParens: 'avoid',

// 括号内部不要出现空格

bracketSpacing: true,

// 行结束符使用 Unix 格式

endOfLine: 'lf',

// true: Put > on the last line instead of at a new line

jsxBracketSameLine: false,

// 行宽

printWidth: 100,

// 换行方式

proseWrap: 'preserve',

// 分号

semi: false,

// 使用单引号

singleQuote: true,

// 缩进

tabWidth: 2,

// 使用 tab 缩进

useTabs: false,

// 后置逗号，多行对象、数组在最后一行增加逗号

trailingComma: 'es5',

parser: 'typescript',

}

husky检查代码

安装

pnpm i husky -D
执行命令

npm pkg set scripts.prepare="husky install"

npm run prepare

npx husky add .husky/pre-commit "npm run lint"

npx husky add .husky/pre-commit "npm run format"

npx husky add .husky/pre-commit "git add ."

执行上述命令后，就在目录创建husky文件

在git commit 提交的时候，就会按上述步骤检查代码风格。

commit lint

为了规范commit的描述。

在git commit的时候进行lint，执行下面命令。下面两个命令一个是mac，一个是windows，按需执行。

// mac

npm install --save-dev @commitlint/{config-conventional,cli}

// For Windows:

npm install --save-dev @commitlint/config-conventional @commitlint/cli
配置，在终端输入下面命令

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
增加hook，输入执行下面命令

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'

经过上面执行，会生成文件如下：

5.这样在git commit的时候，如果描述不对，就会出错。

错误commit: 提交失败

正确commit：提交正常

持续更新