@modern-js/module-tools-docs 2.2.0-beta.0 → 2.2.1-beta.1

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

@@ -2,25 +2,78 @@
 sidebar_position: 2
 ---
 
-# 深入理解 dev 命令
+# In-depth understanding of the dev command
 
-在【基础使用】的部分，我们已经知道可以通过 `buildConfig` 配置对项目的输出产物进行修改。`buildConfig` 不仅描述了产物的一些特性，同时还为构建产物提供了一些功能。
+The `dev` command provided by the module project is mainly used for debugging the code.
 
-:::tip{title=注意}
-如果你还不清楚 `buildConfig` 是什么，建议花一些时间通过下面的链接了解一下：
+## The overall flow of the command run
 
-- 【[修改输出产物](/guide/basic/modify-output-product)】
+1. When the `dev` command is executed, Module Tools starts looking for debugging tools or tasks that can be executed. A debugging tool or task is a Module Tools debugging tool plugin like Storybook.
+2. When a debugging tool is found, it is executed immediately.
+3. When multiple debugging tools are found, the debugging tools list menu is displayed. A debug tool can be started by selecting the name option corresponding to it.
+4. When no debug tool is found, the user is informed that no debug tool is available.
 
-:::
+In addition to the `dev` command, you can also start a debugging tool or task directly by using the `dev [debug tool name]` option.
 
-而在本章里我们将要深入理解某些构建配置的使用以及了解执行 `modern build` 命令的时候发生了什么。
+When executing the `dev` command, the debugging tool can choose whether or not to perform a listening mode for code builds before starting, for example the Storybook debugging tool has this feature enabled.
 
-## 深入理解 `buildConfig`
 
-那么首先我们来理解 **bundle** 和 **bundleless** 的构建模式。
+## Storybook
 
-### bundle 和 bundleless
 
-### input 与 sourceDir 的关系
+Storybook is currently the official Module Tools debugging tool plugin provided by Module Works.
 
-## 构建过程
+As we mentioned above, Storybook performs the source build task in listening mode before it is started, so you will see log messages for both Storybook and the source build in the terminal. Changes to the build product are also triggered when the source code is updated, and Storybook hot updates are triggered when the build product changes.
+
+## Extending the dev command
+
+If you need to extend the dev command, or rather provide your own Module Tools debugging tool plug-in, then you will need to know the following first.
+
+* [Development of plugins](plugins/guide/getting-started)
+* [Debugging Tools Plugin API](/api/plugin-api/plugin-hooks#调试钩子)
+
+In general, the code to implement a debugging tool that does nothing and the associated configuration is as follows.
+
+``` ts do-nothing.ts
+export default (): CliPlugin<ModuleTools> => ({
+  name: 'do-nothing',
+  setup() {
+    return {
+      registerDev() {
+        return {
+          // Debugging tool name
+          name: 'do-nothing',
+          // Menu display content
+          menuItem: {
+            name: 'DoNothing',
+            value: 'do-nothing',
+          },
+          // The defined dev subcommand
+          subCommands: ['donothing', 'dn'],
+          async action() {
+            // dev logic
+            console.info('Run build --watch, and do nothing.');
+          },
+        };
+      },
+    };
+  },
+});
+```
+
+If this debugging tool plugin is required, it needs to be added to the configuration file.
+
+``` ts
+import doNothingPlugin from './plugins/do-nothing';
+
+export default defineConfig({
+  plugins: [
+    //..
+    doNothingPlugin()
+  ],
+});
+```
+
+At this point we can execute it when we execute the `dev` or `dev do-nothing` command. After execution, it will first execute the source build task in listening mode and print the log messages immediately afterwards.
+
+For currently officially supported debugging tools and third-party supported debugging tools, you can view them in [plugins list](plugins/official-list/overview).

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

@@ -176,8 +176,10 @@ export default defineConfig({
 });
 ```
 
-```js
-// modern.config.js
+**We recommend using the `defineConfig` function**, but it is not mandatory to use it. So you can also return an object directly in the config file: the
+
+``` ts
+// modern.config.ts
 import moduleTools from '@modern-js/module-tools';
 
 export default {
@@ -185,15 +187,3 @@ export default {
   buildPreset: 'npm-library',
 };
 ```
-
-**We recommend using the `defineConfig` function**, but it is not mandatory to use it. So you can also return an object directly in the config file: the
-
-```typescript
-// modern.config.ts
-export default {};
-```
-
-```js
-// modern.config.js
-export default {};
-```

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

@@ -33,7 +33,7 @@ When you want to start a project build, you can execute the `modern build` comma
 In addition to the above, module projects also support `platform` build mode, which can be used to perform build tasks for other tools. For example, it is currently officially supported to start a Storybook build task to generate Storybook products by executing the `modern build --platform` or `modern build --platform storybook` commands after installing the `@modern-js/plugin-storybook` plugin.
 
 :::tip{title=Note}
-When executing a Storybook build, it needs to read the project's build product. So **when running the `modern build --platform` command to start a Storybook build, run `modern build` once to ensure that the source build product exists**.
+When executing a Storybook build, it may need to read the project's build product. So **when the `modern build --platform` command is executed to start a Storybook build, the `modern build --watch` program is automatically executed first to ensure the existence of the source build product**.
 :::
 
 ## `modern new`

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

@@ -1,6 +1,7 @@
 ---
 sidebar_position: 3
 ---
+# modify-output-product
 
 ## Modify the output product
 
@@ -58,9 +59,10 @@ For example, if the output product is based on the preset string `"npm-library"`
 For example, to achieve the same effect as the preset string ``npm-library-es5"` using the form of a preset function, you can do the following.
 
 ```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 +71,11 @@ export default defineConfig({
 });
 ```
 
-In the above code implementation, `preset.NPM_LIBRARY` corresponds to the preset string `"npm-library"`, which represents the `"npm-library"` equivalent of a multi-group build-related configuration. We traverse the `NPM_LIBRARY` array, which contains multiple `buildConfig` objects, with the `map` method. We make a shallow copy of the original `buildConfig` object and modify the shallow copy to get `buildConfig.target`, specifying it as `es5`.
+In the above code implementation, `preset.NPM_LIBRARY` corresponds to the preset string `"npm-library"`, which represents the equivalent of `"npm-library"` for multiple sets of build-related configurations. We traverse the `NPM_LIBRARY` array, which contains multiple `buildConfig` objects, using the `map` method. We made a shallow copy of the original `buildConfig` object and modified the value of the `target` after the shallow copy, specifying it as `es5`.
+
 
 > NPM_LIBRARY`, you can check it with [BuildPreset API](/api/config/build-preset). The`preset`object contains not only`NPM_LIBRARY`, but also other similar constants.
+> We can not only use `preset.NPM_LIBRARY` to get the build configuration corresponding to `"npm-library"`, but also `preset['npm-library']` in this way.
 
 So what is the `buildConfig` object here? What is the basis for the build product feature mentioned before?
 

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

@@ -16,12 +16,43 @@ The microgenerator can be started via [`modern new`](/guide/basic/command-previe
 
 ## Test
 
-When we want to test some modules, we can enable the test test feature. When this feature is enabled, **a `tests` directory and related files will be created in the project directory, and a new `"@modern-js/plugin-testing"` dependency will be added to package.json**.
+When we want to test some modules, we can enable the test feature. When this feature is enabled, **a `tests` directory and related files will be created in the project directory, and a new `"@modern-js/plugin-testing"` dependency will be added to package.json**.
+
+
+:::tip
+After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import testPlugin from '@modern-js/plugin-testing';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    testPlugin(),
+  ],
+});
+```
+:::
 
 ## Storybook
 
 The **Storybook feature** can be enabled when we want to debug a component or a common module. When this feature is enabled, **the `stories` directory and related files are created in the project directory, and a new `"@modern-js/plugin-storybook"` dependency is added to package.json**.
 
+:::tip
+After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import storybookPlugin from '@modern-js/plugin-storybook';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    storybookPlugin(),
+  ],
+});
+```
+:::
+
 For more information on how to start Storybook and how to use it, check out the following link.
 
 - [`modern dev`](/en/guide/basic/command-preview#modern-dev)
@@ -37,6 +68,21 @@ For more information on how to use Tailwind CSS in your module projects, check o
 
 - Using Tailwind CSS
 
+:::tip
+After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
+``` 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
 
 <!-- 链接待补充 -->
@@ -44,3 +90,18 @@ For more information on how to use Tailwind CSS in your module projects, check o
 **Modern.js provides Runtime API capabilities that can only be used in the Modern.js application project environment**. If you need to develop a component for use in a Modern.js application environment, then you can turn on this feature and the microgenerator will add the `"@modern-js/runtime"` dependency.
 
 Also, the Storybook debugging tool will determine if the project needs to use the Runtime API by checking the project's dependencies and providing the same Runtime API runtime environment as the Modern.js application project.
+
+:::tip
+After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import runtime from '@modern-js/runtime/cli';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    runtime(),
+  ],
+});
+```
+:::

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

@@ -23,12 +23,12 @@ The modular engineering solution is integrated with Storybook, so you can pretty
 
 ## Debugging code
 
-Component code needs to be introduced during debugging code, and currently component code can be introduced in two ways:
+The project code needs to be introduced during the debugging process and can currently be introduced in two ways:
 
-- Referencing the component product
-- Referencing component source code
+- Use of project products
+- Using the project source code
 
-We recommend the first way of "**referencing component product**". Because it is almost close to the real usage scenario, not only can we debug the component functionality, but also verify the correctness of the build product.
+We prefer to use the first "**use project product**" approach. This is because it is closer to a real-life usage scenario and not only allows you to debug the functionality of the component, but also to verify the correctness of the build product.
 
 Next, we will talk about how to use each of these two methods.
 

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

@@ -4,27 +4,74 @@ 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` 命令的时候，调试工具可以选择是否在启动之前执行代码构建的监听模式，例如 Storybook 调试工具就开启了该功能。
 
-## 深入理解 `buildConfig`
+## Storybook
 
-### Bundle 和 Bundleless
+Storybook 是目前模块工程官方提供的 Module Tools 调试工具插件。
 
-那么首先我们来理解一下 Bundle 和 Bundleless。
+上面我们说到 Storybook 在启动之前会执行监听模式的源码构建任务，因此在终端里你会看到 Storybook 和源码构建的日志信息同时出现。并且在更新源码后会触发构建产物的变化，当构建产物变化的时候也会触发 Storybook 热更新。
 
-所谓 Bundle 是指对构建产物进行打包，构建产物可能是一个文件，也有可能是基于一定的[代码拆分策略](https://esbuild.github.io/api/#splitting)得到的多个文件。
+## 扩展 dev 命令
 
-而 Bundleless 则是指对每个源文件进行编译构建，但是并不将它们打包在一起。每一个产物文件都可以找到与之相对应的源码文件。
+如果需要扩展 dev 命令或者说提供自己的 Module Tools 调试工具插件，那么你需要先了解以下内容：
 
-### input 与 sourceDir 的关系
+* [开发插件](plugins/guide/getting-started)
+* [调试工具插件 API](/api/plugin-api/plugin-hooks#调试钩子)
 
-## 构建过程
+一般来说，实现一个什么都不做的调试工具，其实现代码以及相关配置如下：
+
+``` 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.');
+          },
+        };
+      },
+    };
+  },
+});
+```
+
+如果需要使用该调试工具插件，则需要在配置文件中增加它：
+
+``` 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 --watch` 程序确保源码构建产物的存在**。
 :::
 
 ## `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(),
+  ],
+});
+```
+:::