@modern-js/main-doc 2.19.2-alpha.0 → 2.20.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @modern-js/main-doc
 
+## 2.20.0
+
+### Patch Changes
+
+- 3c4e0a5: chore(utils): move generateMetaTags method to builder-shared
+
+  chore(utils): 移动 generateMetaTags 方法到 builder-shared
+
+- 0ce52ad: docs(main): optimize mobile adaptation
+
+  docs(main): 优化移动端适配
+
+  - @modern-js/builder-doc@2.20.0
+
 ## 2.19.1
 
 ### Patch Changes

package/docs/en/components/init-rspack-app.mdx

@@ -1,5 +1,5 @@
 ```bash
-$ npx @modern-js/create myapp
+$ npx @modern-js/create@latest myapp
 ? Please select the solution you want to create: Web App
 ? Development Language: TS
 ? Package Manager: pnpm

package/docs/en/components/ua-polyfill.mdx

@@ -0,0 +1,40 @@
+
+### Polyfill At Runtime
+
+Modern.js also provides a runtime Polyfill solution based on browser [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) information, which has the following advantages over Babel:
+
+- It will not be inserted into the code, reducing the code .
+- The same browser will share a Polyfill code. Therefore, with more and more projects, the UA-based Polyfill code will be delivered faster and faster.
+
+exec `pnpm run new` to enable this features:
+
+```bash
+? Action Enable features
+? Enable features Enable UA-based Polyfill Feature
+```
+
+After executing the command, register the Polyfill plugin in `modern.config.ts`:
+
+```ts title="modern.config.ts"
+import polyfillPlugin from '@modern-js/plugin-polyfill';
+
+export default defineConfig({
+  plugins: [..., polyfillPlugin()],
+});
+```
+
+After configuring `output.polyfill` as `ua` and executing `pnpm run build & & pnpm run serve` to start the server, visiting the page can see that the HTML product contains the following script:
+
+```js
+<script src="/__polyfill__" crossorigin></script>
+```
+
+Visit the page `http://localhost:8080/__polyfill__` on Chrome 51 to see:
+
+![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
+
+:::caution
+This feature only works when using Modern.js built-in Web Server.
+
+If you need to customize the HTML template, please refer to [HTML Template](/guides/basic-features/html.html). Manually modifying the template through html.template / tools.html will cause this feature not work.
+:::

package/docs/en/configure/app/output/temp-dir.mdx

@@ -0,0 +1,24 @@
+---
+sidebar_label: tempDir
+---
+
+# output.tempDir
+
+- **Type:** `string`
+- **Default:** `''`
+
+When developing or building a project, Modern.js generates real Webpack entries and HTML templates, placing them in a temporary directory.
+
+If you want to start a project with multiple configurations at the same time, you can use this configuration to generate files in different temporary directories to avoid interference with each other.
+
+The configuration can be a relative or absolute path, but paths outside the project should be avoided.
+
+Example:
+
+```ts
+export default {
+  output: {
+    tempDir: path.join('node_modules', '.temp-dir'),
+  }
+}
+```

package/docs/en/guides/advanced-features/compatibility.mdx

@@ -1,8 +1,26 @@
 ---
-title: Compatibility
 sidebar_position: 5
 ---
-# Compatibility
+
+# Browser Compatibility
+
+## Browserslist Configuration
+
+Modern.js supports setting the browserslist for your web applications. You can set the [Browserslist](https://browsersl.ist/) in the `.browserslistrc` file.
+
+When you create a new Modern.js project, it includes a `.browserslistrc` configuration by default, which means that JavaScript code will be compiled to ES6.
+
+```yaml title=".browserslistrc"
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10
+```
+
+:::tip
+Please refer to [Modern.js Builder - Browserslist](https://modernjs.dev/builder/en/guide/advanced/browserslist) for more information.
+:::
 
 ## Browserslist
 
@@ -38,42 +56,6 @@ For case where Polyfill is not required for third-party dependencies, you can se
 
 :::
 
-### Polyfill At Runtime
-
-Modern.js also provides a runtime Polyfill solution based on browser [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) information, which has the following advantages over Babel:
-
-- It will not be inserted into the code, reducing the code .
-- The same browser will share a Polyfill code. Therefore, with more and more projects, the UA-based Polyfill code will be delivered faster and faster.
-
-exec `pnpm run new` to enable this features:
-
-```bash
-? Action Enable features
-? Enable features Enable UA-based Polyfill Feature
-```
+import UAPolyfill from '@site-docs-en/components/ua-polyfill';
 
-After executing the command, register the Polyfill plugin in `modern.config.ts`:
-
-```ts title="modern.config.ts"
-import polyfillPlugin from '@modern-js/plugin-polyfill';
-
-export default defineConfig({
-  plugins: [..., polyfillPlugin()],
-});
-```
-
-After configuring `output.polyfill` as `ua` and executing `pnpm run build & & pnpm run serve` to start the server, visiting the page can see that the HTML product contains the following script:
-
-```js
-<script src="/__polyfill__" crossorigin></script>
-```
-
-Visit the page `http://localhost:8080/__polyfill__` on Chrome 51 to see:
-
-![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
-
-:::caution
-This feature only works when using Modern.js built-in Web Server.
-
-If you need to customize the HTML template, please refer to [HTML Template](/guides/basic-features/html.html). Manually modifying the template through html.template / tools.html will cause this feature not work.
-:::
+<UAPolyfill />

package/docs/en/guides/get-started/quick-start.mdx

@@ -19,13 +19,13 @@ You can create the project in an existing empty directory:
 
 ```bash
 mkdir myapp && cd myapp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 You can also directly create the project as a new folder:
 
 ```bash
-npx @modern-js/create myapp
+npx @modern-js/create@latest myapp
 ```
 
 ## Initialize

package/docs/en/guides/topic-detail/framework-plugin/extend.mdx

@@ -13,7 +13,7 @@ Here is a simple example to demonstrate how to extend plugin Hooks by adding Hoo
 First, we initialize an empty project file and add basic dependencies:
 
 ```bash
-$ npx @modern-js/create modern-js-demo
+$ npx @modern-js/create@latest modern-js-demo
 ```
 
 ### Creating Hooks

package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -9,6 +9,28 @@ Modern.js exposes three types of plugins: CLI, Runtime, and Server.
 
 ## CLI
 
+### `beforeConfig`
+
+- Functionality: Running tasks before the config process
+- Execution phase: Before the config process
+- Hook model: AsyncWorkflow
+- Type: `AsyncWorkflow<void, void>`
+- Example usage:
+
+```ts
+import type { CliPlugin } from '@modern-js/core';
+
+export default (): CliPlugin => ({
+  setup(api) {
+    return {
+      beforeConfig: () => {
+        // do something
+      },
+    };
+  },
+});
+```
+
 ### `config`
 
 - Functionality: Collect configuration

package/docs/en/guides/topic-detail/generator/codesmith/develop.mdx

@@ -48,6 +48,6 @@ npx @modern-js/codesmith-cli <generatorName>
 Where generatorName is the generator package name.
 
 :::info
-`@modern-js/create` also supports running micro-generators, you can use `npx @modern-js/create --generator <generatorName>` to run customized micro-generators.
+`@modern-js/create` also supports running micro-generators, you can use `npx @modern-js/create@latest --generator <generatorName>` to run customized micro-generators.
 
 :::

package/docs/en/guides/topic-detail/generator/plugin/abstract.mdx

@@ -10,7 +10,7 @@ Modern.js provides an initialization template that is versatile and can meet som
 
 When you use Modern.js in depth, you will inevitably find that every time you create a project, you will make some similar changes specific to your own project, such as modifying the sample code, adding some configuration, enabling some functions, etc.
 
-The generator plugin can help you precipitate these individual or team-specific changes. Simply bring the `--plugin` parameter when executing `npx @modern-js/create` to avoid the need to repeatedly modify the project every time the project is created..
+The generator plugin can help you precipitate these individual or team-specific changes. Simply bring the `--plugin` parameter when executing `npx @modern-js/create@latest` to avoid the need to repeatedly modify the project every time the project is created..
 
 The generator plugin is based on the initialization template project provided by the Modern.js, providing methods to add, delete and modify templates, and modifying `package.json`, `modernConfig` configuration and opening functions in a fast way.
 

package/docs/en/guides/topic-detail/generator/plugin/develop.mdx

@@ -9,7 +9,7 @@ sidebar_position: 3
 Modern.js provides a generator plugin to create a generator plugin project, you can directly execute the following command to create:
 
 ```bash
-npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
+npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
 ```
 
 Different plugin types will ask different questions. You can choose the plugin type according to your needs.

package/docs/en/guides/topic-detail/generator/plugin/use.mdx

@@ -9,7 +9,7 @@ sidebar_position: 2
 You can use the generator plugin directly by executing the following command:
 
 ```bash
-npx @modern-js/create --plugin <pluginName>
+npx @modern-js/create@latest --plugin <pluginName>
 ```
 
 The plugin parameter supports multiple declarations, which means that multiple generator plugins are used at the same time.

package/docs/en/guides/topic-detail/generator/project.mdx

@@ -11,7 +11,7 @@ Modern.js provides `@modern-js/create` as a project generator for Modern.js proj
 There is no need to install `@modern-js/create` globally, just execute the tool directly with npx:
 
 ```bash
-npx @modern-js/create [projectDir]
+npx @modern-js/create@latest [projectDir]
 ```
 
 :::info
@@ -32,7 +32,7 @@ When executing the above command, the `projectDir` folder will be created in the
 Get the `@modern-js/create` tool version.
 
 ```bash
-$ npx @modern-js/create --version
+$ npx @modern-js/create@latest --version
 
 [INFO] @modern-js/create v2.0.0
 ```
@@ -52,7 +52,7 @@ By default, `@modern-js/create` will have interaction problems such as language
 This field is a JSON character string, for example when running a package manager:
 
 ```bash
-npx @modern-js/create --config '{"packageManager": "pnpm"}'
+npx @modern-js/create@latest --config '{"packageManager": "pnpm"}'
 ```
 
 Specific configuration information viewable [Project Configuration](/guides/topic-detail/generator/config/common).
@@ -105,7 +105,7 @@ For custom generator plugins, please refer to [Development Generator Plugin](/gu
 
 Specifies the microgenerator.
 
-By default, `@modern-js/create` will execute the microgenerator Modern.js framework build-in. If you need to execute a customized microgenerator, and you need to use the posture of `npx @modern-js/create`, you can use this parameter directly.
+By default, `@modern-js/create` will execute the microgenerator Modern.js framework build-in. If you need to execute a customized microgenerator, and you need to use the posture of `npx @modern-js/create@latest`, you can use this parameter directly.
 
 For custom microgenerators, please refer to [Develop Microgenerator](/guides/topic-detail/generator/codesmith/introduce).
 

package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -27,7 +27,7 @@ Initialize the project with a command line:
 
 ```bash
 mkdir masterApp && cd masterApp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 After the project is created, we can enable the `micro frontend` through `pnpm run new`:
@@ -109,7 +109,7 @@ Initialize the project with a command line:
 
 ```bash
 mkdir masterApp && cd masterApp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 After the project is created, we can enable the `micro frontend` function through `pnpm run new`:
@@ -137,7 +137,7 @@ Initialize the project with a command line:
 
 ```bash
 mkdir table && cd table
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:
@@ -186,7 +186,7 @@ Initialize the project with a command line:
 
 ```bash
 mkdir table && cd table
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:

package/docs/en/tutorials/first-app/c01-start.mdx

@@ -17,7 +17,7 @@ We create a new directory and initialize the project via the command line tool:
 
 ```bash
 mkdir myapp && cd myapp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 import InitApp from "@site-docs-en/components/init-app"

package/docs/zh/components/init-rspack-app.mdx

@@ -1,5 +1,5 @@
 ```bash
-$ npx @modern-js/create myapp
+$ npx @modern-js/create@latest myapp
 ? 请选择你想创建的工程类型：Web 应用
 ? 请选择开发语言：TS
 ? 请选择包管理工具：pnpm

package/docs/zh/components/ua-polyfill.mdx

@@ -0,0 +1,39 @@
+### 运行时按需 Polyfill
+
+Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) 信息的运行时按需 Polyfill 方案，相比于 Babel 优势如下：
+
+- 不会插入到代码中，只根据访问页面的设备，按需下发 Polyfill 代码 ，减少整体代码体积。
+- 相同浏览器会公用一份 Polyfill 代码。因此，随着项目越来越多，基于 UA 的 Polyfill 代码下发速度会越来越快，综合速度超过常规方案。
+
+可以通过微生成器开启该功能：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用「基于 UA 的 Polyfill」功能
+```
+
+执行命令后，在 `modern.config.ts` 中注册 Polyfill 插件:
+
+```ts title="modern.config.ts"
+import polyfillPlugin from '@modern-js/plugin-polyfill';
+
+export default defineConfig({
+  plugins: [..., polyfillPlugin()],
+});
+```
+
+配置 `output.polyfill` 为 `ua` 并且执行 `pnpm run build && pnpm run serve` 启动服务器后，访问页面可以看到 HTML 产物中包含如下脚本:
+
+```js
+<script src="/__polyfill__" crossorigin></script>
+```
+
+在 Chrome 51 下访问页面可以看到 `http://localhost:8080/__polyfill__` 返回内容如下:
+
+![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
+
+:::caution 注意
+该功能只有在使用 Modern.js 内置的 Web Server 时才会生效。
+
+如果有自定义模版的需求，请参考 [HTML 模板](/guides/basic-features/html.html)。通过 `html.template` 或 `tools.html` 手动修改模版时，可能会导致该功能无法正确生效。
+:::

package/docs/zh/configure/app/output/temp-dir.mdx

@@ -0,0 +1,22 @@
+---
+sidebar_label: tempDir
+---
+
+# output.tempDir
+
+- **类型：** `string`
+- **默认值：** `''`
+
+项目开发或构建时，Modern.js 会生成真实的 Webpack 入口和 HTML 模板，并放在临时目录下。
+
+如果希望由多个配置同时启动某项目，可以通过该配置，将文件生成到不同的临时目录下，避免相互干扰。配置可以是相对路径或绝对路径，但应避免项目外的路径。
+
+示例
+
+```ts
+export default {
+  output: {
+    tempDir: path.join('node_modules', '.temp-dir'),
+  }
+}
+```

package/docs/zh/guides/advanced-features/compatibility.mdx

@@ -1,26 +1,25 @@
 ---
-title: 客户端兼容性
 sidebar_position: 5
 ---
-# 客户端兼容性
+
+# 浏览器兼容性
 
 ## Browserslist 配置
 
-Modern.js 支持在项目根目录 `package.json` 文件中的 `browserslist` 字段（或单独的 `.browserslistrc` 文件）指定项目覆盖的目标浏览器范围。该值会被 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 和 [`autoprefixer`](https://github.com/postcss/autoprefixer) 用来确定需要转换的 JavaScript 语法特性和需要添加的 CSS 浏览器前缀。
+Modern.js 支持设置 Web 应用需要兼容的浏览器范围，你可以在 `.browserslistrc` 文件里设置 [Browserslist](https://browsersl.ist/) 的值。
 
-Modern.js 中默认值如下:
+当你创建一个新的 Modern.js 项目时，默认会包含一份 `.browserslistrc` 配置，这表示 JavaScript 代码会被编译至 ES6 格式。
 
-```js
-['> 0.01%', 'not dead', 'not op_mini all'];
+```yaml title=".browserslistrc"
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10
 ```
 
-可以在[这里](https://github.com/browserslist/browserslist)了解如何自定义浏览器范围。
-
-查看 Modern.js Builder 文档了解更多 [Browserslist](https://modernjs.dev/builder/guide/advanced/browserslist.html) 相关内容。
-
-:::note
-Modern.js 支持配置 [output.overrideBrowserslist](/configure/app/output/override-browserslist) 覆盖默认 browserslist 值。
-
+:::tip
+请查看 [Modern.js Builder - 设置浏览器范围](https://modernjs.dev/builder/guide/advanced/browserslist) 来了解更多内容。
 :::
 
 ## Polyfill
@@ -36,42 +35,6 @@ Modern.js 在编译时默认通过 [core-js](https://github.com/zloirock/core-js
 
 :::
 
-### 运行时按需 Polyfill
-
-Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) 信息的运行时按需 Polyfill 方案，相比于 Babel 优势如下：
-
-- 不会插入到代码中，只根据访问页面的设备，按需下发 Polyfill 代码 ，减少整体代码体积。
-- 相同浏览器会公用一份 Polyfill 代码。因此，随着项目越来越多，基于 UA 的 Polyfill 代码下发速度会越来越快，综合速度超过常规方案。
-
-可以通过微生成器开启该功能：
-
-```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「基于 UA 的 Polyfill」功能
-```
-
-执行命令后，在 `modern.config.ts` 中注册 Polyfill 插件:
+import UAPolyfill from '@site-docs/components/ua-polyfill';
 
-```ts title="modern.config.ts"
-import polyfillPlugin from '@modern-js/plugin-polyfill';
-
-export default defineConfig({
-  plugins: [..., polyfillPlugin()],
-});
-```
-
-配置 `output.polyfill` 为 `ua` 并且执行 `pnpm run build && pnpm run serve` 启动服务器后，访问页面可以看到 HTML 产物中包含如下脚本:
-
-```js
-<script src="/__polyfill__" crossorigin></script>
-```
-
-在 Chrome 51 下访问页面可以看到 `http://localhost:8080/__polyfill__` 返回内容如下:
-
-![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
-
-:::caution 注意
-该功能只有在使用 Modern.js 内置的 Web Server 时才会生效。
-
-如果有自定义模版的需求，请参考 [HTML 模板](/guides/basic-features/html.html)。通过 `html.template` 或 `tools.html` 手动修改模版时，可能会导致该功能无法正确生效。
-:::
+<UAPolyfill />

package/docs/zh/guides/get-started/quick-start.mdx

@@ -18,13 +18,13 @@ Modern.js 提供了 `@modern-js/create` 生成器来创建项目，不要全局
 
 ```bash
 mkdir myapp && cd myapp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 也可以直接用新目录创建项目：
 
 ```bash
-npx @modern-js/create myapp
+npx @modern-js/create@latest myapp
 ```
 
 ## 初始化项目

package/docs/zh/guides/topic-detail/changesets/changelog.mdx

@@ -164,7 +164,7 @@ module.exports = {
 
 自定义 Changelog 还可以使用模块工程方案进行管理，提供通用方案。
 
-#### 使用 `npx @modern-js/create` 创建模块工程方案。
+#### 使用 `npx @modern-js/create@latest` 创建模块工程方案。
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块

package/docs/zh/guides/topic-detail/changesets/commit.mdx

@@ -197,7 +197,7 @@ commit 配置为 ./my-commit-config.js 即可:
 
 自定义 Changelog 还可以使用模块工程方案进行管理，提供通用方案。
 
-#### 使用 `npx @modern-js/create` 创建模块工程方案。
+#### 使用 `npx @modern-js/create@latest` 创建模块工程方案。
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块

package/docs/zh/guides/topic-detail/changesets/release-note.mdx

@@ -194,7 +194,7 @@ pnpm run gen-release-note -- --custom ./scripts/my-release-note-config.js
 
 custom 参数值还可以使用模块工程方案进行管理，提供通用方案。
 
-1. 使用 npx @modern-js/create 创建模块工程方案。
+1. 使用 npx @modern-js/create@latest 创建模块工程方案。
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块

package/docs/zh/guides/topic-detail/framework-plugin/extend.mdx

@@ -13,7 +13,7 @@ sidebar_position: 5
 首先我们初始化一个空的项目文件，并添加基础依赖：
 
 ```bash
-$ npx @modern-js/create modern-js-demo
+$ npx @modern-js/create@latest modern-js-demo
 ```
 
 ### 创建 Hook

package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -8,6 +8,28 @@ sidebar_position: 8
 
 ## CLI
 
+### `beforeConfig`
+
+- 功能：运行收集配置前的任务
+- 执行阶段：收集配置前
+- Hook 模型：AsyncWorkflow
+- 类型：`AsyncWorkflow<void, void>`
+- 使用示例：
+
+```ts
+import type { CliPlugin } from '@modern-js/core';
+
+export default (): CliPlugin => ({
+  setup(api) {
+    return {
+      beforeConfig: () => {
+        // do something
+      },
+    };
+  },
+});
+```
+
 ### `config`
 
 - 功能：收集配置

package/docs/zh/guides/topic-detail/generator/codesmith/develop.mdx

@@ -48,6 +48,6 @@ npx @modern-js/codesmith-cli <generatorName>
 其中 generatorName 为生成器包名。
 
 :::info
-`@modern-js/create` 也支持运行微生成器，可以使用 `npx @modern-js/create --generator <generatorName>` 运行自定义的微生成器。
+`@modern-js/create` 也支持运行微生成器，可以使用 `npx @modern-js/create@latest --generator <generatorName>` 运行自定义的微生成器。
 
 :::

package/docs/zh/guides/topic-detail/generator/plugin/abstract.mdx

@@ -10,7 +10,7 @@ Modern.js 提供的初始化模板具有通用性，能满足一些通用的项
 
 当你深度使用 Modern.js 时，必然会发现每次创建的项目都会进行一些针对自身项目的特定的相似改动，比如修改示例代码、增加一些配置、开启某些功能等。
 
-生成器插件可以帮你将这些针对个人或团队特定的改动沉淀下来，在执行 `npx @modern-js/create` 只需简单的带上 `--plugin` 参数即可避免每次创建完项目都需重复性修改项目的工作。
+生成器插件可以帮你将这些针对个人或团队特定的改动沉淀下来，在执行 `npx @modern-js/create@latest` 只需简单的带上 `--plugin` 参数即可避免每次创建完项目都需重复性修改项目的工作。
 
 生成器插件是在 Modern.js 提供的初始化模板项目的基础上，提供对模板进行增加、删除、修改的方法，并通过快捷的方式修改 `package.json`、`modernConfig` 配置和开启功能等操作。
 

package/docs/zh/guides/topic-detail/generator/plugin/develop.mdx

@@ -9,7 +9,7 @@ sidebar_position: 3
 Modern.js 提供了生成器插件用于创建开发项目，可直接执行以下命令创建:
 
 ```bash
-npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
+npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
 ```
 
 插件类型不同，会提问不同的问题，可根据需求选择插件类型

package/docs/zh/guides/topic-detail/generator/plugin/use.mdx

@@ -9,7 +9,7 @@ sidebar_position: 2
 你可直接执行下面命令使用生成器插件：
 
 ```bash
-npx @modern-js/create --plugin <pluginName>
+npx @modern-js/create@latest --plugin <pluginName>
 ```
 
 plugin 参数支持声明多次，代表同时使用多个生成器插件。

package/docs/zh/guides/topic-detail/generator/project.mdx

@@ -11,7 +11,7 @@ Modern.js 提供了 `@modern-js/create` 作为项目生成器用于进行 Modern
 不需要全局安装 `@modern-js/create`，直接使用 npx 执行该工具即可：
 
 ```bash
-npx @modern-js/create [projectDir]
+npx @modern-js/create@latest [projectDir]
 ```
 
 :::info
@@ -32,7 +32,7 @@ npx @modern-js/create [projectDir]
 获取 `@modern-js/create` 工具版本。
 
 ```bash
-$ npx @modern-js/create --version
+$ npx @modern-js/create@latest --version
 
 [INFO] @modern-js/create v2.0.0
 ```
@@ -52,7 +52,7 @@ $ npx @modern-js/create --version
 该字段为 JSON 字符串，例如需执行包管理工具时：
 
 ```bash
-npx @modern-js/create --config '{"packageManager": "pnpm"}'
+npx @modern-js/create@latest --config '{"packageManager": "pnpm"}'
 ```
 
 具体配置信息可查看[工程方案配置](/guides/topic-detail/generator/config/common)。
@@ -105,7 +105,7 @@ Modern.js 支持使用生成器插件定制 Modern.js 默认的工程方案类
 
 指定微生成器。
 
-默认情况下 `@modern-js/create` 会执行 Modern.js 框架内置的微生成器，如果你需要执行定制的微生成器，又需要使用 `npx @modern-js/create` 的姿势，可直接使用该参数。
+默认情况下 `@modern-js/create` 会执行 Modern.js 框架内置的微生成器，如果你需要执行定制的微生成器，又需要使用 `npx @modern-js/create@latest` 的姿势，可直接使用该参数。
 
 关于定制微生成器可以参考[开发微生成器](/guides/topic-detail/generator/codesmith/introduce)。
 

package/docs/zh/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -24,7 +24,7 @@ title: 体验微前端
 
 ```bash
 mkdir masterApp && cd masterApp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 import DefaultMWAGenerate from "@site-docs/components/default-mwa-generate";
@@ -106,7 +106,7 @@ export default Layout;
 
 ```bash
 mkdir masterApp && cd masterApp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 <DefaultMWAGenerate />
@@ -134,7 +134,7 @@ import CustomRouterMicroFrontend from "@site-docs/components/custom-router-micro
 
 ```bash
 mkdir table && cd table
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 按照如下选择，生成项目：
@@ -186,7 +186,7 @@ export default Index;
 
 ```bash
 mkdir dashboard && cd dashboard
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 按照如下选择，生成项目：

package/docs/zh/tutorials/first-app/c01-start.mdx

@@ -17,7 +17,7 @@ import Prerequisites from "@site-docs/components/prerequisites"
 
 ```bash
 mkdir myapp && cd myapp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 import InitApp from "@site-docs/components/init-app"

package/package.json

@@ -15,13 +15,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.19.2-alpha.0",
+  "version": "2.20.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.19.1"
+    "@modern-js/builder-doc": "^2.20.0"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -33,9 +33,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/doc-plugin-auto-sidebar": "2.19.1",
-    "@modern-js/doc-tools": "2.19.1",
-    "@modern-js/builder-doc": "2.19.1"
+    "@modern-js/builder-doc": "2.20.0",
+    "@modern-js/doc-tools": "2.20.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.20.0"
   },
   "scripts": {
     "dev": "modern dev",

package/src/components/ShowcaseList/index.tsx

@@ -4,10 +4,10 @@ import styles from './index.module.scss';
 const getDomain = (url: string) => new URL(url).hostname;
 
 const TYPE_MAP = {
-  doc: 'Modern.js Doc',
-  module: 'Modern.js Module',
-  builder: 'Modern.js Builder',
-  framework: 'Modern.js Framework',
+  doc: 'Doc',
+  module: 'Module',
+  builder: 'Builder',
+  framework: 'Framework',
 };
 
 export const ShowcaseList = () => {