快速开始#

三分钟快速上手#

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

创建新项目#

如果你想要创建一个完整的 Modern.js Module 项目，可以执行以下命令：

npx @modern-js/create your-project-dir-name

接着在问题交互中，按照如下选择：

? 请选择你想创建的工程类型：Npm 模块
? 请填写项目名称：library
? 请选择开发语言：TS
? 请选择包管理工具：pnpm

项目名称为 package.json 中的 "name" 字段值。

接着就会开始初始化项目的流程。在项目目录和文件生成以及依赖安装完毕后，此时就创建了一个完整的 Modern.js Module 项目。

我们可以直接执行 pnpm build 命令启动项目的构建，执行 pnpm build --watch 命令开启构建的观察模式。

接入已有项目#

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

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

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：

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

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

查看官方示例#

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

git clone https://github.com/web-infra-dev/module-tools-examples
cd module-tools-example/base

## 执行构建：
pnpm build

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

## 启动 Storybook
pnpm dev storybook

## 测试
pnpm test

让我们开始吧#

选择适合你的教程：

• 我是初学者，需要学习 Modern.js Module 的基础使用。
• 我已经初步掌握了 Modern.js Module 的使用，可以学习 Modern.js Module 的进阶指南。
• 我需要扩展项目能力，需要学习如何开发 Modern.js Module 的插件。