Guide
Config
Plugin
API
Tutorials
Community
Guide
Config
Plugin
API
Tutorials
Community

Introduction

There are two types of generator plugin:

  • Extension: Web App(Npm Module) = Web App(Npm Module) + Generator Plugin

  • Custom: New Application(Npm Module) = Web App(Npm Module) + Generator Plugin

In simpler terms, extension means using the original project name of Modern.js, while custom means creating a new name.

Identifier

The type of generator plugin is provided through the meta field in package.json:

Extension

package.json
{
 "meta": {
    "extend": "mwa" // module
 }
}

Custom

package.json
{
 "meta": {
    "key": "new_app",
    "name": "new App",
    "type": "mwa" // module and custom
 }
}
INFO

For custom type, the type field supports the custom value, which utilizes some best practice templates for project development provided by Modern.js, such as .gitignore, .editorConfig, etc. Other business-related code templates need to be manually provided through generator plugin.

Creating Initial Project

Extension

npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
? Please select the type of project you want to create: Npm Module
? Please select the project scenario: Generator Plugin
? Please fill in the package name of the generator plugin: plugin
? Please select the programming language: TS
? Please select the package manager: pnpm
? Please select the type of plugin: extend
? Please select the base type of the plugin: Web App

Custom

npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
? Please select the type of project you want to create: Npm Module
? Please select the project scenario: Generator Plugin
? Please fill in the package name of the generator plugin: plugin
? Please select the programming language: TS
? Please select the package manager: pnpm
? Please select the type of plugin: custom
? Please fill in the plugin keyword: new_app
? Please fill in the display name of the plugin: new App
? Please select the base type of the plugin: Web App

Execution Order

Generator plugins support using multiple plugins at the same time, which means that multiple --plugin parameters are supported when executing @modern-js/create.

Extension

For extension generator plugins, when executing with the declared generator plugin parameters, the corresponding lifecycle functions of the project scheme that is extended will be executed in order.

For example, if there are two generator plugins A and B, both of which extend the Modern.js application scheme. A plugin declares to add the a.ts file, and B plugin declares to add the b.ts file. When executing npx @modern-js/create@latest --plugin A --plugin B, and selecting the Web APP scheme, the default project files of the Web APP will be generated first. Then, the A plugin will create the a.ts file, and then the B plugin will generate the b.ts file.

Custom

For custom generator plugins, only one plugin can be executed at a time. When declaring the --plugin parameter for @modern-js/create, a selection option for the scenario of choosing the project scheme will be added after selecting the project scheme, which is the new name defined in the package.json. Choosing the corresponding generator plugin for the name will execute the corresponding generator plugin logic after the default project scheme is completed. When declaring the --plugin parameter, the corresponding generator plugin names will be listed one by one for selection in the project scheme scenario.