Web Dev FAQ

invariant

• 在开发时 assert 错误
• invariantGitHubzertosh/invariant
  • 早期来自 React, flux
  • 现在 React 使用 invariant
• tiny-invariantGitHubalexreardon/tiny-invariant
• flux invariant.jsGitHub Filefacebook/flux/src/invariant.js
• react invariant.js (v0.13.3)GitHub Filefacebook/react/src/vendor/core/invariant.js

如何选择 模块 格式

• 面向 node 服务端的项目 - mjs, cjs
• 面向 web 的库 - mjs
• 面向 web 的插件 - iife - 直接执行
• 面向 微前端 - systemjs

Bundler 的作用

1. 应用打包 - UX 优先

• 包含所有 assets
  • image、json、text
  • base64
• assets 转换/优化 - minify 和 UX 相关优化
  • css - cssnano
  • svg - svgo
  • image
    • 生成 blur 嵌入数据
    • 通过 image server 支持不同缩略图
  • font
    • 拉取外部 字体，本地缓存，做 selfhosting
    • 确保字体先加载，避免 layout shifting
  • link - 在 HTML 层面自动添加 prefetch
  • html - 包含 prefetch assets
• JS 处理
  • treeshake 依赖 - 减少产出大小
  • 基于 browserlist 决定产出什么样的 JS
  • 合并、chunk
• 拆分 Client、Server 代码 - 非全静态应用

2. 库打包 - DX 优先

• 支持不同的模块系统 - ESM、CJS、UMD、SystemJS
• 支持不同的环境 - Node、Browser
  • 可能会替代用到的方法
• 支持语言转换
• 产出不同入口

3. 开发打包 - DX 优先

• 更新修改非常快
• 支持框架纬度局部刷新 - React Fast Refresh, HMR
• 使用最新特性 - 减少额外处理
• 惰性打包 - 用到的组件才处理
• 可能直接依赖浏览器对 ESM 的支持 - 减少打包，直接使用

如何选择工具链

• Web 开发 - 开发环境、框架、集成
  • NextJS笔记NextJSNextJS 的构建相当复杂 - lambda、server action、pages、app · dev 能运行，build 后可能又无法运行 · 不要用于后端太重的场景 · 构建会遇到各种问题 · 前后端 Refresh 的频度不一样 - 后端 refresh 时慢打开：/notes/web/framework/nextjs
    • 优点: 开箱即用，支持 SSR ，支持 API ，支持 Layout SSR，支持 SIG，商业化
    • 缺点: 只能应用开发，只能 React
  • Vite笔记Vitevitejs/vite 是什么？ · Dev+Bundle 工具 - No-Bundler - Bundle 为 ESM 独立模块而不是整体 Bundle · ESBuild+Rollup · Koa · 模块 TS, CSS, Static Assets, JSX, JSON, Vue, Glob Import, WebAssembly, Web W...打开：/notes/web/dev/vite
    • 优点: ESBuild + Rollup 最佳体验，支持多框架
    • 缺点:
      • less opinioned - 因为支持多框架
      • 重心相对分散
  • Webpack - 慢、传统、配置复杂 - 不建议 - 除非实现非常复杂的 Bundle 逻辑
• 库 开发 - 自定义、Bundle
  • ESBuild笔记ESBuildevanw/esbuild · MIT, Go · bundler & minifier · used by Vite, Snowpack · roadmap · https://esbuild.github.io/api/ · https://esbuild.github.io/打开：/notes/web/dev/bundle/esbuild
    • 优点: 快、ESM 支持友好 - 开发时体验很好
    • 缺点: 不支持 SystemJS 打包，要求环境更加现代
  • Rollup笔记Rolluprollupjs · Repl · 注意 · 需要使用 tsc 生成 · 参考 · rollup/awesome · Repl · #2182 不支持缓存 · #2072 UMD/IIFE 不支持 code splitting · #3799 不支持 assert打开：/notes/web/dev/bundle/rollup
    • 可配合 ESBuild 使用 - 更快
    • 优点:
      • 最强 Bundler
      • Bundle 结果干净可读
      • 支持非常多配置
      • 支持非常多格式
    • 缺点: 无开箱即用，需要一点配置，有一点慢
  • Vite笔记Vitevitejs/vite 是什么？ · Dev+Bundle 工具 - No-Bundler - Bundle 为 ESM 独立模块而不是整体 Bundle · ESBuild+Rollup · Koa · 模块 TS, CSS, Static Assets, JSX, JSON, Vue, Glob Import, WebAssembly, Web W...打开：/notes/web/dev/vite
  • swc笔记swcswc-project/swc · Speedy Web Compiler · Rust-based platform for the Web · 开发者被 vercel 收编 · 早期定位是 compiler - bundling & minifition not ready打开：/notes/web/dev/bundle/swc
• 测试
  • Ava笔记Avaavajs/ava · 小、快、简单 · process.env.NODEENV=test · nodemodules/.cache/ava · React Recipe · 配合 enzyme 测试 react · pnpm 下 ava 为 shell, 实际脚本为打开：/notes/web/dev/testing/ava - --loader=tsx
    • 优点: 简单轻便
    • 缺点: 不能浏览器测试 - 配合 jsdom 可测试部分
  • vitest笔记vitestvitest-dev/vitest · chai - assertion · c8/istanbul - coverage · tinyspy - mocking, stubbing, spies · jsdom/happy-dom - DOM & browser API mocking打开：/notes/web/dev/testing/vitest
    • 优点: 功能完善, 开箱即用, 默认支持 TS/TSX
    • 缺点: 功能非常多, 依赖 Vite
  • jest笔记jestfacebook/jest · 参考 · kulshekhar/ts-jest · Raathigesh/majestic · Zero config GUI for Jest · 可能需 dom 环境执行 · 修改单个 · 修改默认打开：/notes/web/dev/testing/jest - 自动 jsdom polyfill
    • 不建议使用 - 对 TS 不友好
• 开发工具
  • prettier笔记prettierprettier/prettier 是什么? · opinionated code formatter · Web/Node 开发的 gofmt - JS/TS/Flow/JSX, CSS/SCSS/LESS, Vue, Angular · 支持 Markdown, GraphQL, YAML, JSON打开：/notes/web/dev/prettier
  • eslint笔记eslinteslint-plugin-import · eslint-plugin-react · eslint-plugin-jsx-a11y · react/react-in-jsx-scope · 不要求 · ESBuild 还不支持 jsx - 因此需要 - esbuild#334打开：/notes/web/dev/eslint
  • WebStrom
  • turbo笔记turborepovercel/turborepo · 增量构建 · 类似 nx，但支持多 package；类似 bazel · 适用于 monorepo 构建 · 支持缓存、依赖 · 缓存目录 · - · 项目配置 .turbo/config.json · teamid - - TURBOTEAM打开：/notes/web/dev/turborepo - 大型 monorepo 项目

hoist dependencies

提升依赖到 root 项目

hoist 影响的是依赖放到哪里，和是否允许访问不同的关系。

• 不同包管理器对提升的依赖不同
  • pnpm
    • hoist-pattern=['*']
      • 默认所有都会放到 node_modules/.pnpm
    • public-hoist-pattern=['*eslint*', '*prettier*']
    • shamefully-hoist=false

root project dependencies

在 monorepo、多 workspace 项目下，将公共依赖放到 root 项目

• 好处
  • 新包减少安装过程
  • 包默认存在
• 坏处
  • 移出包时需要安装回来依赖