SuperAPI AI 工具集

workleap-web-configs

前端与建站

查看项目

更新于 10-16 10:12

技能介绍

Workleap 共享 Web 配置库(workleap-web-configs)是为 Web 工具链提供的一套预配置 NPM 包,来自 workleap/wl-squide。

用途 该库旨在为前端与库项目提供统一的工具链配置,减少各项目重复编写 ESLint、TypeScript、打包、CSS 检查等配置的工作量。配置通过 NPM 分发,升级包版本即可引入新特性。

设计理念

  • 无锁定:默认配置始终可以扩展或覆盖。
  • 按项目类型:配置在内部组合,并按项目类型对外提供,以简化使用。
  • 默认 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。

配置选择速查

  • Web 应用(React):ESLint 使用 defineWebApplicationConfig,TypeScript 使用 web-application.json,打包器使用 @workleap/rsbuild-configs。
  • React 库:ESLint 使用 defineReactLibraryConfig,TypeScript 使用 library.json,打包器使用 @workleap/rslib-configs。
  • TypeScript 库(无 React):ESLint 使用 defineTypeScriptLibraryConfig,TypeScript 使用 library.json,打包器使用 @workleap/rslib-configs。
  • Monorepo 工作区根:ESLint 使用 defineMonorepoWorkspaceConfig,TypeScript 使用 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 配置、预定义选项、transformers 与 Turborepo 设置。
  • Rslib — references/rslib.md:库构建/开发/Storybook 配置、bundleless 与 bundle、transformers 与类型声明。
  • Stylelint — references/stylelint.md:安装、.stylelintrc.json 设置、Prettier 集成与 VS Code 设置。

关键规则

  • 不要臆造 API:仅建议文档化的选项与模式。
  • 遵守维护模式:不要推荐 PostCSS、SWC、webpack 或 tsup 配置。
  • 默认 ESM:除非迁移遗留代码,所有配置均面向 ESM/ESNext。
  • Browserslist 仅用于应用:库不应包含 Browserslist 配置。
  • TypeScript 用于 linting:共享 TypeScript 配置聚焦于 linting,转译由打包器处理。

限制与其他说明 关于具体安装步骤、各包的完整选项、示例代码、版本要求与兼容性细节,资料中暂未提供;请以各工具对应的 references 文件内容为准。