docs/docs/docs/guides/generator.en-US.md
Umi comes with numerous micro generators to assist you in quickly completing some tedious work during development.
The command below will list all currently available generators, which you can select through an interactive way, with detailed prompts provided.
$ umi generate
# Or
$ umi g
You can also use a specific generator by umi g <generatorName>.
Quickly generate a new page, with multiple usage methods available.
Interactive input of page name and file generation method:
$umi g page
? What is the name of page? › mypage
? How dou you want page files to be created? › - Use arrow-keys. Return to submit.
❯ mypage/index.{tsx,less}
mypage.{tsx,less}
Direct generation:
$umi g page foo
Write: src/pages/foo.tsx
Write: src/pages/foo.less
Generate a page in directory mode, with the directory containing the page's component and style files:
$umi g page bar --dir
Write: src/pages/bar/index.less
Write: src/pages/bar/index.tsx
Nested generation of pages:
$umi g page far/far/away/kingdom
Write: src/pages/far/far/away/kingdom.tsx
Write: src/pages/far/far/away/kingdom.less
Batch generation of multiple pages:
$umi g page page1 page2 a/nested/page3
Write: src/pages/page1.tsx
Write: src/pages/page1.less
Write: src/pages/page2.tsx
Write: src/pages/page2.less
Write: src/pages/a/nested/page3.tsx
Write: src/pages/a/nested/page3.less
If the page generator's default template does not meet your needs, you can customize the template content.
Execute --eject command:
$umi g page --eject
After the command is executed, the page generator will write its original template into the project's /templates/page directory:
.
├── package.json
└── templates
└── page
├── index.less.tpl
└── index.tsx.tpl
Both template files support template syntax, you can insert variables like this:
import React from 'react';
import './{{{name}}}.less'
const message = '{{{msg}}}'
const count = {{{count}}}
Customize argument values:
$umi g page foo --msg "Hello World" --count 10
After running the command, the generated page content is as follows:
import React from 'react';
import './foo.less'
const message = 'Hello World'
const count = 10
If you do not need to use template variables, you can omit the .tpl suffix, shorten index.tsx.tpl to index.tsx, and index.less.tpl to index.less.
In the content generated in the previous section, we did not specify name, but it was still set to a value. This is because it belongs to the template's preset variables, below are all the preset variables currently available in the page template:
| Parameter | Default Value | Description |
|---|---|---|
name | - | The name of the current file. If you execute pnpm umi g page foo, it will generate pages/foo.tsx and pages/foo.less files, where the value of name is "foo". |
color | - | Generates a random RGB color. |
cssExt | less | The file extension of the style sheet. |
To learn more about the template syntax, please refer to mustache.
dir ModeWithout using dir mode, if your page template folder only customizes one template file, missing files will automatically select the default template file.
If you use dir mode, its generated content will be consistent with your page custom template folder, and will only use the default template if your page custom template folder is empty. If your page custom template folder content is as follows:
.
├── a.tsx
└── index.tsx.tpl
The generated directory will be:
.
├── a.tsx
└── index.tsx
If you still want to continue using the default template, you can specify --fallback, and the user-defined template will no longer be used:
$umi g page foo --fallback
Generate needed components in the src/components/ directory. Like the page generator, the component generator also has multiple generation methods.
Interactive generation:
$umi g component
✔ Please input you component Name … foo
Write: src/components/Foo/index.ts
Write: src/components/Foo/component.tsx
Direct generation:
$umi g component bar
Write: src/components/Bar/index.ts
Write: src/components/Bar/component.tsx
Nested generation:
$umi g component group/subgroup/baz
Write: src/components/group/subgroup/Baz/index.ts
Write: src/components/group/subgroup/Baz/component.tsx
Batch generation:
$umi g component apple banana orange
Write: src/components/Apple/index.ts
Write: src/components/Apple/component.tsx
Write: src/components/Banana/index.ts
Write: src/components/Banana/component.tsx
Write: src/components/Orange/index.ts
Write: src/components/Orange/component.tsx
Similar to the Page Generator, the component generator also supports customizing the template content. First, write the original template into the project's /templates/component directory:
$umi g component --eject
$umi g component foo --msg "Hello World"
Custom component templates can omit the .tpl suffix. You can shorten index.ts.tpl to index.ts, and component.tsx.tpl to component.tsx.
The component generator will generate content consistent with your custom template folder, and you can add more custom template files as needed.
| Parameter | Default Value | Description |
|---|---|---|
compName | - | The name of the current component. If you execute pnpm umi g component foo, the value of compName is Foo. |
$umi g component foo --fallback
Generate template files for the routeAPI feature.
Interactive generation:
$umi g api
✔ please input your api name: … starwar/people
Write: api/starwar/people.ts
Direct generation:
$umi g api films
Write: api/films.ts
Nested generator:
$umi g api planets/[id]
Write: api/planets/[id].ts
Batch generation:
$umi g api spaceships vehicles species
Write: api/spaceships.ts
Write: api/vehicles.ts
Write: api/species.ts
Generate template files for the Mock feature, refer to the documentation for the specific implementation of mock.
Interactive generation:
$umi g mock
✔ please input your mock file name … auth
Write: mock/auth.ts
Direct generation:
$umi g mock acl
Write: mock/acl.ts
Nested generation:
$umi g mock users/profile
Write: mock/users/profile.ts
Generate prettier configuration for the project, after executing the command, umi will generate recommended prettier configuration and install related dependencies.
$umi g prettier
info - Write package.json
info - Write .prettierrc
info - Write .prettierignore
Generate jest configuration for the project, after executing the command, umi will generate Jest configuration and install related dependencies. Choose whether to use @testing-library/react for UI testing as needed.
$umi g jest
✔ Will you use @testing-library/react for UI testing?! … yes
info - Write package.json
info - Write jest.config.ts
Enable Tailwind CSS configuration for the project, after executing the command, umi will generate Tailwind CSS and install related dependencies.
$umi g tailwindcss
info - Write package.json
set config:tailwindcss on /Users/umi/playground/.umirc.ts
set config:plugins on /Users/umi/playground/.umirc.ts
info - Update .umirc.ts
info - Write tailwind.config.js
info - Write tailwind.css
Enable Dva configuration for the project, after executing the command, umi will generate Dva.
$umi g dva
set config:dva on /Users/umi/umi-playground/.umirc.ts
set config:plugins on /Users/umi/umi-playground/.umirc.ts
info - Update config file
info - Write example model
Generate precommit configuration for the project, after executing the command, umi will add husky and Git commit message format validation behavior, default formatting the Git staging area code before each Git commit.
Note: If it is an initialized
@umijs/maxproject, usually this generator is not needed, as husky is already configured.
$umi g precommit
info - Update package.json for devDependencies
info - Update package.json for scripts
info - Write .lintstagedrc
info - Create .husky
info - Write commit-msg
info - Write pre-commit