---
sidebar_position: 3
---

# Quick Start

:::tip

We no longer recommend creating new Modern.js Module projects, as we have developed Rslib based on Rsbuild, which is the next-generation Library development tool that will provide better build performance and plugin ecosystem. You can refer to the [Rslib repository](https://github.com/web-infra-dev/rslib) for more information.

Modern.js will focus on building a first-class full-stack React framework, and Modern.js Module will be gradually deprecated. We have provided a [migration guide](https://rslib.rs/guide/migration/modernjs-module) for Modern.js Module projects, which you can follow to migrate your Modern.js Module project to Rslib.

The npm packages and documentation for Modern.js Module will remain available. We will no longer add new features to Modern.js Module but will provide necessary bug fixes.

:::

## 3 minute demo

Want to experience Modern.js Module in action? The only prerequisite you need is [Node.js LTS](https://github.com/nodejs/Release) and make sure your Node version is **>= 16.0.0**.We recommend using the LTS version of Node.js 18.

### Add to an existing project

From your shell, install the following dependencies in your project.

- `@modern-js/module-tools`
- `"typescript"` (omitted if not a TypeScript project)

> If it's a TypeScript project, add the `"typescript"` dependency.

import { PackageManagerTabs } from '@theme';

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

> For projects that use pnpm or the Yarn package manager, just replace npm. **pnpm is recommended**.

Next, create the `modern.config.(t|j)s` file in the root of the project.

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

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

Finally, add the command `"build": "modern build"` to the project's `package.json` file.

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

If your project has a `src/index.(js|jsx)` file or both `src/index.(ts|tsx)` and `tsconfig.json` files, then congratulations you can run the `npm run build` command directly to build your project with Modern.js Module.

### Core npm Package

`@modern-js/module-tools` is the core npm package of Modern.js Module, providing the following capabilities:

- It offers commonly used CLI commands such as `modern dev`, `modern build`, and more.
- It integrates Modern.js Core, providing capabilities for configuration parsing, plugin loading, and more.
- It integrates esbuild and SWC, providing build capabilities.
- It integrates some commonly used plugins, such as `plugin-lint`, `plugin-changeset`, and others.

`@modern-js/module-tools` is implemented based on the plugin system of Modern.js. Essentially, it is a plugin. Therefore, you need to register `moduleTools` in the `plugins` field of the configuration file:

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

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

### View official example

**If you want to see the complete project using the Modern.js Module, you can execute the following command**.

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

## Execute the build.
pnpm build

## Execute the build in listening mode.
pnpm build --watch
```

## Let's get started

Choose your tutorial scenario...

- I'm a beginner and need to learn [basic usage](/en/guide/basic/before-getting-started) of Modern.js Module.
- I have learned the basic usage of Modern.js Module and can learn [advanced usage](/en/guide/advance/in-depth-about-build) of Modern.js Module.
- I need to expand my project capabilities and need to learn how to develop [plugins](/en/plugins/guide/getting-started) for Modern.js Module.