workleap-web-configs について
workleap-web-configsは、Webツール向けのWorkleap共通設定ライブラリです。Webアプリやライブラリを開発するチーム向けに、Lint、型チェック、ブラウザー対象、バンドルの拡張可能な初期設定を提供します。
主な機能
- 01共有ESLint設定
- 02TypeScript型チェック設定
- 03StylelintとBrowserslist設定
- 04RsbuildとRslibのバンドラー設定
- 05拡張・上書き可能な初期設定
活用シーン
- 01WebアプリのLint設定
- 02ライブラリの型チェック設定
- 03アプリのブラウザー対象の指定
- 04RsbuildまたはRslibのビルド設定
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ workleap/ wl-web-configs --skill workleap-web-configsインストール後、Claude Code で/workleap-web-configsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/ci.mdeslint.mdrsbuild.mdrslib.mdstylelint.mdtypescript.md詳細
wl-web-configs
Web ツール向けの Workleap 共有設定ライブラリです。ESLint、TypeScript、Rsbuild、Rslib、Stylelint、Browserslist 向けの事前設定済みパッケージを提供します。
基本方針
- ロックインなし:デフォルト設定は常に拡張または上書きできます
- プロジェクトの種類別:設定は内部で構成され、使いやすいようプロジェクトの種類ごとに提供されます
- デフォルトで ESM/ESNext:最新の JavaScript 環境を対象とします
- NPM 経由で配布:パッケージのバージョンを上げるだけで、新機能を簡単に導入できます
サポート対象ツール(アクティブ)
| ツール | パッケージ | 用途 |
|---|---|---|
| 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
クイックリファレンス
使用する設定の選び方
| プロジェクトの種類 | 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 | N/A |
Browserslist(アプリのみ)
pnpm add -D @workleap/browserslist-config browserslist
# .browserslistrc
extends @workleap/browserslist-config
アプリケーションのバンドルを出力するプロジェクトでのみ使用してください。ライブラリには Browserslist を含めないでください。最終的な出力対象は、利用側アプリケーションの Browserslist によって制御されます。
共有設定を使用しながらカスタムのブラウザー対象を追加するには、次のようにします。
# .browserslistrc
extends @workleap/browserslist-config
IE 11
last 2 OperaMobile 12.1 versions
リファレンスガイド
包括的なセットアップガイド、オプション、例については、該当するリファレンスファイルをお読みください。
- ESLint — references/eslint.md:インストール、
define*Config関数、ルールのカテゴリ、カスタマイズ、VS Code との統合、ESLint 8 からの移行 - TypeScript — references/typescript.md:プロジェクトの種類別の設定ファイル、コンパイラーオプションの上書き、パスマッピング、CLI スクリプト、
tsgoへの移行 - Rsbuild — references/rsbuild.md:開発/ビルド/Storybook の設定、事前定義オプション、トランスフォーマー、Turborepo のセットアップ、webpack からの移行
- Rslib — references/rslib.md:ライブラリのビルド/開発/Storybook の設定、バンドルレスとバンドル、トランスフォーマー、型宣言、tsup からの移行
- Stylelint — references/stylelint.md:インストール、
.stylelintrc.jsonのセットアップ、Prettier との統合、VS Code の設定 - CI — references/ci.md:ポリレポおよび Turborepo ソリューション向け GitHub Actions ワークフロー。Turborepo のキャッシュと PR フィルターを含みます
重要なルール
- ドキュメントに記載された API を使用してください — これらのパッケージは薄いラッパーであり、ドキュメントに記載されていないオプションは基盤となるツールに渡されません
- メンテナンスモードのパッケージは避けてください — PostCSS、SWC、webpack、tsup の設定には新機能が追加されません。代わりにアクティブな代替ツール(Rsbuild、Rslib、Stylelint)を推奨してください
- デフォルトで ESM — Workleap のツールチェーンは最新の JavaScript 環境を前提としているため、すべての設定は ESM/ESNext を対象とします
- Browserslist はアプリのみ — 最終的な出力対象は利用側アプリケーションの設定で制御されるため、ライブラリでは Browserslist を省略します
- TypeScript はリント用 — 共有 TypeScript 設定は型チェックに重点を置いています。トランスパイルはバンドラーが処理するため、役割を混在させないでください
コメント
Markdown 対応