用途
workleap-web-configs 是 Workleap 提供的共享 Web 配置库,用于统一前端工具链的配置。它通过 NPM 分发一系列预配置包,让项目无需从零编写 ESLint、TypeScript、打包器、样式检查等配置,升级包版本即可采用新特性。
设计理念
- 无锁定:默认配置始终可以扩展或覆盖。
- 按项目类型:配置在内部组合,并按项目类型对外提供,以简化使用。
- 默认 ESM/ESNext:面向现代 JavaScript 环境。
- 通过 NPM 分发:便于通过升级包版本采用新功能。
支持的工具(活跃)
| 工具 | 包 | 用途 |
|---|---|---|
| Browserslist | @workleap/browserslist-config | 应用的浏览器目标 |
| ESLint | @workleap/eslint-configs | 代码检查 |
| Stylelint | @workleap/stylelint-configs | CSS 检查 |
| TypeScript | @workleap/typescript-configs | 类型检查(仅用于 linting) |
| Rsbuild | @workleap/rsbuild-configs | Web 应用打包 |
| Rslib | @workleap/rslib-configs | 库打包 |
处于维护模式(不推荐):PostCSS、SWC、webpack、tsup。
使用方式
选择哪个配置
| 项目类型 | ESLint | TypeScript | 打包器 |
|---|---|---|---|
| 带 React 的 Web 应用 | defineWebApplicationConfig | web-application.json | @workleap/rsbuild-configs |
| React 库 | defineReactLibraryConfig | library.json | @workleap/rslib-configs |
| TypeScript 库(无 React) | defineTypeScriptLibraryConfig | library.json | @workleap/rslib-configs |
| Monorepo 工作区根 | defineMonorepoWorkspaceConfig | monorepo-workspace.json | 不适用 |
Browserslist(仅应用)
pnpm add -D @workleap/browserslist-config browserslist
# .browserslistrc
extends @workleap/browserslist-config
仅适用于产出应用包的项目。库不应包含 Browserslist。
在仍使用共享配置的同时添加自定义浏览器目标:
# .browserslistrc
extends @workleap/browserslist-config
IE 11
last 2 OperaMobile 12.1 versions
参考指南
更完整的设置指南、选项和示例,请阅读相应的参考文件:
- ESLint — references/eslint.md:安装、define*Config 函数、规则类别、自定义以及 VS Code 集成。
- TypeScript — references/typescript.md:按项目类型的配置文件、编译器选项覆盖、路径映射和 CLI 脚本。
- Rsbuild — references/rsbuild.md:开发/构建/Storybook 配置、预定义选项、转换器以及 Turborepo 设置。
- Rslib — references/rslib.md:库构建/开发/Storybook 配置、bundleless 与 bundle、转换器以及类型声明。
- Stylelint — references/stylelint.md:安装、.stylelintrc.json 设置、Prettier 集成以及 VS Code 设置。
关键规则
- 不要臆造 API:只建议有文档记录的选项和模式。
- 遵守维护模式:不要推荐 PostCSS、SWC、webpack 或 tsup 配置。
- 默认 ESM:除非迁移旧代码,所有配置都面向 ESM/ESNext。
- Browserslist 仅用于应用:库不应包含 Browserslist 配置。
- TypeScript 用于 linting:共享 TypeScript 配置专注于 linting;转译由打包器处理。
适用场景
适用于采用 Workleap 技术栈的前端项目,包括带 React 的 Web 应用、React 库、无 React 的 TypeScript 库以及 Monorepo 工作区根,用于统一 ESLint、TypeScript、Stylelint、Rsbuild、Rslib 和 Browserslist 配置。
限制
PostCSS、SWC、webpack、tsup 处于维护模式,不推荐使用。Browserslist 配置仅适用于产出应用包的项目,库不应包含。共享 TypeScript 配置仅用于 linting,不负责转译。