框架及社区

reactopen in new window: 前端流行的 mvc 框架

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

react-routeropen in new window: react 上的路由管理库

react-router-configopen in new window: 集中式的 react-router 路由管理库

react-useopen in new window: react hooks 通用库

antdopen in new window: 极其强大的中后台 ui 组件库

mobxopen in new window: 跨框架可变式的全局状态管理库

immeropen in new window: 简化 react 中不可变数据的修改

use-query-paramsopen in new window: 处理 react router 中的 query params

query-stringopen in new window: 所依赖的 url 查询字符串库,必须手动添加以使用最新版本

classnamesopen in new window: react css module 简化工具

react-infinite-scrolleropen in new window: react 无限滚动通用组件

react-string-replaceopen in new window: react 中将 string 替换为 jsx 的工具函数

react-hook-formopen in new window: react 通用的表单处理

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

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

electronopen in new window: Web 跨平台客户端解决方案

electron-builderopen in new window: electron 打包/更新一站式解决方案

electron-devtools-installeropen in new window: electron 客户端安装开发插件

commander: cli 框架

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

enquirer: 命令行交互式输入

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

npm thread 对比open in new window

figletopen in new window: 由字符串生成字符画以展示在命令行或浏览器

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

oraopen in new window: 命令行进度输出工具

chalkopen in new window: 为命令行增色添彩

configstore: 全局配置存储

tar: 打包 tar 文件

typescriptopen in new window: 为 js 添加了类型系统

utility-typesopen in new window: typescript 类型工具库

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

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

npm threadopen in new window

@types/*open in new window: 社区类型定义库

ts-morphopen in new window: 操纵 ts ast 必不可少的库

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

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

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

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

官方提供了 解决方案open in new window,但实测格式不同时仍有问题

小型工具库

mockjsopen in new window: mock 数据生成

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

sweetalert2open in new window: 简单的网页弹窗提示

比 layer.js 看起来更现代,而且对现代框架(react)也有支持。

dayjs: 精简的日期时间库

uuidopen in new window: 前端 uuid 生成工具

jszipopen in new window: js 上的 zip 处理库

dexieopen in new window: Web IndexedDB 封装

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

jsbarcodeopen in new window: 生成一维码

worker-pluginopen in new window: webpack worker 插件

fs-extraopen in new window: nodejs fs 模块的 Promise 包装超集

git-rev-syncopen in new window: 读取当前项目的 git 信息

lodashopen in new window: 前端通用工具库

ssh2-sftp-clientopen in new window: sftp 工具库

levelupopen in new window: 跨语言的高性能键值存储

openopen in new window: 在 nodejs 中打开链接、文件之类的东西

pdf-to-printeropen in new window: 使用 nodejs 打印 pdf 的函数库

ajvopen in new window: 前端 json 校验

diff-match-patchopen in new window: Google 的文本差异对比

nest.jsopen in new window: 全栈 web 框架,类 spring boot

typeormopen in new window: nodejs orm 库,和 nest.js 有着良好的集成

chokidaropen in new window: 跨平台的文件监视器

或许可以考虑 c++ 实现的 @parcel/watcheropen in new window,vscode 出于性能原因更换为它。

fast-globopen in new window: nodejs glob 实现

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

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

sqlite3: 嵌入式数据库

remarkopen in new window: markdown 社区及工具集

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

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

基本使用

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 的插件

puppeteeropen in new window: 无头浏览器

脚手架和打包工具

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

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

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

rollupopen in new window: 前端 npm 库打包工具

对比rollupwebpackesbuild
优点易于使用非常灵活非常快
库友好生态庞大支持 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: 分析打包的资源

工程化

prettieropen in new window: 代码统一格式化工具

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

env-cmdopen in new window: 跨平台设置环境变量

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

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

simple-git-hooksopen in new window: 为项目配置简单的 git 钩子

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

lint-stagedopen in new window: 针对暂存的 git 文件运行 linters

patch-packageopen in new window: 在本地覆盖任何有问题的 npm 包中的文件

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

jestopen in new window: 单元测试框架

ts-jestopen in new window: 支持 ts 单元测试的预设配置

ts-nodeopen in new window: 直接运行 ts 文件

depcheckopen in new window: 分析项目中的依赖项,检查幻影依赖

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

rimraf: 跨平台的文件删除

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

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

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

semver: npm 版本相关的工具

  • 对比版本
  • 新增版本

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

文档

选择支.drawio.svg

esdocopen in new window: js 中最好的 api 文档生成工具

typedocopen in new window: ts 中目前最好的 api 文档生成工具

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

storybookopen in new window: 跨框架的 ui 组件文档生成器

vuepress: 静态文档网站生成器

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

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

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

有用的资源和社区

废弃

axiosopen in new window: 通用 ajax 请求库 -- 请使用 fetch

luxonopen in new window: 日期时间库 -- 请使用 dayjs

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