Redux 开发和构建系统

相关源文件

• .codesandbox/ci.json
• .eslintignore
• .gitbook.yaml
• .github/workflows/publish.yaml
• .github/workflows/size.yaml
• .github/workflows/test.yaml
• .gitignore
• .yarn/releases/yarn-4.4.1.cjs
• .yarnrc.yml
• docs/package.json
• docs/yarn.lock
• examples/todomvc/src/components/App.spec.js
• netlify.toml
• package.json
• tsconfig.json
• tsup.config.ts
• website/.gitignore
• website/tsconfig.json
• website/yarn.lock
• yarn.lock

本文档提供了 Redux 库本身的构建系统、开发工作流程和 CI/CD 流水线的技术概述。它旨在为 Redux 代码库的贡献者以及对 Redux 如何开发、构建和发布感兴趣的人士提供帮助。有关如何在应用程序中使用 Redux 的信息，请参阅Redux 概述或核心 Redux API。

构建系统概述

Redux 使用基于 TypeScript 的构建系统，该系统从单一来源生成多种分发格式，确保在不同 JavaScript 环境中的兼容性。

来源：package.json26-36 tsup.config.ts1-97

软件包结构

Redux 采用现代的包结构，支持多种 JavaScript 模块格式和 TypeScript 类型。

包入口点

此配置使得

• CommonJS 用户能自动使用 CJS 构建版本
• ECMAScript 模块用户能使用 ESM 构建版本
• TypeScript 项目能访问类型定义
• 打包器能根据其模块解析算法选择合适的格式

来源：package.json26-36

构建配置

Redux 使用 tsup 来编译和打包库。配置定义在 tsup.config.ts 中，并生成针对不同环境的多种输出格式。

输出格式

格式	文件模式	目的
现代 ESM	dist/redux.mjs	适用于支持 ES 模块的现代环境
传统 ESM	dist/redux.legacy-esm.js	用于 Webpack 4 兼容性（指向 module 字段）
CommonJS	dist/cjs/redux.cjs	适用于 Node.js 和旧版打包器
浏览器 ESM	dist/redux.browser.mjs	针对浏览器优化（已压缩，生产模式）
TypeScript	dist/redux.d.mts	TypeScript 项目的类型定义

来源：tsup.config.ts47-96

开发工作流

Redux 开发工作流程通过 package.json 中的 npm 脚本定义。

关键开发命令

命令	目的
yarn clean	移除 dist 目录
yarn format	使用 Prettier 格式化代码
yarn lint	使用 ESLint 进行代码检查
yarn test	使用 Vitest 运行测试并进行类型检查
yarn build	清理并构建包
yarn test:watch	在监视模式下运行测试
yarn test:cov	运行带有覆盖率报告的测试

来源：package.json41-54

持续集成

Redux 使用 GitHub Actions 进行持续集成，并定义了多个工作流程以确保代码质量和兼容性。

CI 工作流

CI 过程包括

1. 检查源文件中的相关更改
2. 对代码进行 Lint 检查和测试
3. 构建包
4. 以各种方式测试构建后的包
   • 对照分发文件进行测试
   • 验证与不同 TypeScript 版本（5.0-5.8）的兼容性
   • 使用 are-the-types-wrong 检查包配置
   • 在各种项目设置中进行测试（CRA、Next.js、Vite 等）

来源：.github/workflows/test.yaml1-250

捆绑包大小监控

Redux 监控拉取请求中的包大小变化

来源：.github/workflows/size.yaml1-17

发布流程

Redux 通过 GitHub Actions 触发的手动工作流程发布到 npm。

发布过程的关键特性

1. 手动触发以控制发布时机
2. 发布前的最终测试
3. 使用 npm provenance 进行发布以提高安全性
4. NPM 令牌认证用于发布

来源：.github/workflows/publish.yaml1-25

文档系统

Redux 文档使用 Docusaurus 构建并部署在 Netlify 上。有关文档系统的更多信息，请参阅Redux 文档系统。

来源：netlify.toml1-22

TypeScript 配置

Redux 使用 TypeScript 进行开发，并为不同目的提供了多个配置文件。

TypeScript 配置提供

• 开发时类型检查和 IntelliSense
• 测试专用配置
• 生产构建设置

来源：tsconfig.json1-12 tsup.config.ts9

包管理器配置

Redux 使用 Yarn 4.4.1 作为其包管理器，并附带特定配置。

来源：.yarnrc.yml1-8 package.json85

存储库结构

Redux 仓库的组织结构如下

关键配置文件

• package.json：包定义和脚本
• tsup.config.ts：构建配置
• tsconfig.json：TypeScript 配置
• .eslintignore：ESLint 忽略模式
• .gitignore：Git 忽略模式
• .yarnrc.yml：Yarn 配置
• netlify.toml：Netlify 部署配置

来源：package.json1-86 .gitignore1-37

测试策略

Redux 使用 Vitest 进行测试，支持多种测试模式。

测试命令包括

• yarn test：运行测试并进行类型检查
• yarn test:watch：以监视模式运行测试
• yarn test:cov：运行测试并生成覆盖率报告
• yarn type-tests：运行 TypeScript 特定测试

来源：package.json45-48

结论

Redux 的开发和构建系统旨在生成一个高质量、广泛兼容且具备强大测试和分发能力的库。它利用现代 JavaScript 工具，同时保持与各种环境的兼容性，确保 Redux 可以在几乎任何 JavaScript 项目中使用，无论其模块系统或打包器选择如何。

TypeScript 用于类型安全，多种输出格式用于兼容性，全面的测试以及自动化的 CI/CD 工作流程相结合，有助于保持 Redux 用户所期望的可靠性和性能。

来源：package.json1-86 tsup.config.ts1-97 .github/workflows/test.yaml1-250