@modern-js/module-tools-docs 2.2.0 → 2.3.0

package/docs/zh/api/plugin-api/plugin-hooks.md

@@ -330,8 +330,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // 在 dev 命令执行之前，是否关闭源码构建
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },
@@ -339,11 +337,11 @@ export interface DevToolData {
 }
 ```
 
-:::tip{title='关于 disableRunBuild 配置'}
+<!-- :::tip{title='关于 disableRunBuild 配置'}
 在调试项目的时候，如果仅需要对代码功能进行调试的话，也许可以设置 `disableRunBuild: true` 来关闭对于源码执行（监听模式下的）构建任务。
 
 目前支持的 Storybook 调试支持将源码产物作为调试对象，因此在 Storybook 插件中 `disableRunBuild: false`。
-:::
+::: -->
 
 ### `beforeDev`
 
@@ -373,8 +371,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // 在 dev 命令执行之前，是否关闭源码构建
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },
@@ -436,8 +432,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // 在 dev 命令执行之前，是否关闭源码构建
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },
@@ -473,8 +467,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // 在 dev 命令执行之前，是否关闭源码构建
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },

package/docs/zh/guide/advance/in-depth-about-dev-command.md

@@ -4,27 +4,66 @@ sidebar_position: 2
 
 # 深入理解 dev 命令
 
-在【基础使用】的部分，我们已经知道可以通过 `buildConfig` 配置对项目的输出产物进行修改。`buildConfig` 不仅描述了产物的一些特性，同时还为构建产物提供了一些功能。
+模块工程提供的 `dev` 命令主要用于代码的调试。
 
-:::tip{title=注意}
-如果你还不清楚 `buildConfig` 是什么，建议花一些时间通过下面的链接了解一下：
+## 命令运行的整体流程
 
-- 【[修改输出产物](/guide/basic/modify-output-product)】
+1. 当执行 `dev` 命令的时候，Module Tools 开始寻找是否存在可以执行的调试工具或者任务。调试工具或者任务就是类似 Storybook 这样的 Module Tools 调试工具插件。
+2. 当发现存在一个调试工具的时候，则会立即执行它。
+3. 当发现多个调试工具的时候，则显示调试工具列表菜单。可以通过选择某个调试工具对应的名称选项启动它。
+4. 当没有发现调试工具的时候，则告诉用户没有可用的调试工具。
 
-:::
+我们除了可以执行 `dev` 命令以外，也可以通过 `dev [调试工具名称]` 的方式来直接启动调试工具或者任务。
 
-而在本章里我们将要深入理解某些构建配置的使用以及了解执行 `modern build` 命令的时候发生了什么。
+## 扩展 dev 命令
 
-## 深入理解 `buildConfig`
+如果需要扩展 dev 命令或者说提供自己的 Module Tools 调试工具插件，那么你需要先了解以下内容：
 
-### Bundle 和 Bundleless
+* [开发插件](plugins/guide/getting-started)
+* [调试工具插件 API](/api/plugin-api/plugin-hooks#调试钩子)
 
-那么首先我们来理解一下 Bundle 和 Bundleless。
+一般来说，实现一个什么都不做的调试工具，其实现代码以及相关配置如下：
 
-所谓 Bundle 是指对构建产物进行打包，构建产物可能是一个文件，也有可能是基于一定的[代码拆分策略](https://esbuild.github.io/api/#splitting)得到的多个文件。
+``` ts do-nothing.ts
+export default (): CliPlugin<ModuleTools> => ({
+  name: 'do-nothing',
+  setup() {
+    return {
+      registerDev() {
+        return {
+          // 调试工具名称
+          name: 'do-nothing',
+          // 菜单显示内容
+          menuItem: {
+            name: 'DoNothing',
+            value: 'do-nothing',
+          },
+          // 定义的 dev 子命令
+          subCommands: ['donothing', 'dn'],
+          async action() {
+            // dev logic
+            console.info('Run build --watch, and do nothing.');
+          },
+        };
+      },
+    };
+  },
+});
+```
 
-而 Bundleless 则是指对每个源文件进行编译构建，但是并不将它们打包在一起。每一个产物文件都可以找到与之相对应的源码文件。
+如果需要使用该调试工具插件，则需要在配置文件中增加它：
 
-### input 与 sourceDir 的关系
+``` ts
+import doNothingPlugin from './plugins/do-nothing';
 
-## 构建过程
+export default defineConfig({
+  plugins: [
+    //..
+    doNothingPlugin()
+  ],
+});
+```
+
+此时我们执行 `dev` 或者 `dev do-nothing` 命令的时候，就可以执行它了。在执行后，它会先执行监听模式的源码构建任务，并紧接着打印日志信息。
+
+对于目前官方支持的调试工具和第三方支持的调试工具，可以在[插件列表](plugins/official-list/overview)中查看。

package/docs/zh/guide/basic/before-getting-started.md

@@ -176,8 +176,10 @@ export default defineConfig({
 });
 ```
 
-```js
-// modern.config.js
+**我们推荐使用 `defineConfig` 函数**，不过并不强制使用它。因此你也可以在配置文件中直接返回一个对象：
+
+```ts
+// modern.config.ts
 import moduleTools from '@modern-js/module-tools';
 
 export default {
@@ -185,15 +187,3 @@ export default {
   buildPreset: 'npm-library',
 };
 ```
-
-**我们推荐使用 `defineConfig` 函数**，不过并不强制使用它。因此你也可以在配置文件中直接返回一个对象：
-
-```typescript
-// modern.config.ts
-export default {};
-```
-
-```js
-// modern.config.js
-export default {};
-```

package/docs/zh/guide/basic/command-preview.md

@@ -33,7 +33,7 @@ Options:
 除了以上，模块工程还支持 `platform` 构建模式，可以用于执行其他工具的构建任务。例如，目前官方支持在安装了 `@modern-js/plugin-storybook` 插件后，可以通过执行 `modern build --platform` 或者 `modern build --platform storybook` 命令启动 Storybook 构建任务生成 Storybook 产物。
 
 :::tip{title=注意}
-在执行 Storybook 构建的时候，它需要读取项目的构建产物。因此**在执行 `modern build --platform` 命令启动 Storybook 构建的时候，要先执行一次 `modern build` 确保源码构建产物的存在**。
+在执行 Storybook 构建的时候，如果需要读取项目的构建产物。那么**在执行 `modern build --platform` 命令启动 Storybook 构建之前，不要忘记先执行 `modern build` 命令确保项目构建产物的存在**。
 :::
 
 ## `modern new`
@@ -90,7 +90,7 @@ Options:
 ```
 
 需要先执行 `modern new` 开启测试功能，然后才可以执行 `modern test` 命令。
-`modern test` 命令会自动将 `src/tests/*.test.(js|ts|jsx|tsx)` 文件当做测试用例运行。
+`modern test` 命令会自动将 `tests/*.test.(js|ts|jsx|tsx)` 文件当做测试用例运行。
 
 ## `modern lint`
 

package/docs/zh/guide/basic/modify-output-product.md

@@ -58,9 +58,10 @@ export default defineConfig({
 例如，如果使用预设函数的形式达到预设字符串 `"npm-library-es5"` 同样的效果，可以按照如下的方式：
 
 ```typescript
-import { defineConfig } from '@modern-js/module-tools';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
+  plugins: [moduleTools()],
   buildPreset({ preset }) {
     return preset.NPM_LIBRARY.map(config => {
       return { ...config, target: 'es5' };
@@ -69,9 +70,10 @@ export default defineConfig({
 });
 ```
 
-在上面的代码实现中，`preset.NPM_LIBRARY` 与预设字符串 `"npm-library"` 是相对应的，它代表着 `"npm-library"` 等价的多组构建相关的配置。我们通过 `map` 方法遍历了 `NPM_LIBRARY` 这个数组，在这个数组中包含了多个 `buildConfig` 对象。我们将原本的 `buildConfig` 对象进行了浅拷贝并修改了浅拷贝后得到 `buildConfig.target`，将它指定为 `es5`。
+在上面的代码实现中，`preset.NPM_LIBRARY` 与预设字符串 `"npm-library"` 是相对应的，它代表着 `"npm-library"` 等价的多组构建相关的配置。我们通过 `map` 方法遍历了 `NPM_LIBRARY` 这个数组，在这个数组中包含了多个 `buildConfig` 对象。我们将原本的 `buildConfig` 对象进行了浅拷贝，并修改了浅拷贝后 `target` 的值，将它指定为 `es5`。
 
 > 关于 `preset.NPM_LIBRARY` 具体对应的值，可以通过 [BuildPreset API](/api/config/build-preset) 查看。在 `preset` 对象下不仅包含了 `NPM_LIBRARY`，还包含了其他类似的常量。
+> 我们不仅可以使用 `preset.NPM_LIBRARY` 来获取 `"npm-library"` 对应的构建配置，也可以使用 `preset['npm-library']` 这样的方式。
 
 那么这里的 `buildConfig` 对象是什么呢？之前提到的构建产物特点又是根据什么呢？
 
@@ -112,7 +114,7 @@ export default defineConfig({
   - 指定 umd 产物外部导入的全局变量：对应的 API 是 [`buildConfig.umdGlobals`](/api/config/build-config#umdglobals)。
   - 指定 umd 产物的模块名：对应的 API 是 [`buildConfig.umdModuleName`](/api/config/build-config#umdmodulename)。
 
-除了以上分类以外，关于这些 API 的常见问题和最佳实践可以通过下面的链接来了解
+除了以上分类以外，关于这些 API 的常见问题和最佳实践可以通过下面的链接来了解：
 
 - [什么是 `bundle` 和 `bundleless`?](/guide/advance/in-depth-about-build#bundle-和-bundleless)
 - [`input` 与 `sourceDir` 的关系](/guide/advance/in-depth-about-build#input-与-sourcedir-的关系)。

package/docs/zh/guide/basic/publish-your-project.md

@@ -6,8 +6,8 @@ sidebar_position: 7
 
 一个 npm 类型的模块项目发布流程包含了两个阶段：
 
-- 第一阶段是在开发期间，开发者需要提供一个变更文件来记录需要发布的变动；
-- 第二阶段是在发布期间，Module Tools 可以收集所有的变更文件来更新版本、更新发布日志，并发布新的包到 [npm Registry](https://www.npmjs.com/) 上。
+- 第一阶段是在开发期间，开发者需要提供变更文件，该文件记录了在发布期间需要的变更内容；
+- 第二阶段是在发布期间，Module Tools 会收集所有的变更文件来更新版本、更新发布日志，并发布新的包到 [npm Registry](https://www.npmjs.com/) 上。
 
 ## 跟踪变更
 
@@ -18,7 +18,7 @@ sidebar_position: 7
 - 配置文件修改
 - ...
 
-当这些变化一旦完成后，需要通过以下命令来对当前的变化进行记录：
+当这些任务一旦开发完成后，需要通过以下命令来对当前的变化进行记录：
 
 - [`modern change`](/guide/basic/command-preview#modern-change)
 
@@ -71,7 +71,7 @@ publish test
 
 发布项目可以执行以下命令：
 
-- [`modern publish`](/guide/basic/command-preview#modern-release)
+- [`modern release`](/guide/basic/command-preview#modern-release)
 
 `modern release` 命令可以将项目发布到 npm Registry。
 

package/docs/zh/guide/basic/test-your-project.mdx

@@ -8,7 +8,21 @@ sidebar_position: 6
 
 ## 先决条件和约定
 
-想要使用项目的测试功能，需要确保项目中包含依赖：`"@modern-js/plugin-testing"` ,可以通过[modern new](/guide/basic/command-preview#modern-new)来完成。
+想要使用项目的测试功能，需要确保项目中包含依赖：`"@modern-js/plugin-testing"`，以及按照类似下面的内容进行配置：
+
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import testPlugin from '@modern-js/plugin-testing';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    testPlugin(),
+  ],
+});
+```
+
+可以通过执行 [`modern new`](/guide/basic/command-preview#modern-new) 命令来开启测试功能。
 
 在模块工程方案中，对于测试用例或者说编写测试的文件有如下约定：
 
@@ -18,7 +32,7 @@ sidebar_position: 6
 
 ## 运行测试
 
-当准备好了依赖以及了解了测试用例在哪里编写后，我们可以通过以下命令来执行测试：
+当准备好了依赖、增加了相关配置以及了解了测试用例在哪里编写后，我们可以通过以下命令来执行测试：
 
 ```bash
 modern test
@@ -33,7 +47,6 @@ modern test --updateSnapshot
 
 ## 使用配置
 
-/obj/eden-cn/uhbfnupenuhf/test-result.png
 模块工程方案对测试提供了以下配置：
 
 - [`testing`](/api/config/testing)
@@ -68,7 +81,7 @@ export default function () {
 
 然后在测试文件中，我们可以这样。
 
-其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 中定义了。
+其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 的 `paths` 中定义了。
 
 ```typescript ./tests/index.test.ts
 import main from '@/index';
@@ -132,7 +145,7 @@ export const default () {
 
 然后在测试文件中，我们可以这样。
 
-其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 中定义了。
+其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 的 `paths` 中定义了。
 
 ```tsx ./tests/index.test.tsx
 import { render, screen } from '@modern-js/runtime/testing';

package/docs/zh/guide/basic/use-micro-generator.md

@@ -16,12 +16,42 @@ sidebar_position: 4
 
 ## Test 测试
 
-当我们想要对一些模块进行测试的时候，可以启用 test 测试功能。启动该功能后，**会在项目目录下创建 `tests` 目录以及相关文件，在 package.json 中新增 `"@modern-js/plugin-testing"` 依赖**。
+当我们想要对一些模块进行测试的时候，可以启用测试功能。启动该功能后，**会在项目目录下创建 `tests` 目录以及相关文件，在 package.json 中新增 `"@modern-js/plugin-testing"` 依赖**。
+
+:::tip
+在成功开启后，会提示需要手动在配置中增加如下类似的代码。
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import testPlugin from '@modern-js/plugin-testing';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    testPlugin(),
+  ],
+});
+```
+:::
 
 ## Storybook 调试
 
 当我们想要对组件或者普通模块进行调试的时候，可以启用 Storybook 调试功能。启动该功能后，**会在项目目录下创建 `stories` 目录以及相关文件，在 package.json 中新增 `"@modern-js/plugin-storybook"` 依赖**。
 
+:::tip
+在成功开启后，会提示需要手动在配置中增加如下类似的代码。
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import storybookPlugin from '@modern-js/plugin-storybook';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    storybookPlugin(),
+  ],
+});
+```
+:::
+
 关于如何启动 Storybook 以及如何使用 Storybook，可以查看下面的链接：
 
 - [`modern dev`](/guide/basic/command-preview#modern-dev)
@@ -35,8 +65,38 @@ sidebar_position: 4
 
 - [使用 Tailwind CSS](https://modernjs.dev/docs/apis/module/config/tools/tailwindcss)
 
+:::tip
+在成功开启后，会提示需要手动在配置中增加如下类似的代码。
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import tailwindPlugin from '@modern-js/plugin-tailwindcss';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    tailwindPlugin(),
+  ],
+});
+```
+:::
+
 ## 启动 Modern.js Runtime API
 
 **Modern.js 提供了 [Runtime API](https://modernjs.dev/docs/apis/module/runtime/) 能力，这些 API 只能在 Modern.js 的应用项目环境中使用**。如果你需要开发一个 Modern.js 应用环境中使用的组件，那么你可以开启该特性，微生成器会增加 `"@modern-js/runtime"`依赖。
 
 另外，Storybook 调试工具也会通过检测项目的依赖确定项目是否需要使用 Runtime API，并且提供与 Modern.js 应用项目一样的 Runtime API 运行环境。
+
+:::tip
+在成功开启后，会提示需要手动在配置中增加如下类似的代码。
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import runtime from '@modern-js/runtime/cli';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    runtime(),
+  ],
+});
+```
+:::

package/docs/zh/guide/basic/using-storybook.mdx

@@ -19,16 +19,16 @@ sidebar_position: 5
 
 因此它是一个复杂且功能强大的工具。
 
-模块工程解决方案集成了 Storybook ,因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下：
+模块工程解决方案集成了 Storybook，因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下。
 
 ## 调试代码
 
-在调试代码过程中需要引入组件代码，目前可以通过两种方式引入组件代码：
+在调试代码过程中需要引入项目代码，目前可以通过两种方式引入项目代码：
 
-- 引用组件产物
-- 引用组件源码
+- 引用项目产物
+- 引用项目源码
 
-我们更推荐使用第一种“**引用组件产物**”的方式。因为它几乎接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。
+我们推荐使用第一种“**引用项目产物**”的方式。因为它更接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。不过我们也可以在测试项目功能的时候引用源码，在验证项目产物的时候引用项目的包名。
 
 接下来我们分别讲一下这两种方式具体如何使用。
 
@@ -49,7 +49,7 @@ sidebar_position: 5
 ---
 
 确保 `package.json` 的 `main` 和 `types`
-的值为真实的路径。
+的值为正确的产物路径。
 
 ```json package.json
 {
@@ -70,7 +70,7 @@ export const content = 'hello world';
 ---
 
 确保在 `stories/tsconfig.json` 中设置了指向项目根目录的 `paths` 配置。
-`paths` 的 `key` 与项目名称相同。
+`paths` 的 `key` 与项目名称相同，这样在编译过程中以及在代码中不会出现问题。
 
 ```json stories/tsconfig.json focus=5:7
 {
@@ -78,7 +78,8 @@ export const content = 'hello world';
   "compilerOptions": {
     "baseUrl": "../",
     "paths": {
-      "foo": ["."]
+      "foo": ["."],
+      "foo/*": ["./*"]
     }
   },
   "include": [
@@ -89,7 +90,7 @@ export const content = 'hello world';
 
 ---
 
-最后在 Story 代码中直接以项目名称的方式引用。
+在 Story 代码中直接以项目名称的方式引用。
 
 ```tsx stories/index.stories.tsx focus=1:1
 import { content } from 'foo';
@@ -103,9 +104,30 @@ export default {
 };
 ```
 
+---
+
+最后在执行命令的时候，先启动监听模式的源码构建，然后启动 Storybook 调试。
+
+<CH.Code>
+
+``` bash terminal-1
+## 源码构建
+modern build --watch
+```
+
+---
+
+``` bash terminal-2
+## Storybook 调试
+modern dev storybook
+```
+
+</CH.Code>
+
 </CH.Spotlight>
 
-如果在开发过程中，遇到无法实时获得类型定义的情况，此时：
+:::info
+在开发过程中，可能会遇到无法实时获得类型定义的情况。因为只有当保存代码后，产物目录下的类型文件才会更新。此时：
 
 对于 `pnpm` 的项目，可以按照下面的内容对 `package.json` 进行修改：
 
@@ -123,11 +145,12 @@ export default {
 > 关于 pnpm 的 `publishConfig` 的使用，可以阅读下面这个[链接](https://pnpm.io/package_json#publishconfig)。
 
 而对于 npm 和 Yarn 的项目，则只能通过手动的方式在**开发阶段**和**发布阶段**对 `package.json` 的 `types` 的值进行修改。
+:::
 
 那么为什么可以直接引用产物呢？
 
-1. 在执行 `modern dev storybook` 命令之前，会自动执行 `modern build` 命令，保证项目构建产物的存在。
-2. 在 Storybook 内部增加了以项目名称作为别名的处理，保证能够**根据 `package.json` 解析出项目的产物路径**。
+1. 在执行 `modern dev storybook` 命令之前，执行 `modern build --watch` 命令，保证项目构建产物的存在。
+2. 在 Storybook 内部增加了根据 `tsconfig.json` 文件的 `compilerOptions.paths` 配置或者（在 JS 项目中）直接以项目名称作为别名的处理逻辑，保证能够**根据 `package.json` 解析出项目的产物路径**。
 
 ### 引用组件源码
 
@@ -145,11 +168,14 @@ export default {
 };
 ```
 
-那么为什么不推荐使用源码的方式呢？
 
+:::tip{title='为什么不推荐使用源码的方式?'}
 不仅仅是因为使用组件源码无法验证组件产物是否正确，**同时模块工程对于构建产物支持的一些配置无法完全转换为 Storybook
 内部的配置**。如果某些配置无法进行相互转换的话，就会在 Storybook 调试过程中出现不符合预期的结果。
 
+Module Tools 是基于 Esbuild 实现的，而 Storybook 是基于 Webpack 实现的。Esbuild 的配置无法与 Webpack 完全兼容。
+:::
+
 ## 配置 Storybook
 
 Storybook 官方通过一个名为 `.storybook` 的文件夹来进行项目配置，其中包含各种配置文件。**在模块工程方案中，可以在项目的 `config/storybook` 目录下增加 Storybook 配置文件。**

package/docs/zh/guide/intro/getting-started.md

@@ -6,22 +6,30 @@ sidebar_position: 3
 
 ## 三分钟快速上手
 
-想要实际体验 Module Tools？首先需要安装 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.18.0**。
+想要实际体验 Module Tools？首先需要安装 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.18.0**。我们推荐使用 Node.js 16 的 LTS 版本。
 
 然后在你的项目里安装以下依赖：
 
-- `@modern-js/module-tools`
-- `@modern-js/plugin-testing`
-
-> 如果是一个 TypeScript 项目，则需要增加 `"typescript"` 依赖。
+- `"@modern-js/module-tools"`
+- `"typescript"`（如果不是 TypeScript 项目，则省略）
 
 ```bash
-npm install -D @modern-js/module-tools @modern-js/plugin-testing
+npm install -D @modern-js/module-tools typescript
 ```
 
 > 对于使用 pnpm 或者 Yarn 包管理器的项目，只需要替换 npm 就可以了。**推荐使用 pnpm**。
 
-接着在项目的 `package.json` 文件里增加命令 `"build": "modern build"`：
+接着在项目的根目录下创建 `modern.config.(t|j)s` 文件：
+
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+
+export default defineConfig({
+    plugins: [moduleTools()],
+})
+```
+
+最后在项目的 `package.json` 文件里增加命令 `"build": "modern build"`：
 
 ```json
 {
@@ -33,11 +41,11 @@ npm install -D @modern-js/module-tools @modern-js/plugin-testing
 
 如果你的项目存在 `src/index.(js|jsx)` 文件或者同时存在 `src/index.(ts|tsx)` 和 `tsconfig.json` 文件，那么恭喜你可以运行直接运行 `npm run build` 来使用 Module Tools 构建你的项目了。
 
-**如果你想要看看使用了模块工程方案的真实项目，可以执行以下命令**：
+**如果你想要看看使用了模块工程方案的完整项目，可以执行以下命令**：
 
 ```bash
 git clone https://github.com/modern-js-dev/module-tools-examples
-cd module-tools-example
+cd module-tools-example/base
 
 ## 执行构建：
 pnpm build
@@ -52,8 +60,6 @@ pnpm dev storybook
 pnpm test
 ```
 
-> 上面的链接对应的内容待补充
-
 **如果你想要创建一个完整的模块工程项目，可以执行以下命令：**
 
 ```bash

package/docs/zh/index.md

@@ -4,27 +4,33 @@ pageType: home
 hero:
   name: Module Tools
   text: 模块工程解决方案
-  tagline: 简单、强大、高性能的现代化npm包开发方案
+  tagline: 简单、强大、高性能的现代化 npm 包开发方案
   actions:
     - theme: brand
       text: 欢迎使用
       link: /guide/intro/welcome
+    - theme: alt
+      text: 快速上手
+      link: /guide/intro/getting-started
 
 features:
-  - title: 'Esbuild: 高性能的JS Bundler'
+  - title: 'Esbuild: 高性能的 JS Bundler'
     details: 基于 Esbuild 构建，构建速度极快，带给你极致的开发体验。
     icon: 🚀
-  - title: 'Storybook: 社区流行的UI开发工具'
-    details: 集成了Storybook，你可以使用它调试UI。
-    icon: 📦
-  - title: 'transform + bundle'
-    details: 支持bundle和bundleless两种构建模式。
+  - title: '双构建模式'
+    details: 支持 Bundle 和 Bundleless 两种构建模式。
     icon: ✨
-  - title: '零配置'
-    details: 无需任何配置即可开发你的npm包，内置预设覆盖多种场景。
+  - title: '开箱即用'
+    details: 无需过多配置即可开发你的 npm 包，内置预设覆盖多种场景。
     icon: 🛠️
   - title: '扩展性强: 提供强大的插件机制'
-    details: 通过其插件扩展机制，你可以轻松的扩展Module tools的各项能力。
+    details: 通过其插件扩展机制，你可以轻松的扩展 Module tools 的各项能力。
     icon: 🎨
+  - title: 'Storybook: 社区流行的 UI 开发工具'
+    details: 集成了 Storybook，你可以使用它调试 UI。
+    icon: 📦
+  - title: 'Jest: 令人愉快的测试框架'
+    details: 集成了 Jest，使得代码测试更加容易。
+    icon: 📐
 ---
 # index

package/docs/zh/plugins/guide/getting-started.mdx

@@ -44,7 +44,7 @@ export const ExamplePlugin = (): CliPlugin<ModuleTools> => {
           console.info('build over');
         }
       };
-    };
+    },
   };
 };
 ```

package/modern.config.ts

@@ -6,8 +6,6 @@ import { pluginAutoSidebar } from '@modern-js/doc-plugin-auto-sidebar';
 const theme = require('shiki/themes/nord.json');
 const { version } = require('./package.json');
 
-const isDevCommand = process.env.NODE_ENV !== 'production';
-
 function getI18nHelper(lang: 'zh' | 'en') {
   const cn = lang === 'zh';
   const prefix = cn ? '' : '/en';
@@ -116,10 +114,10 @@ export default defineConfig({
         },
       ],
     },
-  },
-  builderConfig: {
-    dev: {
-      startUrl: 'http://localhost:<port>/module-tools/',
+    builderConfig: {
+      dev: {
+        startUrl: 'http://localhost:<port>/module-tools/',
+      },
     },
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modern-js/module-tools-docs",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "docs",
   "main": "index.js",
   "keywords": [],
@@ -11,11 +11,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "shiki": "^0.11.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.2.0",
-    "@modern-js/doc-tools": "2.2.0"
+    "@modern-js/doc-tools": "2.3.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.3.0"
   },
   "scripts": {
     "dev": "modern dev",
-    "build": "modern build"
+    "build:doc": "modern build"
   }
 }