@modern-js/main-doc 2.0.0-beta.1 → 2.0.0-beta.3

package/zh/guides/topic-detail/generator/codesmith/introduce.md

@@ -2,4 +2,45 @@
 sidebar_position: 1
 ---
 
-# 介绍
+# 什么是微生成器
+
+Modern.js 提供了 `@modern-js/create` 工具和 `new` 命令分别用于初始化创建项目和提供开启一些插件功能的能力，这些工具都是基于微生成器也就是 codesmith 实现的。
+
+codesmith 致力于提供一套微生成器的运行机制，并维护微生成器执行过程中的上下文信息，从而实现各种基于文件、命令等操作，完成复杂的操作。
+
+codesmith 还将常用的方法进行了封装，可以直接使用其提供的 API 函数，可以更方便的实现自身的微生成器。
+
+## 核心概念
+
+### GeneratorCore
+
+GeneratorCore 是 codesmith 运行生成器的核心，维护这生成器执行过程中的上下文及运行方法。
+
+```typescript
+class GeneratorCore {
+  logger: ILogger; // 日志
+  materialsManager: MaterialsManager; // 资源
+  outputPath: string; // 输出路径
+  output: { // 输出方法
+    fs: (file: string | number, data: any, options?: fs.WriteFileOptions | string) => Promise<void>;
+  };
+  _context: GeneratorContext; // 上下文信息
+  addMaterial(key: string, material: FsMaterial): void; // 添加资源
+  runGenerator(generator: string, config?: Record<string, unknown>): Promise<void>; // 运行生成器
+  runSubGenerator(subGenerator: string, relativePwdPath?: string, config?: Record<string, any>): Promise<void>; // 运行子生成器
+}
+```
+
+### Materials
+
+微生成器资源信息，目前只包含文件资源(fsMaterials)，通过该字段可以获取到生成器执行过程中的 template 资源，并通过 API 对其进行操作。
+
+```typescript
+class MaterialsManager {
+  materialMap: { // 资源映射关系
+    [materialUri: string]: FsMaterial;
+  };
+  loadLocalGenerator(generator: string): Promise<FsMaterial>; // 加载本地生成器资源(绝对路径)
+  loadRemoteGenerator(generator: string): Promise<FsMaterial>; // 加载远程生成器资源(npm 包)
+}
+```

package/zh/guides/topic-detail/generator/codesmith/run-in-js.md

@@ -0,0 +1,48 @@
+---
+sidebar_position: 4
+---
+
+
+# 使用 JS 代码执行微生成器
+
+除了使用 cli 的方式执行微生成器，我们免不了需要在代码中执行微生成器，下面就介绍在 js 代码中如何执行微生成器。
+
+## 安装 codesmith 依赖
+
+```bash
+pnpm add @modern-js/codesmith
+```
+
+## 创建 codesmith 实例
+
+```typescript
+import { CodeSmith, Logger } from '@modern-js/codesmith';
+
+const smith = new CodeSmith({
+   debug: false, // 是否开启 debug 模式，为 true 时会展示生成器中的 debug 信息
+});
+```
+
+## 调用 forge 方法执行生成器
+
+```typescript
+type RunnerTask = Array<{
+  name: string;
+  config: Record<string, any>;
+}>;
+
+const task: RunnerTask = [
+  {
+    name: "generator", // 生成器 npm 包名称
+    config: {}, // 生成器执行的默认配置
+  },
+];
+
+await smith.forge({
+  tasks: task.map(runner => ({
+    generator: runner.name,
+    config: runner.config,
+  })),
+  pwd: '.', // 生成器执行路径
+});
+```

package/zh/guides/topic-detail/generator/codesmith/structure.md

@@ -0,0 +1,86 @@
+---
+sidebar_position: 2
+---
+
+# 微生成器的组成
+
+一个微生成器项目为一个模块项目或者一个 Npm 包，包中包含几个基本部分：
+
+## package.json
+
+npm 包描述信息，包含 name、version、main 等字段。
+
+## 入口文件
+
+上述 main 字段对应的 js 文件。文件为默认导出一个生成器函数，函数格式如下：
+
+```typescript
+export default async (context: GeneratorContext, generator: GeneratorCore) => {
+
+};
+```
+
+该函数参数为 context 和 generator：
+
+### context
+
+context 提供 codesmith 运行时维护的上下文信息。其类型定义为：
+
+```typescript
+interface GeneratorContext {
+  materials: Record<string, FsMaterial>; // 资源
+  config: Record<string, any>; // 用户 config 配置
+  data?: Record<string, any>; // 用户 data 配置
+  current: { material: FsMaterial; } | null; //  当前生成器运行可获取的文件资源
+  [key: string]: any; // 其他补充字段
+}
+```
+
+materials 是 codesmith 的抽象文件系统，维护这生成器名称和可操作文件的映射关系。
+
+materials 中还维护这一个 default 的映射关系，用于维护当前生成器执行目录的资源信息，通过该字段可以对目标项目资源进行操作。
+
+例如当需要修改当前项目的 `package.json` 中的字段:
+
+```typescript
+const resource = context.materials.default.get(path.join(appDir, 'package.json'))
+```
+
+将获取到的 resource 传递给 codesmith 提供的 JSON API 即可实现 json 操作。
+
+GeneratorContext 的 current 字段上维护这当前运行的生成器文件资源，可以通过 `current.material` 获取到当前的 `FsMaterial`.
+
+FsMaterial 中提供了 get 方法用于获取资源文件并将资源文件传给生成器支持的 API 即可对模板文件进行处理。
+
+例如：
+
+```typescript
+const resourceMap = await material.find('templates/**/*');
+```
+
+通过上述方式可以获取到生成器中符合 `templates/**/*` 规则的所有模板文件，遍历该对象即可对资源文件进行操作。
+
+### generator
+
+generator 提供 codesmith 运行时的函数方法。其类型定义为：
+
+```typescript
+interface GeneratorCore {
+    logger: Logger; // log 函数，支持 info、warning、debug、error、verbose、stream
+    outputPath: string; // 输出文件路径
+    output: {
+        fs: (file: string | number, data: any, options?: string | fs.WriteFileOptions | undefined) => Promise<void>
+    }; // 写文件方法
+    runSubGenerator: (subGenerator: string, relativePwdPath?: string | undefined, config?: Record<string, any> | undefined): Promise<void> // 运行子生成器
+}
+```
+
+其中 outputPath 和 context 中的 `materials.default` 指向相同的目录，outputPath 用于直接计算目标路径并操作，`materials.default` 用于获取资源文件。
+
+runSubGenerator 提供了在一个微生成器中去运行其他微生成器的方法，该方法将自动更新和维护新的 context 上下文信息。
+
+## Template 文件
+
+生成器模板文件。
+
+推荐在项目根目录创建一个 templates 目录，用于维护该微生成器的模板文件，微生成器执行过程中只能使用自身的模板文件，对于需要共用的模板文件，建议通过共用子生成器实现。

package/zh/guides/topic-detail/generator/config/mwa.md

@@ -32,7 +32,7 @@ New 命令的操作类型(actionType)，类型支持两种：
 
 - 创建应用入口(entry)
 
-- 新建 Server 自定义源码目(server)
+- 新建自定义 Web Serve 源码目录(server)
 
 这两个选项还需要配置具体的配合使用，介绍如下：
 
@@ -40,11 +40,9 @@ New 命令的操作类型(actionType)，类型支持两种：
 
 入口名称(name), 字符串类型。
 
-创建入口除了`name`之外，还需要 `needModifyMWAConfig`、`clientRoute` 字段。
-
 #### framework
 
-自定义 Server 运行时框架(framework)，支持两个选项：
+自定义 Web Serve 运行时框架(framework)，支持两个选项：
 
 - Express(express)
 
@@ -66,13 +64,11 @@ New 命令的操作类型(actionType)，类型支持两种：
 
 - Storybook(mwa_storybook)
 
-- 部署(deploy)
-
 - 启用「基于 UA 的 Polyfill」功能(polyfill)
 
 - 启用「全局代理」(proxy)
 
-`bff` 和 `deploy` 和还需要配置具体的配合使用，介绍如下：
+`bff` 和还需要配置具体的配合使用，介绍如下：
 
 #### BFF 相关参数
 
@@ -86,7 +82,7 @@ BFF 类型(bffType)，支持两个选项：
 
 ##### framework
 
-扩展 Web Server 运行时框架(framework)，支持两个选项：
+BFF 运行时框架(framework)，支持两个选项：
 
 - Express(express)
 

package/zh/guides/topic-detail/generator/plugin/api/file/addFile.md

@@ -8,7 +8,7 @@ sidebar_position: 4
 
 该方法可用于任何文件类型，对于二进制以外的文件类型，添加文件时会进行 Handlebars 渲染。
 
-该方法可在 onForged 生命周期的 api 参数上获取。
+该方法可在 `onForged` 生命周期的 api 参数上获取。
 
 其类型定义为：
 

package/zh/guides/topic-detail/generator/plugin/api/file/addHelper.md

@@ -6,7 +6,7 @@ sidebar_position: 2
 
 针对于文本类型文件，增加 Handlebars 的自定义 Help 函数，具体可查看文档[Custom Helpers](https://handlebarsjs.com/guide/#custom-helpers)。
 
-该方法可在 onForged 生命周期的 api 参数上获取。
+该方法可在 `onForged` 生命周期的 api 参数上获取。
 
 其类型定义为：
 

package/zh/guides/topic-detail/generator/plugin/api/file/addPartial.md

@@ -6,7 +6,7 @@ sidebar_position: 3
 
 针对于文本类型文件，增加 Handlebars 的自定义 Partial 片段，具体可查看文档[Partials](https://handlebarsjs.com/guide/#partials)。
 
-该方法可在 onForged 生命周期的 api 参数上获取。
+该方法可在 `onForged` 生命周期的 api 参数上获取。
 
 其类型定义为：
 
@@ -19,7 +19,7 @@ export type ForgedAPI = {
 
 ## name
 
-partial名称。
+partial 名称。
 
 ## str
 

package/zh/guides/topic-detail/generator/plugin/api/file/introduce.md

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # 介绍
 
-文件操作 API 可在 onForged 生命周期函数中使用，可对当前项目文件进行增、删、改的操作。
+文件操作 API 可在 `onForged` 生命周期函数中使用，可对当前项目文件进行增、删、改的操作。
 
 文件操作 API 相关路径填写项目相对路径即可，生成器插件会自动添加当前项目路径前缀。
 

package/zh/guides/topic-detail/generator/plugin/api/file/rmDir.md

@@ -8,7 +8,7 @@ sidebar_position: 10
 
 该方法可用于任何文件类型。
 
-该方法可在 onForged 生命周期的 api 参数上获取。
+该方法可在 `onForged` 生命周期的 api 参数上获取。
 
 其类型定义为：
 

package/zh/guides/topic-detail/generator/plugin/api/file/rmFile.md

@@ -8,7 +8,7 @@ sidebar_position: 9
 
 该方法可用于任何文件类型。
 
-该方法可在 onForged 生命周期的 api 参数上获取。
+该方法可在 `onForged` 生命周期的 api 参数上获取。
 
 其类型定义为：
 

package/zh/guides/topic-detail/generator/plugin/api/file/updateJSONFile.md

@@ -8,7 +8,7 @@ sidebar_position: 6
 
 该方法适用于 JSON 文件类型，可批量更新 JSON 文件中字段值。
 
-该方法可在 onForged 生命周期的 api 参数上获取。
+该方法可在 `onForged` 生命周期的 api 参数上获取。
 
 其类型定义为：
 
@@ -29,7 +29,8 @@ JSON 文件的文件名或者文件路径。
 ## updateInfo
 
 字段更新信息。
-该信息使用 Record 形式表示。
+
+该信息使用 `Record` 形式表示。
 
 例如需要更新 name 字段：
 

package/zh/guides/topic-detail/generator/plugin/api/file/updateModernConfig.md

@@ -6,7 +6,7 @@ sidebar_position: 8
 
 更新 `package.json` 中 `modernConfig` 字段。
 
-该方法可在 onForged 生命周期的 api 参数上获取。
+该方法可在 `onForged` 生命周期的 api 参数上获取。
 
 其类型定义为：
 
@@ -22,5 +22,5 @@ export type ForgedAPI = {
 字段更新信息。
 
 :::info
-该函数为 updateJSONFile 的封装，将自动更新 `package.json` 的 `modernConfig` 字段 updateInfo 中只需填写相对于 `modernConfig` 的更新信息即可。
+该函数为 updateJSONFile 的封装，将自动更新 `package.json` 的 `modernConfig` 字段 `updateInfo` 中只需填写相对于 `modernConfig` 的更新信息即可。
 :::

package/zh/guides/topic-detail/generator/plugin/api/file/updateTextRawFile.md

@@ -8,7 +8,7 @@ sidebar_position: 7
 
 该方法适用与文本列表文件类型。
 
-该方法可在 onForged 生命周期的 api 参数上获取。
+该方法可在 `onForged` 生命周期的 api 参数上获取。
 
 其类型定义为：
 

package/zh/guides/topic-detail/generator/plugin/api/hook/afterForged.md

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # AfterForged
 
-afterForged 函数为生成器插件生命周期函数，其通常用于定义安装依赖、Git 等操作，专业些操作将会在 onForged 函数执行完成后进行。
+`afterForged` 函数为生成器插件生命周期函数，其通常用于定义安装依赖、Git 等操作，这些操作将会在 `onForged` 函数执行完成后进行。
 
 该方法可直接在 context 上获取。
 
@@ -24,11 +24,11 @@ export interface IPluginContext {
 
 ## func
 
-afterForged 参数是一个回调函数，函数参数为 api 和 inputData。
+`afterForged` 参数是一个回调函数，函数参数为 `api` 和 `inputData。`
 
 ### api
 
-在 afterForged 生命周期中支持的函数列表，具体可查看 [Git API](/docs/guides/topic-detail/generator/plugin/api/git/isInGitRepo) 和 [NPM API](/docs/guides/topic-detail/generator/plugin/api/npm/install)。
+在 `afterForged` 生命周期中支持的函数列表，具体可查看 [Git API](/docs/guides/topic-detail/generator/plugin/api/git/isInGitRepo) 和 [NPM API](/docs/guides/topic-detail/generator/plugin/api/npm/install)。
 
 ### inputData
 

package/zh/guides/topic-detail/generator/plugin/api/hook/onForged.md

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # OnForged
 
-onForged 函数为生成器插件生命周期函数，其通常用于定义文件类型操作，这些操作将在 base 的工程方案文件操作完成后进行。
+`onForged` 函数为生成器插件生命周期函数，其通常用于定义文件类型操作，这些操作将在 base 的工程方案文件操作完成后进行。
 
 该方法可直接在 context 上获取。
 
@@ -24,11 +24,11 @@ export interface IPluginContext {
 
 ## func
 
-onForged 参数是一个回调函数，函数参数为 api 和 inputData。
+`onForged` 参数是一个回调函数，函数参数为 api 和 inputData。
 
 ### api
 
-在 onForged 生命周期中支持的函数列表，具体可查看[文件操作 API](/docs/guides/topic-detail/generator/plugin/api/file/introduce) 和[启用功能 API](/docs/guides/topic-detail/generator/plugin/api/new/introduce)。
+在 `onForged` 生命周期中支持的函数列表，具体可查看[文件操作 API](/docs/guides/topic-detail/generator/plugin/api/file/introduce) 和[启用功能 API](/docs/guides/topic-detail/generator/plugin/api/new/introduce)。
 
 ### inputData
 

package/zh/guides/topic-detail/generator/plugin/api/input/addInputAfter.md

@@ -35,7 +35,7 @@ context.addInputAfter('packageManager', {
   properties: {
     language: {
       type: 'string',
-      title: i18n.t(localeKeys.plugin_type.self),
+      title: '开发语言',
       enum: [
         { label: 'TS', value: 'ts' },
         { label: 'ES6+', value: 'js' },

package/zh/guides/topic-detail/generator/plugin/api/input/addInputBefore.md

@@ -35,7 +35,7 @@ context.addInputBefore('packageManager', {
   properties: {
     language: {
       type: 'string',
-      title: i18n.t(localeKeys.plugin_type.self),
+      title: '开发语言',
       enum: [
         { label: 'TS', value: 'ts' },
         { label: 'ES6+', value: 'js' },

package/zh/guides/topic-detail/generator/plugin/api/input/type.md

@@ -54,7 +54,7 @@ const schema = {
   properties: {
     language: {
       type: 'string',
-      title: i18n.t(localeKeys.plugin_type.self),
+      title: '开发语言',
       enum: [
         { label: 'TS', value: 'ts' },
         { label: 'ES6+', value: 'js' },

package/zh/guides/topic-detail/generator/plugin/api/new/createElement.md

@@ -6,7 +6,7 @@ sidebar_position: 2
 
 创建工程元素，只支持应用工程方案。
 
-该方法可在 onForged 生命周期的 api 参数上获取。
+该方法可在 `onForged` 生命周期的 api 参数上获取。
 
 其类型定义为：
 

package/zh/guides/topic-detail/generator/plugin/api/new/createSubProject.md

@@ -6,7 +6,7 @@ sidebar_position: 4
 
 创建子项目，只支持 Monorepo 工程方案。
 
-该方法可在 onForged 生命周期的 api 参数上获取。
+该方法可在 `onForged` 生命周期的 api 参数上获取。
 
 其类型定义为：
 

package/zh/guides/topic-detail/generator/plugin/api/new/enableFunc.md

@@ -6,7 +6,7 @@ sidebar_position: 3
 
 启用功能，支持应用和模块工程方案。
 
-该方法可在 onForged 生命周期的 api 参数上获取。
+该方法可在 `onForged` 生命周期的 api 参数上获取。
 
 其类型定义为：
 

package/zh/guides/topic-detail/generator/plugin/api/npm/install.md

@@ -6,7 +6,7 @@ sidebar_position: 1
 
 在项目根目录安装依赖。
 
-install 函数中将根据 packageManager 的值使用对应的包管理工具安装依赖。
+install 函数中将根据 `packageManager` 的值使用对应的包管理工具安装依赖。
 
 ```ts
 export type AfterForgedAPI = {

package/zh/guides/topic-detail/generator/plugin/develop.md

@@ -61,11 +61,15 @@ npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
 在默认的输入前添加输入，比如在`选择包管理工具`问题前添加问题，具体 Modern.js 每个问题的配置可查看[工程方案配置](/docs/guides/topic-detail/generator/config/common)。
 
 ```ts
-context.addInputBefore('packageManager', {
-    key: 'test',
-    name: '测试输入',
-    type: 'input'
-})
+context.addInputBefore('input2', {
+  type: 'object',
+  properties: {
+    'input1.2': {
+      type: 'string',
+      title: 'input1.2',
+    },
+  },
+});
 ```
 
 - setInput
@@ -73,8 +77,8 @@ context.addInputBefore('packageManager', {
 设置已经存在问题的属性
 
 ```ts
-context.setInput('test', 'type', 'radio')
-context.setInput('test', 'options', [{ key: 'option1', name: '选项一' }])
+context.setInput('test', 'type', 'number')
+context.setInput('test', 'enum', [{ value: 'option1', label: '选项一' }])
 ```
 
 ### onForged

package/zh/guides/topic-detail/model/quick-start.md

@@ -3,6 +3,10 @@ sidebar_position: 1
 title: 快速上手
 ---
 
+import ReduckMigration from '@site-docs/components/reduck-migration.md'
+
+<ReduckMigration />
+
 [Reduck](https://github.com/modern-js-dev/reduck) 是 Modern.js 团队开发的遵循 MVC 模式的状态管理库，底层状态存储基于 [Redux](https://redux.js.org/) 实现，同时提供更高层级的抽象，并完全兼容 Redux 生态。
 
 Reduck 的目标是以 MVC 模式组织 React 应用开发结构，将业务逻辑维护在 Model 层，业务逻辑与 UI 解耦，让开发业务逻辑更集中、更简单，同时通过更高层级的抽象，减少重复工作（样板代码）。

package/zh/guides/topic-detail/monorepo/sub-project-interface.md

@@ -22,8 +22,6 @@ sidebar_position: 3
 ? 请填写子项目名称 app
 ? 请填写子项目目录名称 app
 ? 请选择开发语言 TS
-? 是否需要支持以下类型应用 不需要
-? 是否需要调整默认配置? 否
 ```
 
 **「模块（内部）」子项目：**

package/zh/tutorials/first-app/c01-getting-started/1.1-prerequisites.md

@@ -10,11 +10,11 @@ title: 环境准备
 
 ## 1. Node.js
 
-需要 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 14.17.6。
+需要 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 14.19.0, 推荐使用 16.x 版本。
 
 Modern.js 推荐在开发环境里先安装 [nvm](https://github.com/nvm-sh/nvm#install--update-script)，在 shell 里集成[自动切换 node 版本的脚本](https://github.com/nvm-sh/nvm#deeper-shell-integration)。
 
-然后只要仓库根目录下有内容为 `lts/fermium` 或 `lts/erbium` 的 `.nvmrc` 文件，进入这个仓库时就会自动安装或切换到正确的 Node.js 版本。
+然后只要仓库根目录下有内容为 `lts/fermium` 或 `lts/gallium` 的 `.nvmrc` 文件，进入这个仓库时就会自动安装或切换到正确的 Node.js 版本。
 
 ## 2. pnpm
 

package/zh/tutorials/first-app/c01-getting-started/1.2-minimal-mwa.md

@@ -75,10 +75,10 @@ ni package.json
   "dependencies": {
     "react": "^17",
     "react-dom": "^17",
-    "@modern-js/runtime": "^1.0.0"
+    "@modern-js/runtime": "^2.0.0"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^1.0.0"
+    "@modern-js/app-tools": "^2.0.0"
   }
 }
 ```

package/zh/tutorials/first-app/c01-getting-started/1.4-enable-ssr.md

@@ -6,18 +6,21 @@ title: 启用 SSR
 
 在项目根目录下创建 `modern.config.js`：
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 <Tabs>
 <TabItem value="macOS" label="macOS" default>
 
 ```bash
-touch modern.config.js
+touch modern.config.ts
 ```
 
 </TabItem>
 <TabItem value="Windows" label="Windows">
 
 ```bash
-ni modern.config.js
+ni modern.config.ts
 ```
 
 </TabItem>

package/zh/tutorials/first-app/c02-generator-and-studio/2.1-generator.md

@@ -54,14 +54,6 @@ Modern.js 生成器会通过交互式的问题获取一些必要信息，动态
 # 请选择包管理工具
 ❯ pnpm
   Yarn
-
-# 是否需要支持以下类型应用
-❯ 不需要
-  Electron
-
-# 是否需要调整默认配置
-❯ 否
-  是
 ```
 
 项目生成后，在项目根目录执行 `pnpm run dev` 就可以直接进行调试了：

package/zh/tutorials/first-app/c02-generator-and-studio/2.2-boilerplates.md

@@ -6,17 +6,23 @@ title: 样板文件
 
 ```md
 .
-├── .vscode/
-├── src/
-│   ├── .eslintrc.json
-│   ├── App.css
-│   └── App.jsx
-├── .editorconfig
+├── .eslintrc.js
 ├── .gitignore
+├── .husky
+├── .idea
 ├── .npmrc
 ├── .nvmrc
+├── .prettierrc
+├── .vscode
 ├── README.md
+├── modern.config.js
 ├── package.json
+├── src
+│   ├── .eslintrc.js
+│   └── routes
+│       ├── index.css
+│       ├── layout.jsx
+│       └── page.jsx
 └── pnpm-lock.yaml
 ```
 

package/zh/tutorials/first-app/c02-generator-and-studio/2.3-configuration.md

@@ -2,11 +2,9 @@
 title: ​配置项目
 ---
 
-通过命令行工具创建的 Modern.js 项目，在 `package.json` 文件中，存在 `modernConfig` 字段。
+通过命令行工具创建的 Modern.js 项目，会默认生成 `modern.config.js` 配置文件。
 
-我们也可以创建 `modern.config.js` 配置文件。
-
-这两处都可以进行 Modern.js 项目的配置，并且 `modernConfig` 字段中的配置优先级高于 `modern.config.js` 中相同的内容。
+Modern.js 也支持使用 `package.json` 文件中的 `modernConfig` 字段进行配置，两个位置不支持同时配置同一字段，推荐使用 `modern.config.js` 配置文件进行配置。
 
 :::info 注
 

package/zh/tutorials/first-app/c03-ide/3.1-setting-up.md

@@ -15,7 +15,7 @@ cd hello-modern/
 code .
 ```
 
-![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-mwa.png)
+![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/vsc-mwa.jpeg)
 
 :::info 补充信息
 必须打开项目根目录，不能打开其他子目录或父目录，否则 IDE 支持不会生效。