Modern.js 快速入门指南：从零开始构建现代 Web 应用
2025-07-08 06:51:35作者：庞眉杨Will
前言
Modern.js 是一个现代化的 Web 开发框架，它集成了前端开发中的最佳实践，提供了开箱即用的开发体验。本文将带你快速了解如何使用 Modern.js 创建、开发和部署一个完整的 Web 应用。
环境准备
在开始之前，请确保你的开发环境满足以下要求：
- Node.js：建议安装最新的 LTS 版本（16.x 或更高）
- 包管理器：推荐使用 pnpm，也可以选择 npm 或 yarn
- 代码编辑器：VS Code 或其他现代编辑器
项目创建
Modern.js 提供了便捷的项目创建工具，无需全局安装任何依赖：
# 在空目录中创建项目
mkdir myapp && cd myapp
npx @modern-js/create@latest
# 或者直接指定项目目录
npx @modern-js/create@latest myapp
执行命令后，交互式命令行会引导你完成项目配置：
- 选择项目类型（Web 应用、模块、Monorepo 等）
- 选择编程语言（TypeScript 或 JavaScript）
- 选择包管理器（pnpm、npm 或 yarn）
- 选择是否需要额外的功能（如测试、微前端等）
项目结构解析
创建完成后，你会得到一个标准的 Modern.js 项目结构：
myapp/
├── src/ # 源代码目录
├── modern.config.ts # 项目配置文件
├── package.json # 项目依赖和脚本
└── tsconfig.json # TypeScript 配置
开发流程
启动开发服务器
pnpm run dev
执行后，Modern.js 会：
- 启动开发服务器
- 自动打开浏览器（默认 http://localhost:8080）
- 启用热模块替换（HMR）功能
- 提供完整的错误提示和编译信息
核心配置文件
modern.config.ts 是 Modern.js 的核心配置文件，支持 TypeScript 类型提示：
import { appTools, defineConfig } from '@modern-js/app-tools';
export default defineConfig({
runtime: {
router: true, // 启用客户端路由
},
server: {
ssr: true, // 启用服务端渲染
},
plugins: [
appTools({
bundler: 'webpack', // 可选 'experimental-rspack' 启用 Rspack
}),
],
});
核心功能包
Modern.js 的核心功能通过 @modern-js/app-tools 提供：
- 开发工具：提供 dev、build 等 CLI 命令
- 构建系统：基于 Webpack 或 Rspack 的优化构建
- 服务器：集成开发和生产服务器
- 插件系统：支持扩展核心功能
构建与部署
生产构建
pnpm run build
构建完成后，会在 dist/ 目录生成优化后的静态资源：
- 自动代码分割
- 资源哈希处理
- 压缩优化
- 生成 manifest 文件
本地验证
pnpm run serve
此命令会启动生产环境服务器，用于验证构建结果是否正常。
部署建议
Modern.js 应用可以部署到各种平台：
- 静态托管：Vercel、Netlify、GitHub Pages 等
- Node.js 服务器：需要 SSR 支持时
- 容器化部署：Docker + Kubernetes
部署时只需上传 dist/ 目录内容即可。
进阶功能
Modern.js 还提供了许多高级功能：
- 微前端支持：轻松集成微前端架构
- API 路由：无需额外配置即可创建 API
- 数据加载：内置数据获取方案
- 测试集成：开箱即用的测试支持
- 国际化：多语言支持
总结
通过本文，你已经学会了：
- 如何创建 Modern.js 项目
- 项目的基本结构和配置
- 开发流程和常用命令
- 构建和部署方法
Modern.js 的设计理念是"约定优于配置"，提供了合理的默认值，同时保持高度的可定制性。随着项目的深入，你可以逐步探索更多高级功能和插件系统，打造更强大的 Web 应用。
建议下一步：
- 尝试修改配置文件体验不同功能
- 探索 Modern.js 的插件系统
- 了解如何自定义路由和布局
- 学习如何集成状态管理方案
