react
1. ahooks
一套高质量可靠的 React Hooks 库
主要使用：
- useRequest：异步数据管理的 Hooks。
- useUrlState: 该 Hooks 基于 `react-router` 的 useLocation & useHistory & useNavigate 进行 query 管理。
- useDebounceFn / useThrottleFn
- useLockFn:用于给一个异步函数增加竞态锁，防止并发执行。
- useTitle:设置页面标题。
- useScroll:监听元素的滚动位置。
2. react-dnd 拖拽
3. react tookit 箱即用的一个高效的 Redux 开发工具集
3. unocss
原子化 CSS 使用方法
3. dayjs
Moment.js 的 2kB 轻量化方案，拥有同样强大的 API
vite
1.vite-plugin-purge-icons
本章的插件是可以让我们很方便高效的使用[Iconify](https://iconify.design/)中所有的图标。
2.rollup-plugin-visualizer
可视化并分析你的 Rollup 包，看看哪些模块占用了空间
3. vite-plugin-compression
压缩用成.gz/.br等格式
webpack
常用的Plugin插件
| 插件名称 | 作用 |
|---|---|
| html-webpack-plugin | 生成 html 文件,引入公共的js和css资源 |
| webpack-bundle-analyzer | 对打包后的文件进行分析，生成资源分析图 |
| terser-webpack-plugin | 代码压缩，移除console.log打印等 |
| HappyPack Plugin | 开启多线程打包，提升打包速度 |
| Dllplugin | 动态链接库，将项目中依赖的三方模块抽离出来，单独打包 |
| DllReferencePlugin | 配合Dllplugin，通过manifest.json映射到相关的依赖上去 |
| clean-webpack-plugin | 清理上一次项目生成的文件 |
| vue-skeleton-webpack-plugin | vue项目实现骨架屏 |
常用的loader
| 名称 | 作用 |
|---|---|
| style-loader | 用于将css编译完成的样式，挂载到页面style标签上 |
| css-loader | 用于识别 .css文件, 须配合style-loader共同使用 |
| sass-loader/less-loader | css预处理器 |
| postcss-loader | 用于补充css样式各种浏览器内核前缀 |
| url-loader | 处理图片类型资源，可以转base64 |
| vue-loader | 用于编译 .vue文件 |
| worker-loader | 通过内联loader的方式使用web worker功能 |
| style-resources-loader | 全局引用对应的css，避免页面再分别引入 |
4. 创建库
| 工具名称 | 作用 |
|---|---|
| commander | 自定义命令行工具 |
| inquirer | 命令行交互工具 |
| download-git-repo | 从git上下载项目模板工具 |
| util | download-git-repo不支持异步调用，需要使用util插件的util.promisify进行转换 |
| ora | 命令行 loading 动效 |
| fs-extra | 提供文件操作方法 |
| axios | 发送接口，请求git上的模板列表 |
5.插件库
| 工具名称 | 作用 |
|---|---|
| babylon | 解析js语法，生产AST 语法树 ast将js代码转化为一种JSON数据结构 |
| babel-traverse | babel-traverse是一个对ast进行遍历的工具, 对ast进行替换 |
| babel-core | 将es6 es7 等高级的语法转化为es5的语法 |
eslit相关配置
使用Eslint
| 工具名称 | 作用 |
|---|---|
| eslint | eslint校验代码 |
| @typescript-eslint/parser | ESLint中配置TS的解析器 替代掉默认的Espree解析器 |
| @typescript-eslint/eslint-plugin | 提供额外的ts 语法的规则 |
| @typescript-eslint/eslint-plugin | 提供额外的ts 语法的规则 |
| @typescript-eslint/eslint-plugin | 提供额外的ts 语法的规则 |
react
eslint-plugin-react 配置包扩展支持React语法
vue
eslint-plugin-vue使用 ESLint 检查 .vue文件 的 <template> 和 <script>，以及.js文件中的Vue代码
配置prettier
prettier 只关注格式化，并不具有lint检查语法等能力。它通过解析代码并匹配自己的一套规则，来强制执行一致的代码展示格式。 它在美化代码方面有很大的优势，配合ESLint可以对ESLint格式化基础上做一个很好的补充
eslint-plugin-prettier 解决Prettier与ESLint的配置冲突问题
husky
husky 是一个为 git 客户端增加 hook 的工具。安装后，它会自动在仓库中的 .git/ 目录下增加相应的钩子；比如 pre-commit 钩子就会在你执行 git commit 的触发。
lint-staged
lint-staged 每次git commit的时候都执行一次npm run lint，git暂存区里的文件都走一遍eslint校验
commitlint
@commitlint/cli @commitlint/config-conventional 使用 commitlint 对提交信息进行校验
cz-customizable 可自定义的 Commitizen 插件（或独立实用程序），可帮助实现一致的提交消息
commitlint-config-git-commit-emoji commitlint-config-cz 检查 commit 是否符合某种规范的校验工具
conventional-changelog conventional-changelog-gitmoji-config 可以根据项目的 commit 和 metadata 信息自动生成 changelogs 和 release notes 的系列工具
