---
title: 介绍
sidebar_position: 1
---

# Modern.js 介绍

**Modern.js 是字节跳动 Web 工程体系的开源版本**，它提供多个解决方案，来帮助开发者解决不同研发场景下的问题。

目前 Modern.js 包含三个解决方案，分别面向 Web 应用开发场景、npm 包开发场景和文档站开发场景：

import { SolutionCards } from '@site/src/components/SolutionCards';

<SolutionCards
  cards={[
    {
      title: 'Modern.js Framework',
      description: '基于 React 的渐进式 Web 开发框架',
      link: 'http://modernjs.dev/',
    },
    {
      title: 'Modern.js Module',
      description: '易用、高性能的 npm 包开发方案',
      link: 'http://modernjs.dev/module-tools/',
    },
    {
      title: 'Modern.js Doc',
      description: '基于 Rspack 的文档站解决方案',
      link: 'http://modernjs.dev/doc-tools/zh/',
    },
  ]}
/>

作为 Modern.js 工程体系的一部分，以上每个解决方案都可以被单独使用，并且各自部署了独立的文档站点。开发者可以按需选择其中的一个或多个解决方案来使用。

## 关于文档

**当前文档站对应的是 Modern.js 框架**，适用于开发 Web 应用。

- 如果你需要开发一个 npm 包，请移步至 [Modern.js Module](https://modernjs.dev/module-tools) 文档。
- 如果你需要开发一个文档站点，请移步至 [Modern.js Doc](https://modernjs.dev/doc-tools/zh) 文档。
- 如果你需要基于 Modern.js 的构建引擎来实现一个 Web 开发框架，请移步至 [Modern.js Builder](https://modernjs.dev/builder) 文档。

:::tip
由于 Modern.js 框架的使用最为广泛，在本文档站中，我们会省略「框架」，直接称其为 Modern.js。
:::

## Modern.js 框架

**Modern.js 框架是一个基于 React 的渐进式 Web 开发框架**。在字节跳动内部，我们将 Modern.js 封装为上层框架，并支撑了数千个 Web 应用的研发。

Modern.js 能为开发者提供极致的**开发体验（Development Experience）**，让应用拥有更好的**用户体验（User Experience）**。

在开发 React 应用过程中，开发者通常需要去为某些功能去设计实现方案，或是使用其他的库、框架来解决这些问题。Modern.js 支持 React 应用所需要的所有配置和工具，并内置**额外的功能和优化**。开发者可以使用 React 构建应用的 UI，然后逐步采用 Modern.js 的功能来解决常见的应用需求，如路由、数据获取、状态管理等。

它主要包含以下特性：

- 🚀 **Rust 构建**：提供双构建工具支持，轻松切换到 Rspack 构建工具，编译飞快。
- 🪜 **渐进式**：使用最精简的模板创建项目，通过生成器逐步开启插件功能，定制解决方案。
- 🏠 **一体化**：开发与生产环境 Web Server 唯一，CSR 和 SSR 同构开发，函数即接口的 API 服务调用。
- 📦 **开箱即用**：默认 TS 支持，内置构建、ESLint、调试工具，全功能可测试。
- 🌏 **周边生态**：自研状态管理、微前端、模块打包、Monorepo 方案等周边需求。
- 🕸 **多种路由模式**：包含自控路由、基于文件约定的路由（嵌套路由）等。

## 下一步

如果你希望了解如何使用 Modern.js 框架，可以尝试 [创建第一个应用](/tutorials/first-app/c01-start)，或是阅读 [快速上手](/guides/get-started/quick-start)。
