简体中文

快速开始

TIP

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

Modern.js 后续将专注于构建一流的全栈 React 框架，Modern.js Module 会被逐渐废弃。我们已经为 Modern.js Module 项目提供了迁移指南，你可以参考该指南将 Modern.js Module 项目迁移到 Rslib。

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

三分钟快速上手

想要实际体验 Modern.js Module？首先你需要安装 Node.js LTS，并确保 Node 版本大于等于 16.0.0。我们推荐使用 Node.js 18 的 LTS 版本。

接入已有项目

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

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

npm

yarn

pnpm

bun

npm add @modern-js/module-tools typescript -D

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

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

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

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

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

{
  "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：

modern.config.ts

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

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

查看官方示例

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

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 的基础使用。
我已经初步掌握了 Modern.js Module 的使用，可以学习 Modern.js Module 的进阶指南。
我需要扩展项目能力，需要学习如何开发 Modern.js Module 的插件。

快速开始#

三分钟快速上手#

接入已有项目#

核心 npm 包#