@modern-js/module-tools-docs 2.24.0 → 2.25.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @modern-js/module-tools-docs
 
+## 2.25.0
+
+### Minor Changes
+
+- ba6f5a6: docs: update module doc FAQ contents
+  docs: 更新 module 文档的 FAQ 内容
+
+### Patch Changes
+
+- Updated dependencies [9aa2c25]
+  - @modern-js/doc-tools@2.25.0
+  - @modern-js/doc-plugin-auto-sidebar@2.25.0
+
 ## 2.24.0
 
 ### Patch Changes

package/docs/en/api/config/build-config.md

@@ -455,6 +455,8 @@ Specify the entry file for the build, in the form of an array that can specify t
 - **Type**: `string[] | Record<string, string>`
 - **Default**: `['src/index.ts']` in `bundle` mode, `['src']` in `bundleless` mode
 
+**Array usage:**
+
 ```js modern.config.ts
 export default {
   buildConfig: {
@@ -463,11 +465,34 @@ export default {
 };
 ```
 
+**Object usage:**
+
+When you need to modify the output file name in bundle mode, you can use an object configuration.
+
+**The key of the object is the file name of the output, and the value is the file path of the source code.**
+
+```js modern.config.ts
+export default defineConfig({
+  buildConfig: {
+    format: 'esm',
+    input: {
+      'index.esm': './src/index.ts',
+    },
+  },
+});
+```
+
 ## jsx
 
-Specify the compilation method of jsx, default support React17, automatically inject jsx runtime code
+Specify the compilation method of JSX, default support React17, automatically inject JSX Runtime code. If you need to support React16, set `jsx` to `transform`.
 
-- **Type**: `automatic | classic`
+> For more information about JSX Transform, you can refer to the following links:
+>
+> - [React Blog](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)。
+> - [esbuild JSX](https://esbuild.github.io/api/#jsx)
+>
+
+- **Type**: `automatic | transform`
 - **Default**: `automatic`
 
 ## metafile
@@ -744,6 +769,22 @@ export default {
 
 See [PostCSS](https://github.com/postcss/postcss#options) for detailed configuration
 
+**Basic usage：**
+
+``` js modern.config.ts
+export default defineConfig({
+  buildConfig: {
+    style: {
+      postcss: {
+        plugins: [
+          yourPostCSSPlugin,
+        ],
+      },
+    },
+  },
+});
+```
+
 ## style.inject
 
 Configure whether to insert CSS styles into JavaScript code in bundle mode.

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

@@ -22,7 +22,7 @@ The following Hooks are triggered in order when the `build` command is executed.
 Triggered before the execution of the overall build process.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -59,7 +59,7 @@ type Return = BuildConfig;
 Based on the build configuration, Module Tools will split the overall build into multiple sub-build tasks. The Hook will be triggered before each build subtask.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -81,7 +81,7 @@ Parameters and return value types.
 Triggered after the end of each build subtask.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -109,7 +109,7 @@ export interface BuildTaskResult {
 Triggered after the end of the overall build process.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -152,7 +152,7 @@ Hooks are triggered in the following order after executing `build --platform`.
 Gets information about the tasks that need to be run when executing the `build --platform` command.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -188,7 +188,7 @@ export interface RegisterBuildPlatformResult {
 Triggers all registered build tasks when the `build --platform` command is executed. `beforeBuildPlatform` will be triggered before the execution of the overall build task.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -218,7 +218,7 @@ export interface RegisterBuildPlatformResult {
 When the `build --platform` command is executed, all registered build tasks will be triggered. `buildPlatform` will be triggered before each build task is executed.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -244,7 +244,7 @@ export interface Options {
 When the `build --platform` command is executed, all registered build tasks will be triggered. `afterBuildPlatform` will be triggered after the overall platform build task is finished.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -292,7 +292,7 @@ Register dev tool related data. Mainly contains.
 * The function to execute the dev task.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -346,7 +346,7 @@ The currently supported Storybook dev supports using source code products as dev
 Triggered before the dev task is executed after all dev tool metadata has been collected.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -395,7 +395,7 @@ const question = [
 `afterDevMenu` Triggered after selecting dev list/menu options.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -442,7 +442,7 @@ export interface DevToolData {
 Triggered before the dev task is executed.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -477,7 +477,7 @@ export interface DevToolData {
 Triggered when the dev task process is interrupted.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {

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

@@ -26,7 +26,7 @@ If you need to extend the dev command, or rather provide your own Module Tools d
 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> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'do-nothing',
   setup() {
     return {

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

@@ -167,7 +167,7 @@ The Module Tools configuration file - `modern.config.(j|t)s` - is provided in th
 By default, the contents of the generated configuration file are as follows.
 
 ```ts title="modern.config.ts"
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [moduleTools()],
@@ -178,7 +178,7 @@ export default defineConfig({
 **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 title="modern.config.ts"
-import moduleTools from '@modern-js/module-tools';
+import { moduleTools } from '@modern-js/module-tools';
 
 export default {
   plugins: [moduleTools()],

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

@@ -9,7 +9,7 @@ sidebar_position: 3
 When the `modern build` command is used in an initialized project, the products are generated according to the default configuration supported by Module Tools. The default supported configurations are specified as follows.
 
 ```ts title="modern.config.ts"
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [moduleTools()],
@@ -58,7 +58,7 @@ 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.
 
 ```ts title="modern.config.ts"
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [moduleTools()],

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

@@ -22,13 +22,13 @@ When we want to test some modules, we can enable the test feature. When this fea
 :::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';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { testingPlugin } from '@modern-js/plugin-testing';
 
 export default defineConfig({
   plugins: [
     moduleTools(),
-    testPlugin(),
+    testingPlugin(),
   ],
 });
 ```
@@ -41,8 +41,8 @@ The **Storybook feature** can be enabled when we want to debug a component or a
 :::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';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { storybookPlugin } from '@modern-js/plugin-storybook';
 
 export default defineConfig({
   plugins: [
@@ -71,8 +71,8 @@ For more information on how to use Tailwind CSS in your module projects, check o
 :::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';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
 
 export default defineConfig({
   plugins: [
@@ -94,7 +94,7 @@ Also, the Storybook debugging tool will determine if the project needs to use th
 :::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 { moduleTools, defineConfig } from '@modern-js/module-tools';
 import runtime from '@modern-js/runtime/cli';
 
 export default defineConfig({

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

@@ -54,7 +54,7 @@ npm install -D @modern-js/module-tools typescript
 Next, create the `modern.config.(t|j)s` file in the root of the project.
 
 ``` ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
     plugins: [moduleTools()],

package/docs/en/plugins/guide/setup-function.mdx

@@ -11,7 +11,7 @@ In the [[Plugin object]](/plugins/guide/plugin-object) section we know that the
 The `setup` function of the plugin will provide an `api` object parameter, and you can call some of the methods provided on this object to get information about the configuration, project context, etc.
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup(api) {
@@ -79,7 +79,7 @@ Used to get the executors of Hooks and trigger the execution of a specific Hook.
 ```ts
 import type { CliPlugin } from '@modern-js/core';
 
-export default (): CliPlugin => ({
+export const myPlugin = (): CliPlugin => ({
   name: 'my-plugin',
 
   async setup(api) {
@@ -95,7 +95,7 @@ export default (): CliPlugin => ({
 The setup of a CLI plugin can be an asynchronous function that performs asynchronous logic during the initialization process.
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   async setup(api) {

package/docs/en/plugins/official-list/plugin-babel.md

@@ -24,7 +24,7 @@ pnpm add @modern-js/plugin-module-babel -D
 You can install the plugin with the following command:
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginBabel } from '@modern-js/plugin-module-babel';
 
 export default defineConfig({
@@ -42,7 +42,7 @@ See [babel options](https://babeljs.io/docs/options).
 Here is an example with `@babel/preset-env` configured
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginBabel } from '@modern-js/plugin-module-babel';
 
 export default defineConfig({

package/docs/en/plugins/official-list/plugin-banner.md

@@ -22,7 +22,7 @@ pnpm add @modern-js/plugin-module-banner -D
 You can install the plugin with the following command:
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginBanner } from '@modern-js/plugin-module-banner';
 
 export default defineConfig({
@@ -48,7 +48,7 @@ Note: CSS comments do not support the `//comment` syntax. Refer to [【CSS Comme
 
 ```ts
 import { modulePluginBanner } from '@modern-js/plugin-module-banner';
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 
 const copyRight = `/*

package/docs/en/plugins/official-list/plugin-import.mdx

@@ -26,7 +26,7 @@ pnpm add @modern-js/plugin-module-import -D
 In Module Tools, you can register plugins in the following way:
 
 ```ts
-import moduleTools, { defineConfig  } from '@modern-js/module-tools';
+import { moduleTools, defineConfig  } from '@modern-js/module-tools';
 import { modulePluginImport } from '@modern-js/plugin-module-import';
 
 export default defineConfig({
@@ -64,7 +64,7 @@ The elements of the array are configuration objects for `babel-plugin-import`, w
 
 ```ts
 import { modulePluginImport } from '@modern-js/plugin-module-import';
-import moduleTools, { defineConfig  } from '@modern-js/module-tools';
+import { moduleTools, defineConfig  } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
@@ -110,7 +110,7 @@ Add the following configuration on the right-hand side:
 
 ```ts
 import { modulePluginImport } from '@modern-js/plugin-module-import';
-import moduleTools, { defineConfig  } from '@modern-js/module-tools';
+import { moduleTools, defineConfig  } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
@@ -159,7 +159,7 @@ The template used here is [handlebars](https://handlebarsjs.com). There are some
 
 ```ts focus=8:8
 import { modulePluginImport } from '@modern-js/plugin-module-import';
-import moduleTools, { defineConfig  } from '@modern-js/module-tools';
+import { moduleTools, defineConfig  } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [

package/docs/en/plugins/official-list/plugin-node-polyfill.md

@@ -26,7 +26,7 @@ pnpm add @modern-js/plugin-module-node-polyfill -D
 In Module Tools, you can register plugins in the following way:
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
 
 export default defineConfig({
@@ -53,7 +53,7 @@ type NodePolyfillOptions = {
 Exclude the Node Polyfill to be injected.
 
 ``` ts focus=7:9
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
 
 export default defineConfig({
@@ -71,7 +71,7 @@ export default defineConfig({
 Override the built-in Node Polyfill.
 
 ``` ts focus=7:9
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
 
 export default defineConfig({

package/docs/en/plugins/official-list/plugin-polyfill.md

@@ -27,7 +27,7 @@ pnpm add @modern-js/plugin-module-polyfill -D
 In Module Tools, you can register plugins in the following way:
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginPolyfill } from '@modern-js/plugin-module-polyfill';
 
 export default defineConfig({
@@ -55,7 +55,7 @@ See [Babel target](https://babeljs.io/docs/options#targets).
 This is a example.
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginPolyfill } from '@modern-js/plugin-module-polyfill';
 
 export default defineConfig({

package/docs/zh/api/config/build-config.md

@@ -454,6 +454,8 @@ js 产物输出的格式,其中 `iife` 和 `umd` 只能在 `buildType` 为 `bund
 - 类型： `string[] | Record<string, string>`
 - 默认值： `bundle` 模式下默认为 `['src/index.ts']`，`bundleless` 模式下默认为 `['src']`
 
+**数组用法：**
+
 ```js modern.config.ts
 export default defineConfig({
   buildConfig: {
@@ -462,11 +464,33 @@ export default defineConfig({
 });
 ```
 
+**对象用法：**
+
+当在 bundle 模式下需要修改产物的输出文件名称的时候，可以使用对象形式进行配置。
+
+**对象的 Key 是产物的文件名称，Value 是源码的文件路径。**
+
+```js modern.config.ts
+export default defineConfig({
+  buildConfig: {
+    format: 'esm',
+    input: {
+      'index.esm': './src/index.ts',
+    },
+  },
+});
+```
+
 ## jsx
 
-指定 jsx 的编译方式, 默认支持 React17 以上,自动注入 jsx 运行时代码。
+指定 JSX 的编译方式，默认支持 React17 以上，自动注入 JSX 运行时代码。如果需要支持 React16，则设置 `jsx` 为 `transform`。
 
-- 类型： `automatic | classic`
+> 关于 JSX Transform，可以参考以下链接：
+>
+> - [React Blog](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)。
+> - [esbuild JSX](https://esbuild.github.io/api/#jsx)
+>
+- 类型： `automatic | transform`
 - 默认值： `automatic`
 
 ## metafile
@@ -744,6 +768,22 @@ export default defineConfig({
 
 详细配置查看 [PostCSS](https://github.com/postcss/postcss#options)。
 
+**基础使用：**
+
+``` js modern.config.ts
+export default defineConfig({
+  buildConfig: {
+    style: {
+      postcss: {
+        plugins: [
+          yourPostCSSPlugin,
+        ],
+      },
+    },
+  },
+});
+```
+
 ## style.inject
 
 配置打包模式下是否将 CSS 样式插入到 JavaScript 代码中。

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

@@ -22,7 +22,7 @@
 执行整体构建流程之前触发。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -61,7 +61,7 @@ type Return = BuildConfig;
 根据构建配置，Module Tools 会将整体构建分成多个子构建任务。该 Hook 将会在每一个构建子任务之前触发。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -83,7 +83,7 @@ export default (): CliPlugin<ModuleTools> => ({
 每一个构建子任务结束之后触发。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -111,7 +111,7 @@ export interface BuildTaskResult {
 整体构建流程结束之后触发。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -154,7 +154,7 @@ module-tools 还提供了 `build --platform` 命令来执行特定的构建任
 获取在执行 `build --platform` 命令时候需要运行的任务信息。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -190,7 +190,7 @@ export interface RegisterBuildPlatformResult {
 当执行 `build --platform` 命令的时候，会触发所有已注册的构建任务。`beforeBuildPlatform` 会在执行整体的构建任务之前触发。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -220,7 +220,7 @@ export interface RegisterBuildPlatformResult {
 当执行 `build --platform` 命令的时候，会触发所有已注册的构建任务。`buildPlatform` 会在每个构建任务执行之前触发。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -246,7 +246,7 @@ export interface Options {
 当执行 `build --platform` 命令的时候，会触发所有已注册的构建任务。`afterBuildPlatform` 会在整体 platform 构建任务结束后触发。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -294,7 +294,7 @@ export interface BuildPlatformResult {
 - 执行调试任务的函数。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -348,7 +348,7 @@ export interface DevToolData {
 在收集完所有调试工具元数据后，执行 dev 任务之前触发。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -397,7 +397,7 @@ const question = [
 `afterDevMenu` 选择调试列表/菜单选项后触发。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -444,7 +444,7 @@ export interface DevToolData {
 执行调试任务之前触发。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -479,7 +479,7 @@ export interface DevToolData {
 在中断调试任务进程时触发。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {

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

@@ -25,7 +25,7 @@ sidebar_position: 2
 一般来说，实现一个什么都不做的调试工具，其实现代码以及相关配置如下：
 
 ``` ts do-nothing.ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'do-nothing',
   setup() {
     return {

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

@@ -167,7 +167,7 @@ npm install -g pnpm
 默认情况下，生成的配置文件的内容如下：
 
 ```ts title="modern.config.ts"
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [moduleTools()],
@@ -178,7 +178,7 @@ export default defineConfig({
 **我们推荐使用 `defineConfig` 函数**，不过并不强制使用它。因此你也可以在配置文件中直接返回一个对象：
 
 ```ts title="modern.config.ts"
-import moduleTools from '@modern-js/module-tools';
+import { moduleTools } from '@modern-js/module-tools';
 
 export default {
   plugins: [moduleTools()],

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

@@ -9,7 +9,7 @@ sidebar_position: 3
 当在初始化的项目里使用 `modern build` 命令的时候，会根据 Module Tools 默认支持的配置生成相应的产物。默认支持的配置具体如下：
 
 ```ts title="modern.config.ts"
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [moduleTools()],
@@ -58,7 +58,7 @@ export default defineConfig({
 例如，如果使用预设函数的形式达到预设字符串 `"npm-library-es5"` 同样的效果，可以按照如下的方式：
 
 ```ts title="modern.config.ts"
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [moduleTools()],

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

@@ -11,13 +11,13 @@ sidebar_position: 6
 想要使用项目的测试功能，需要确保项目中包含依赖：`"@modern-js/plugin-testing"`，以及按照类似下面的内容进行配置：
 
 ``` ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
-import testPlugin from '@modern-js/plugin-testing';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { testingPlugin } from '@modern-js/plugin-testing';
 
 export default defineConfig({
   plugins: [
     moduleTools(),
-    testPlugin(),
+    testingPlugin(),
   ],
 });
 ```

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

@@ -21,13 +21,13 @@ sidebar_position: 4
 :::tip
 在成功开启后，会提示需要手动在配置中增加如下类似的代码。
 ``` ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
-import testPlugin from '@modern-js/plugin-testing';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { testingPlugin } from '@modern-js/plugin-testing';
 
 export default defineConfig({
   plugins: [
     moduleTools(),
-    testPlugin(),
+    testingPlugin(),
   ],
 });
 ```
@@ -40,8 +40,8 @@ export default defineConfig({
 :::tip
 在成功开启后，会提示需要手动在配置中增加如下类似的代码。
 ``` ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
-import storybookPlugin from '@modern-js/plugin-storybook';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { storybookPlugin } from '@modern-js/plugin-storybook';
 
 export default defineConfig({
   plugins: [
@@ -68,8 +68,8 @@ export default defineConfig({
 :::tip
 在成功开启后，会提示需要手动在配置中增加如下类似的代码。
 ``` ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
-import tailwindPlugin from '@modern-js/plugin-tailwindcss';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
 
 export default defineConfig({
   plugins: [
@@ -89,7 +89,7 @@ export default defineConfig({
 :::tip
 在成功开启后，会提示需要手动在配置中增加如下类似的代码。
 ``` ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import runtime from '@modern-js/runtime/cli';
 
 export default defineConfig({

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

@@ -51,7 +51,7 @@ npm install -D @modern-js/module-tools typescript
 接着在项目的根目录下创建 `modern.config.(t|j)s` 文件：
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [moduleTools()],

package/docs/zh/plugins/guide/setup-function.mdx

@@ -11,7 +11,7 @@ sidebar_position: 3
 插件的 `setup` 函数会提供一个 `api` 对象参数，你可以调用该对象上提供的一些方法来获取到配置、项目上下文等信息。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup(api) {
@@ -79,7 +79,7 @@ interface NormalizedConfig {
 ```ts
 import type { CliPlugin } from '@modern-js/core';
 
-export default (): CliPlugin => ({
+export const myPlugin = (): CliPlugin => ({
   name: 'my-plugin',
 
   async setup(api) {
@@ -95,7 +95,7 @@ export default (): CliPlugin => ({
 CLI 插件的 setup 可以是一个异步函数，在初始化过程中执行异步逻辑。
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   async setup(api) {

package/docs/zh/plugins/official-list/plugin-babel.md

@@ -24,7 +24,7 @@ pnpm add @modern-js/plugin-module-babel -D
 在 Module Tools 中，你可以按照如下方式注册插件：
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginBabel } from '@modern-js/plugin-module-babel';
 
 export default defineConfig({
@@ -42,7 +42,7 @@ See [Babel options](https://babeljs.io/docs/options)
 下面是一个配置了`@babel/preset-env`的例子：
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginBabel } from '@modern-js/plugin-module-babel';
 
 export default defineConfig({

package/docs/zh/plugins/official-list/plugin-banner.md

@@ -22,7 +22,7 @@ pnpm add @modern-js/plugin-module-banner -D
 在 Module Tools 中，你可以按照如下方式注册插件：
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginBanner } from '@modern-js/plugin-module-banner';
 
 export default defineConfig({
@@ -48,7 +48,7 @@ export default defineConfig({
 
 ```ts
 import { modulePluginBanner } from '@modern-js/plugin-module-banner';
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 const copyRight = `/*
  © Copyright 2020 xxx.com or one of its affiliates.

package/docs/zh/plugins/official-list/plugin-import.mdx

@@ -27,7 +27,7 @@ pnpm add @modern-js/plugin-module-import -D
 在 Module Tools 中，你可以按照如下方式注册插件：
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginImport } from '@modern-js/plugin-module-import';
 
 export default defineConfig({
@@ -65,7 +65,7 @@ type Options = {
 
 ```ts
 import { modulePluginImport } from '@modern-js/plugin-module-import';
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
@@ -111,7 +111,7 @@ import { MyButton as Btn } from 'foo';
 
 ```ts
 import { modulePluginImport } from '@modern-js/plugin-module-import';
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
@@ -132,7 +132,7 @@ export default defineConfig({
 
 ```ts focus=8:8
 import { modulePluginImport } from '@modern-js/plugin-module-import';
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
@@ -162,7 +162,7 @@ import Btn from 'foo/es/MyButton';
 
 ```ts focus=8:8
 import { modulePluginImport } from '@modern-js/plugin-module-import';
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [

package/docs/zh/plugins/official-list/plugin-node-polyfill.md

@@ -26,7 +26,7 @@ pnpm add @modern-js/plugin-module-node-polyfill -D
 在 Module Tools 中，你可以按照如下方式注册插件：
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
 
 export default defineConfig({
@@ -53,7 +53,7 @@ type NodePolyfillOptions = {
 排除要注入的 Node Polyfill。
 
 ``` ts focus=7:9
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
 
 export default defineConfig({
@@ -71,7 +71,7 @@ export default defineConfig({
 覆盖内置的 Node Polyfill。
 
 ``` ts focus=7:9
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
 
 export default defineConfig({

package/docs/zh/plugins/official-list/plugin-polyfill.md

@@ -27,7 +27,7 @@ pnpm add @modern-js/plugin-module-polyfill -D
 在 Module Tools 中，你可以按照如下方式注册插件：
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginPolyfill } from '@modern-js/plugin-module-polyfill';
 
 export default defineConfig({
@@ -55,7 +55,7 @@ type options = {
 下面是一个例子：
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginPolyfill } from '@modern-js/plugin-module-polyfill';
 
 export default defineConfig({

package/modern.config.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import docTools, { defineConfig, NavItem } from '@modern-js/doc-tools';
+import { docTools, defineConfig, NavItem } from '@modern-js/doc-tools';
 import { remarkCodeHike } from '@code-hike/mdx';
 import { pluginAutoSidebar } from '@modern-js/doc-plugin-auto-sidebar';
 

package/package.json

@@ -9,15 +9,15 @@
     "directory": "packages/document/module-doc"
   },
   "license": "MIT",
-  "version": "2.24.0",
+  "version": "2.25.0",
   "main": "index.js",
   "dependencies": {
     "@code-hike/mdx": "^0.7.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "shiki": "^0.11.1",
-    "@modern-js/doc-tools": "2.24.0",
-    "@modern-js/doc-plugin-auto-sidebar": "2.24.0"
+    "@modern-js/doc-plugin-auto-sidebar": "2.25.0",
+    "@modern-js/doc-tools": "2.25.0"
   },
   "scripts": {
     "dev": "modern dev",