Modern.js Module 微生成器使用指南

什么是微生成器

Modern.js Module 提供的微生成器是一个强大的项目脚手架工具，它能够智能地为项目添加新功能模块。与传统脚手架不同，微生成器专注于"微"操作，可以在现有项目基础上进行增量式功能增强，而不会破坏现有项目结构。

微生成器的核心能力

1. 文件系统操作：自动创建所需目录和文件
2. 依赖管理：智能修改 package.json 添加必要依赖
3. 命令集成：配置相关开发命令
4. 配置更新：提示必要的配置变更

如何使用微生成器

在 Modern.js Module 项目中，可以通过以下命令启动微生成器：

modern new

执行后会显示可用的生成器选项，用户可以通过交互式界面选择需要的功能。

主要功能详解

1. 模块文档功能

适用场景：当需要为模块编写专业文档时

功能特点：

• 自动创建标准化的 docs 文档目录结构
• 集成 Rspress 文档引擎
• 支持 Markdown 和 MDX 格式
• 提供本地开发和构建命令

生成内容：

• docs/ 目录及示例文档
• package.json 中添加 @modern-js/plugin-rspress 依赖
• 必要的配置提示

使用方式：

modern dev          # 开发模式运行文档
modern build --platform  # 构建文档站点

配置提示：生成后会提示需要在配置文件中添加插件：

import { moduleTools, defineConfig } from '@modern-js/module-tools';
import { modulePluginDoc } from '@modern-js/plugin-rspress';

export default defineConfig({
  plugins: [moduleTools(), modulePluginDoc()],
});

2. Storybook 调试功能

适用场景：组件开发时的可视化调试

功能特点：

• 集成最新版 Storybook
• 提供标准的 stories 目录结构
• 支持多种组件展示方式
• 完整的开发和生产构建支持

生成内容：

• stories/ 目录及示例
• .storybook/ 配置目录
• package.json 中添加 @modern-js/storybook 依赖

使用方式：

storybook dev    # 启动 Storybook 开发服务器
storybook build # 构建静态 Storybook 站点

3. Tailwind CSS 支持

适用场景：需要实用优先的 CSS 方案时

功能特点：

• 集成 Tailwind CSS 最新版本
• 预配置合理的默认值
• 支持自定义主题配置
• 与 Modern.js 构建流程深度集成

实现原理：

• 自动安装所需依赖
• 创建 tailwind.config.js 配置文件
• 配置 PostCSS 处理流程

最佳实践：

1. 使用 @apply 提取通用样式
2. 合理设计主题扩展点
3. 利用 JIT 模式获得最佳性能
4. 结合 CSS 变量实现动态主题

微生成器的优势

1. 标准化：遵循 Modern.js 最佳实践，确保项目结构一致
2. 安全性：非破坏性操作，不会覆盖现有文件
3. 智能化：自动处理依赖关系和版本兼容性
4. 可维护性：生成的代码清晰规范，易于后续维护

使用建议

1. 在干净的工作目录下执行生成操作
2. 执行前提交当前更改，便于回滚
3. 仔细阅读生成后的提示信息
4. 根据项目实际需求调整生成内容
5. 定期更新生成器创建的依赖项

通过 Modern.js Module 的微生成器，开发者可以快速为项目添加专业级功能模块，大幅提升开发效率和项目质量。这种模块化的功能增强方式，特别适合需要渐进式演进的中大型项目。