Modern.js Module
Guide
API
Plugins
Guide
API
Plugins

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 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 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 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.

npm
yarn
pnpm
bun
npm 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.

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.

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

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.

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 of Modern.js Module.
  • I have learned the basic usage of Modern.js Module and can learn advanced usage of Modern.js Module.
  • I need to expand my project capabilities and need to learn how to develop plugins for Modern.js Module.