前端资源管理

本文最后更新于：2023年5月19日 凌晨

框架及社区

react: 前端流行的 mvc 框架

对比 react vue
优点 生态庞大 门槛很低，开发者友好
IDE 支持完善 文档是前端框架中最好的
灵活
与 TypeScript 结合完美
缺点 官方基本放任社区发展 IDE 支持一直都不那么完美
对开发者体验不太上心，这会在下面的社区中反复体现到 与 ts 结合不好，vue3 也未能解决模板的类型问题

react-router: react 上的路由管理库

react-router-config: 集中式的 react-router 路由管理库

react-use: react hooks 通用库

antd: 极其强大的中后台 ui 组件库

mobx: 跨框架可变式的全局状态管理库

immer: 简化 react 中不可变数据的修改

use-query-params: 处理 react router 中的 query params

query-string: 所依赖的 url 查询字符串库，必须手动添加以使用最新版本

clsx: react css module 简化工具

react-infinite-scroller: react 无限滚动通用组件

react-string-replace: react 中将 string 替换为 jsx 的工具函数

react-hook-form: react 通用的表单处理

react-json-view: 在 react 中展示 json 数据

react-markdown: 在 react 中展示 markdown 文档

electron: Web 跨平台客户端解决方案

electron-builder: electron 打包/更新一站式解决方案

electron-devtools-installer: electron 客户端安装开发插件

commander: cli 框架

听说有个 yargs，但没有实际使用过。

inquirer: 命令行交互式输入

对比 inquirer enquirer prompts
优点 积极维护 不依赖 rx.js 不依赖 rx.js
支持更复杂的控制流程 面向对象 可组合的小函数
缺点 依赖 rx.js 类型定义很坑 文档错误
大而全的 api 不怎么维护 类型定义错误
插件开发文档一般

npm thread 对比

figlet: 由字符串生成字符画以展示在命令行或浏览器

推荐使用 textSync 同步生成方法，除非这个库支持 web worker/worker_threads，否则对于计算密集型的代码意义不大

ora: 命令行进度输出工具

chalk: 为命令行增色添彩

configstore: 全局配置存储

tar: 打包 tar 文件

typescript: 为 js 添加了类型系统

utility-types: typescript 类型工具库

对比 type-fest utility-types ts-toolbelt
优点 使用广泛 符合直觉 及其大而全
缺点 不符合直觉 不怎么更新了 不明白少即是多的道理

type-fest 虽然安装量更高，但许多地方都不符合直觉，感觉是在瞎折腾，utility-types 则包含真实场景需要的工具类型。

npm thread

@types/*: 社区类型定义库

ts-morph: 操纵 ts ast 必不可少的库

还提供一个在线网站 ts-ast-viewer 以供可视化的查看 ast 树结构注：createSourceFile 中的 fileName 参数可以不用管，在不需要 ts 写入文件的 api 的话

dts-minify: 最小化 dts 类型定义的方式

吾辈使用它主要是为了比较两个 ast 从语义上是否一致（曲线救国）

  1. 使用 dts-minify 将代码压成一行
  2. 使用 prettier 格式化
  3. 对比格式化后的文本

官方提供了 解决方案，但实测格式不同时仍有问题

小型工具库

mockjs: mock 数据生成

相比于更加大而全的 faker.js，由国人创造的 mockjs 更加简单好用（实际上大多数时候我们不需要那么复杂的 mock 功能）。

sweetalert2: 简单的网页弹窗提示

比 layer.js 看起来更现代，而且对现代框架（react）也有支持。

dayjs: 精简的日期时间库

uuid: 前端 uuid 生成工具

jszip: js 上的 zip 处理库

dexie: Web IndexedDB 封装

scroll-into-view-if-needed: 控制 dom 元素滚动到视图区域的工具库

jsbarcode: 生成一维码

worker-plugin: webpack worker 插件

fs-extra: nodejs fs 模块的 Promise 包装超集

git-rev-sync: 读取当前项目的 git 信息

lodash: 前端通用工具库

ssh2-sftp-client: sftp 工具库

levelup: 跨语言的高性能键值存储

open: 在 nodejs 中打开链接、文件之类的东西

pdf-to-printer: 使用 nodejs 打印 pdf 的函数库

ajv: 前端 json 校验

diff-match-patch: Google 的文本差异对比

nest.js: 全栈 web 框架，类 spring boot

typeorm: nodejs orm 库，和 nest.js 有着良好的集成

chokidar: 跨平台的文件监视器

或许可以考虑 c++ 实现的 @parcel/watcher，vscode 出于性能原因更换为它。

fast-glob: nodejs glob 实现

相比于 globby 不顾兼容性仅支持 esm，fast-glob 则支持 cjs 模块，而且依赖也较少。

change-case: 字符串风格转换工具

sqlite3: 嵌入式数据库

remark: markdown 社区及工具集

对比 remark markdown-it
优点 非常模块化 大而全
对插件开发者友好 易于使用
prettier 使用它
缺点 过度模块化 对插件开发者不友好
部分模块仅支持 esm
文档分散
社区作者之间踢皮球

注：如果你不需要操纵 markdown ast，强烈建议使用一站式的 markdown-it

基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import unified from 'unified'
import remarkParse from 'remark-parse'
import remarkStringify from 'remark-stringify'
import visit from 'unist-util-visit'
import unistUtilMap from 'unist-util-map'
import remarkGfm from 'remark-gfm'
import { format, Options } from 'prettier'
import { Node } from 'unist'

const md = unified().use(remarkParse).use(remarkGfm).use(remarkStringify, {
  bullet: '-',
  fences: true,
  incrementListMarker: false,
})

const node = unistUtilMap(md.parse(content), (node) => {
  console.log('node: ', node)
  return node
})
const str = format(md.stringify(node), {
  parser: 'markdown',
  tabWidth: 2,
})
console.log(str)

unified: txt/markdown/html 解析器的抽象核心

remark-parse: 解析 markdown 的插件

remark-gfm: 支持 gfm 的插件

remark-stringify: 序列化 ast 为 markdown 的插件

unist-util-visit: 遍历 ast 的插件

puppeteer: 无头浏览器

pathe: 跨平台的路径处理库

脚手架和打包工具

vite: 一个非常优秀的前端脚手架

对比 vite create-react-app snowpack
优点 非常快 react 官方脚手架 react 是一等公民
支持 ts 配置 非常快
开发者友好
缺点 vue 是一等公民 强制锁定版本 存在许多兼容性问题

若非 snowpack 实在不争气，吾辈也不至于把 vite 作为 react 脚手架的首选

rollup: 前端 npm 库打包工具

对比 rollup webpack esbuild
优点 易于使用 非常灵活 非常快
库友好 生态庞大 支持 js/go API 和插件
缺点 生态还不是那么丰富 灵活是一把双刃剑 使用 go 编写，生态上可能存在问题

@rollup/plugin-commonjs: 捆绑 commonjs

@rollup/plugin-json: 引入的 json 文件

@rollup/plugin-node-resolve: 支持 require 语法

rollup-plugin-copy: 复制静态资源

rollup-plugin-typescript2: 编译 ts

rollup-plugin-auto-external: 自动将 dependencies 中的依赖作为外部依赖项

rollup-plugin-node-externals: 自动将 node 原生包作为外部依赖项

rollup-plugin-add-shebang: 为打包后的 cli 程序添加 #!/usr/bin/env node

rollup-plugin-terser: 压缩打包后的代码

rollup-plugin-visualizer: 分析打包的资源

工程化

prettier: 代码统一格式化工具

eslint: 前端可配置的 linter 工具（实测还是没有 WebStorm 的内置 linter 好用）

env-cmd: 跨平台设置环境变量

envfile: 解析、序列化环境变量

node-html-parser: nodejs 的 html 解析器

simple-git-hooks: 为项目配置简单的 git 钩子

为什么不使用 husky？因为在第五个版本之后作者做出了非常多糟糕的改变，许多有名的库不得不做出了改变，参考：https://github.com/toplenboren/simple-git-hooks#who-uses-simple-git-hooks

lint-staged: 针对暂存的 git 文件运行 linters

patch-package: 在本地覆盖任何有问题的 npm 包中的文件

主要是处理一些 npm 模块可能存在小问题但又来不及提 PR 的情况下，在本地修改并生成 git patch 文件，在每次 yarn install 时合并这些 patch。

vitest: 单元测试框架

ts-node: 直接运行 ts 文件

depcheck: 分析项目中的依赖项，检查幻影依赖

dependency-cruiser 检查项目文件依赖图

rimraf: 跨平台的文件删除

事实上，已经存在一个更强大的 *unix cli shx，但比较烦人的是必须添加 shx 前缀，例如

  • 复制：shx cp -rf <src> <dest>
  • 删除：shx rm -rf <path>

而且包的大小比较大，如果不需要所有的 *unix 命令用起来感觉有点笨重（毕竟更复杂的脚本可以使用 gulp）

semver: npm 版本相关的工具

  • 对比版本
  • 新增版本

latest-version: 获取 npm 上的最后一个版本

文档

选择支.drawio.svg

esdoc: js 中最好的 api 文档生成工具

typedoc: ts 中目前最好的 api 文档生成工具

fliegdoc: 更适合 monorepo 的 ts api 文档生成工具

storybook: 跨框架的 ui 组件文档生成器

vuepress: 静态文档网站生成器

很多对比已经在 VuePress 官网上的 为什么不是 里面说明了，吾辈只对比 vuepress 与 docusaurus。

对比 vuepress docusaurus
优点 开发者友好 基于 react
功能非常齐全
缺点 配置还是多了点 翻译基于配置而非 markdown
修改 js 配置无法热更新 开发者体验并不是那么友好
文档存在错误，完成度相对更低

和 snowpack 一样，基于 react 的解决方案实在不争气。

有用的资源和社区

废弃

axios: 通用 ajax 请求库 – 请使用 fetch

luxon: 日期时间库 – 请使用 dayjs

moment: 日期时间库 – 请使用 dayjs

classnames: react css module 简化工具 – 被 clsx 替代

前端 > 框架
#wiki #工程化
前端资源管理
https://blog.rxliuli.com/p/664f86d038744a01894699e368cc2708/
作者
rxliuli
发布于
2020年11月19日
许可协议