workleap-web-configs

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

wl-web-configs

Workleap's shared configuration library for web tooling. Provides pre-configured packages for ESLint, TypeScript, Rsbuild, Rslib, Stylelint, and Browserslist.

Workleap的Web工具共享配置库，提供ESLint、TypeScript、Rsbuild、Rslib、Stylelint和Browserslist的预配置包。

Philosophy

设计理念

No lock-in: Default configurations can always be extended or overridden
By project type: Configurations are composed internally and offered per project type for simplicity
ESM/ESNext by default: Targets modern JavaScript environments
Distributed via NPM: Easy to adopt new features by bumping package versions

无锁定限制：默认配置始终可扩展或覆盖
按项目类型区分：配置在内部组合，按项目类型提供，简化使用
默认ESM/ESNext：面向现代JavaScript环境
通过NPM分发：只需升级包版本即可轻松采用新功能

Supported Tools (Active)

支持的工具（活跃维护）

Tool	Package	Purpose
Browserslist	`@workleap/browserslist-config`	Browser targets for apps
ESLint	`@workleap/eslint-configs`	Code linting
Stylelint	`@workleap/stylelint-configs`	CSS linting
TypeScript	`@workleap/typescript-configs`	Type checking (linting only)
Rsbuild	`@workleap/rsbuild-configs`	Web application bundling
Rslib	`@workleap/rslib-configs`	Library bundling

In maintenance mode (do not recommend): PostCSS, SWC, webpack, tsup

工具	包名	用途
Browserslist	`@workleap/browserslist-config`	应用的浏览器兼容目标
ESLint	`@workleap/eslint-configs`	代码检查
Stylelint	`@workleap/stylelint-configs`	CSS检查
TypeScript	`@workleap/typescript-configs`	类型检查（仅检查）
Rsbuild	`@workleap/rsbuild-configs`	Web应用打包
Rslib	`@workleap/rslib-configs`	类库打包

维护模式（不推荐使用）：PostCSS、SWC、webpack、tsup

Quick Reference

快速参考

Which Configuration to Use?

如何选择配置？

Project Type	ESLint	TypeScript	Bundler
Web app with React	`defineWebApplicationConfig`	`web-application.json`	`@workleap/rsbuild-configs`
React library	`defineReactLibraryConfig`	`library.json`	`@workleap/rslib-configs`
TypeScript library (no React)	`defineTypeScriptLibraryConfig`	`library.json`	`@workleap/rslib-configs`
Monorepo workspace root	`defineMonorepoWorkspaceConfig`	`monorepo-workspace.json`	N/A

项目类型	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`
单仓工作区根目录	`defineMonorepoWorkspaceConfig`	`monorepo-workspace.json`	无

Browserslist (Apps Only)

Browserslist（仅适用于应用）

bash

pnpm add -D @workleap/browserslist-config browserslist

text

undefined

bash

pnpm add -D @workleap/browserslist-config browserslist

text

undefined

.browserslistrc

extends @workleap/browserslist-config


Only for projects emitting application bundles. Libraries should NOT include Browserslist.

To add custom browser targets while still using the shared config:

```text

extends @workleap/browserslist-config


仅适用于生成应用包的项目，类库不应包含Browserslist配置。

如需在使用共享配置的同时添加自定义浏览器兼容目标：

```text

.browserslistrc

extends @workleap/browserslist-config IE 11 last 2 OperaMobile 12.1 versions

undefined

extends @workleap/browserslist-config IE 11 last 2 OperaMobile 12.1 versions

undefined

Detailed Documentation

详细文档

For comprehensive setup guides and options, read the appropriate reference file:

ESLint: See references/eslint.md
TypeScript: See references/typescript.md
Rsbuild: See references/rsbuild.md
Rslib: See references/rslib.md
Stylelint: See references/stylelint.md

如需完整的设置指南和选项说明，请阅读对应的参考文件：

ESLint：查看 references/eslint.md
TypeScript：查看 references/typescript.md
Rsbuild：查看 references/rsbuild.md
Rslib：查看 references/rslib.md
Stylelint：查看 references/stylelint.md

Common Patterns

常见模式

Customizing Default Rules

自定义默认规则

All

define*

functions accept a second argument for customization:

// ESLint example
export default defineWebApplicationConfig(import.meta.dirname, {
    core: { "no-var": "off" },
    typescript: { "@stylistic/quote-props": "off" }
});

json

// TypeScript example - tsconfig.json
{
    "extends": ["@workleap/typescript-configs/web-application.json"],
    "compilerOptions": { "strict": false },
    "exclude": ["dist", "node_modules"]
}

所有

define*

函数都接受第二个参数用于自定义配置：

// ESLint示例
export default defineWebApplicationConfig(import.meta.dirname, {
    core: { "no-var": "off" },
    typescript: { "@stylistic/quote-props": "off" }
});

json

// TypeScript示例 - tsconfig.json
{
    "extends": ["@workleap/typescript-configs/web-application.json"],
    "compilerOptions": { "strict": false },
    "exclude": ["dist", "node_modules"]
}

Configuration Transformers (Advanced)

配置转换器（高级用法）

For full control over Rsbuild/Rslib configs:

import { defineDevConfig, type RsbuildConfigTransformer } from "@workleap/rsbuild-configs";

const customTransformer: RsbuildConfigTransformer = (config) => {
    config.tools = config.tools ?? {};
    // modify config
    return config;
};

export default defineDevConfig({
    transformers: [customTransformer]
});

如需完全控制Rsbuild/Rslib配置：

import { defineDevConfig, type RsbuildConfigTransformer } from "@workleap/rsbuild-configs";

const customTransformer: RsbuildConfigTransformer = (config) => {
    config.tools = config.tools ?? {};
    // 修改配置
    return config;
};

export default defineDevConfig({
    transformers: [customTransformer]
});

Critical Rules

重要规则

Never invent APIs: Only suggest documented options and patterns
Respect maintenance mode: Do not recommend PostCSS, SWC, webpack, or tsup configs
ESM by default: All configs target ESM/ESNext unless migrating legacy code
Browserslist for apps only: Libraries should not include Browserslist config
TypeScript for linting: The shared TypeScript configs focus on linting; bundlers handle transpilation

切勿自创API：仅建议使用有文档记录的选项和模式
遵循维护模式：不推荐PostCSS、SWC、webpack或tsup配置
默认ESM：所有配置默认面向ESM/ESNext，除非迁移遗留代码
Browserslist仅用于应用：类库不应包含Browserslist配置
TypeScript用于检查：共享TypeScript配置专注于检查，转译由打包工具处理