---
sidebar_position: 3
---

# 快速开始

:::tip

我们不再推荐创建新的 Modern.js Module 项目，因为我们已经基于 Rsbuild 开发了 Rslib，它是下一代的 Library 开发工具，将提供更好的构建性能和插件生态，你可以参考 [Rslib 仓库](https://github.com/web-infra-dev/rslib) 了解更多信息。

Modern.js 后续将专注于构建一流的全栈 React 框架，Modern.js Module 会被逐渐废弃。我们已经为 Modern.js Module 项目提供了 [迁移指南](https://rslib.rs/guide/migration/modernjs-module)，你可以参考该指南将 Modern.js Module 项目迁移到 Rslib。

Modern.js Module 的 npm 包和文档将继续保持可用，我们不再向 Modern.js Module 添加新功能，但会提供必要的 bug fixes。

:::

## 三分钟快速上手

想要实际体验 Modern.js Module？首先你需要安装 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **16.0.0**。我们推荐使用 Node.js 18 的 LTS 版本。

### 接入已有项目

在你的项目里安装以下依赖：

- `"@modern-js/module-tools"`
- `"typescript"`（如果不是 TypeScript 项目，则省略）

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @modern-js/module-tools typescript -D" />

> 对于使用 pnpm 或者 Yarn 包管理器的项目，只需要替换 npm 就可以了。**推荐使用 pnpm**。

接着在项目的根目录下创建 `modern.config.(t|j)s` 文件：

```ts
import { moduleTools, defineConfig } from '@modern-js/module-tools';

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

最后在项目的 `package.json` 文件里增加命令 `"build": "modern build"`：

```json
{
  "scripts": {
    "build": "modern build"
  }
}
```

如果你的项目存在 `src/index.(js|jsx)` 文件或者同时存在 `src/index.(ts|tsx)` 和 `tsconfig.json` 文件，那么恭喜你可以运行直接运行 `npm run build` 来使用 Modern.js Module 构建你的项目了。

### 核心 npm 包

`@modern-js/module-tools` 是 Modern.js Module 的核心 npm 包，主要提供以下能力：

- 提供 `modern dev`, `modern build` 等常用的 CLI 命令。
- 集成 Modern.js Core，提供配置解析、插件加载等能力。
- 集成 esbuild 和 SWC，提供构建能力。
- 集成一些最为常用的插件，比如 `plugin-lint`、`plugin-changeset` 等。

`@modern-js/module-tools` 是基于 Modern.js 的插件体系实现的，本质上是一个插件，因此你需要在配置文件的 `plugins` 字段中注册 `moduleTools`：

```ts title="modern.config.ts"
import { moduleTools, defineConfig } from '@modern-js/module-tools';

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

### 查看官方示例

**如果你想要看看使用了 Modern.js Module 的完整项目，可以执行以下命令**：

```bash
git clone https://github.com/web-infra-dev/modern-js-examples
cd modern-js-examples/examples/basic-module

## 执行构建：
pnpm build

## 监听模式执行构建：
pnpm build --watch
```

## 让我们开始吧

选择适合你的教程：

- 我是初学者，需要学习 Modern.js Module 的[基础使用](/guide/basic/before-getting-started)。
- 我已经初步掌握了 Modern.js Module 的使用，可以学习 Modern.js Module 的[进阶指南](/guide/advance/in-depth-about-build)。
- 我需要扩展项目能力，需要学习如何开发 Modern.js Module 的[插件](/plugins/guide/getting-started)。