# Modernjs Feature Enable

> 在已有的 Modern.js 3.0 应用里启用可选功能：自动启用 BFF、SSG、styled-components，并脚手架化 Tailwind CSS、自定义 Web Server。v3 已移除 `modern new`，本 skill 是其手动等价物：装插件 + 改 modern.config + 必要的 tsconfig/scaffold/report。在「想给现有 Modern.js 项目加 BFF/SSG/Tailwind/自定义 Web Server 等能力」时使用。

- Skill: `web-infra-dev/modernjs-feature-enable` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add web-infra-dev/modernjs-feature-enable`
- Raw SKILL.md: https://api.skillmd.com/api/skills/web-infra-dev/modernjs-feature-enable/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: web-infra-dev (https://skillmd.com/u/web-infra-dev)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/web-infra-dev/modernjs-feature-enable

---


# Enable Modern.js Features

为**已有的 Modern.js v3 应用**启用可选功能。

> ⚠️ **`modern new` 在 Modern.js 3.0 已移除**（见 `packages/document/docs/zh/guides/upgrade/other.md:107`、`:111`：「移除了 `modern new` 和 `modern upgrade` 命令，需要按照文档手动操作」「`modern new` 命令在 Modern.js 3.0 中不再支持，无法通过命令添加入口或启用功能」）。
> `packages/document/docs/{zh,en}/apis/app/commands.mdx` 里残留的 `## modern new` 是 **stale doc**，不可作为现行依据，**不要让用户去跑 `modern new`**。本 skill 即官方推荐的「按文档手动操作」的自动化等价物。

## 能力矩阵（按自动化级别分层）

> **不是「Modern.js v3 只能启用这几个」**。v3 里很多能力是**内置约定/配置**（Less/Sass 默认支持、Data Loader 是 `.data.ts` 约定、SSR/RSC 是配置/架构选择），不存在「启用插件」这一步，故不在本矩阵；微前端是架构决策。本 skill 覆盖的是「装插件/改配置就能开」的可选能力。

| 功能 | 参数值 | 级别 | 现行依据（当前仓库文档） |
| --- | --- | --- | --- |
| BFF（一体化后端） | `bff` | ✅ 可自动启用 | `guides/advanced-features/bff/function.mdx`、`components/enable-bff.mdx` |
| 静态站点生成 SSG | `ssg` | ✅ 可自动启用 | `components/enable-ssg.mdx`、`configure/app/output/ssg.mdx` |
| styled-components | `styled-components` | ✅ 可自动启用 | `cli/plugin-styled-components`、`plugin/official/cli-plugins/plugin-styled-components.mdx` |
| Tailwind CSS（v3） | `tailwindcss` | 🛠 脚手架（骨架自动 + 语义人工） | `guides/basic-features/css/tailwindcss.mdx`（Rsbuild 原生，非 @modern-js 插件） |
| 自定义 Web Server | `server` | 🛠 脚手架（骨架自动 + 语义人工） | `guides/advanced-features/web-server.mdx`、`@modern-js/server-runtime` |

> ✅ 可自动启用 = 装依赖 + modern.config 插件 + 必要文件，全自动闭环。
> 🛠 脚手架 = 自动生成可构建骨架（server/modern.server.ts 含 middlewares/renderMiddlewares/plugins/onError 字段 + 示例注释；tailwind 的 config/postcss/css）+ 依赖，但业务语义（server 中间件逻辑、tailwind 的 CSS 接入与 v3·v4 选择）需人工补，report 会写清。
> **微前端不在本矩阵的「可启用项」里**（v3 无 plugin-garfish，是 Module Federation / `masterApp` 架构决策）；它仍是 Modern.js 能力，`enable.mjs microFrontend` 会输出独立方案的可执行 checklist，详见 `references/other-features.md`，不会让用户以为「没这功能」。

## 执行步骤

### 步骤 1：扫描项目

```bash
node scripts/scan.mjs <projectDir>
```

产出 `context.json`：判定是否 v3（v2 项目先用 `modernjs-migrate-to-v3` 升级）、列出各功能当前是否已启用、是否支持自动化。

### 步骤 2：启用功能

> **执行纪律（重要）**：仅当用户**明确说「启用 X / enable X」且项目目录明确、scan 判定为 v3** 时，才
> **立即直接运行** `node scripts/enable.mjs X <projectDir>`——不要只描述、不要等二次确认、不要停在「我会执行…」就没动作，一条命令改完源文件。
> **反之**：用户只是问「为什么 / 能启用哪些 / 扫描一下 / 当前状态」时，**只跑 `scan.mjs` 给能力矩阵与报告，绝不改文件**。
>
> **一步到位（依赖自动安装）**：默认带 `--install`，启用完直接可 `modern dev/build`，不用用户再手动装依赖：
> `node scripts/enable.mjs X <projectDir> --install`。
> **但**遇到以下情况**先不要带 `--install`**（只跑 enable，把 install 命令告诉用户）：工作区有**未提交的
> lockfile 改动**、**离线/无法联网**、或包管理器不明确——因为 install 会改 lockfile、耗时、依赖网络。

**BFF（自动化）**（默认带 `--install` 一步到位；异常情况按上方执行纪律去掉 `--install`）：

```bash
node scripts/enable.mjs bff <projectDir> --install
```

自动完成（依据 `components/enable-bff.mdx`）：

- **依赖**：添加 `@modern-js/plugin-bff`，版本与 `@modern-js/app-tools` 保持一致（官方包统一版本号）
- **配置**：`modern.config.*` 顶层 `plugins` 追加 `bffPlugin()`（已有则幂等跳过）
- **tsconfig**：添加 `paths["@api/*"] = ["./api/lambda/*"]` 与 `include` 增加 `api`（非标准 JSON 则进人工清单）
- **端到端示例**（依据 `bff/function.mdx`）：生成/复用 `api/lambda/hello.ts`（`export const get`，已有 api 不覆盖、优先复用已有 GET/default），并**接进真实页面**——默认模板首页可安全替换则改 `src/routes/page.tsx`（`import { get as hello } from '@api/hello'` + `useEffect`），已有业务首页则新建 `src/routes/bff-demo/page.tsx`（report 写清访问路径）；非约定式路由进人工清单给出示例

查看 `.agents/runs/modernjs-feature-enable/report.json` 的 `changed` / `manual`。

**其它能力**：`styled-components`（插件，自动）、`tailwindcss`（Rsbuild 原生脚手架）、`server`（生成 `server/modern.server.ts` 骨架 + `@modern-js/server-runtime` + tsconfig include，业务语义人工）、`microFrontend`（输出可执行 checklist）。

**SSG（自动化）**（同样默认带 `--install`）：

```bash
node scripts/enable.mjs ssg <projectDir> --install
```

自动完成（依据 `components/enable-ssg.mdx`）：添加 `@modern-js/plugin-ssg`（同 app-tools 版本）、`plugins` 追加 `ssgPlugin()`、顶层 `output` 合并 `ssg: true`（已有 output 不覆盖其它字段）。详见 `references/enable-ssg.md`。

> CJS（`module.exports`/`require`）配置会插入 `const { xxxPlugin } = require(...)`；插入失败或无法确定绑定时进人工清单，不写运行时未定义的半成品。

**其它功能（manual）**：读 `references/other-features.md`，按当前文档手动启用。

### 步骤 3：安装依赖 + 验证

读 `references/install-dependencies.md` 选包管理器安装，然后 `modern dev` / `modern build` 验证。

## 安全红线

- 改写优先结构化；解析不了（非标准 JSON、定位不到配置对象）一律进人工清单，不盲改。
- 不覆盖已有 `api/` 等用户文件；已启用的功能幂等跳过。
- 报告区分 `changed`（已自动改写）/ `manual`（需人工）；遇到 `modern new` 这类废弃路径明确标注，不引导用户使用。