前端资源管理

本文最后更新于:2021年6月13日 晚上

框架及社区

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 查询字符串库,必须手动添加以使用最新版本

classnames: react css module 简化工具

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

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

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

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

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

commander: cli 框架

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

inquirer: 命令行交互式输入

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

inquirer 的替代方案总是标榜自己轻量没有 rxjs 依赖,但对 TypeScript 开发者体验做的真烂,目前已知包括 enquirer/prompts。

npm thread 对比

typescript: 为 js 添加了类型系统

type-fest: typescript 类型工具库

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

npm thread

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

小型工具库

faker: mock 数据生成

axios: 通用 ajax 请求库

uuid: 前端 uuid 生成工具

jszip: js 上的 zip 处理库

dexie: Web IndexedDB 封装

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

jsbarcode: 生成一维码

luxon: 日期时间库

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 的函数库

os-locale: 在 nodejs 获取系统语言

ajv: 前端 json 校验

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

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

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

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: 无头浏览器

脚手架和打包工具

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-node-externals: 排除 node_modules

rollup-plugin-typescript2: 编译 ts

工程化

prettier: 代码统一格式化工具

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

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

husky: 为项目配置 git 钩子

推荐使用 v4

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

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

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

jest: 单元测试框架

ts-jest: 支持 ts 单元测试的预设配置

ts-node: 直接运行 ts 文件

rimraf: 跨平台的文件删除

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

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

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

copyfiles: 跨平台的文件复制

文档

选择支.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 的解决方案实在不争气。

有用的资源和社区