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

package/LICENSE

@@ -0,0 +1,144 @@
+MIT License
+
+Copyright (c) 2021 Modern.js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+The code implementation modified from external library  are:
+
+- vite
+
+    MIT License
+
+    Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.
+
+- wmr
+
+    MIT License
+
+    Copyright (c) 2020 The Preact Authors
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.
+
+- bundle-require
+
+    The MIT License (MIT)
+
+    Copyright © 2021 EGOIST (https://github.com/sponsors/egoist)
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE
+
+- react-dev-utils
+
+    MIT License
+
+    Copyright (c) 2013-present, Facebook, Inc.
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.
+
+- jest-cli
+
+    MIT License
+
+    Copyright (c) Facebook, Inc. and its affiliates.
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.

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

@@ -328,8 +328,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // Whether to disable the source build before the dev command is executed
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },
@@ -337,11 +335,11 @@ export interface DevToolData {
 }
 ```
 
-:::tip{title='About disableRunBuild configuration'}
+<!-- :::tip{title='About disableRunBuild configuration'}
 When dev a project, it may be possible to set `disableRunBuild: true` to disable build tasks for source execution (in listening mode) if you only need to dev code functionality.
 
 The currently supported Storybook dev supports using source code products as dev objects, so `disableRunBuild: false` in the Storybook plugin.
-:::
+::: -->
 
 ### `beforeDev`
 
@@ -371,8 +369,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // Whether to disable the source build before the dev command is executed
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },
@@ -434,8 +430,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // Whether to disable the source build before the dev command is executed
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },
@@ -471,8 +465,6 @@ export interface DevToolData {
     name: string;
     value: string;
   };
-  // Whether to disable the source build before the dev command is executed
-  disableRunBuild?: boolean;
   action: (
     options: { port?: string },
     context: { isTsProject?: boolean },

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

@@ -2,25 +2,69 @@
 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` 命令的时候发生了什么。
 
-## 深入理解 `buildConfig`
+## Extending the dev command
 
-那么首先我们来理解 **bundle** 和 **bundleless** 的构建模式。
+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.
 
-### bundle 和 bundleless
+* [Development of plugins](plugins/guide/getting-started)
+* [Debugging Tools Plugin API](/api/plugin-api/plugin-hooks#调试钩子)
 
-### input 与 sourceDir 的关系
+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, if you need to read the build product of the project. Then **don't forget to execute the `modern build` command to ensure the existence of the project's build product before executing the `modern build --platform` command to start the Storybook build**.
 :::
 
 ## `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 recommend using the first "**referenced project product**" approach. Because it is closer to the real usage scenario, not only can we debug the component functionality, but also verify the correctness of the build product. However, we can also refer to the source code when testing the project functionality and refer to the project package name when verifying the project product.
 
 Next, we will talk about how to use each of these two methods.
 
@@ -88,7 +88,7 @@ The `key` of `paths` is the same as the project name.
 
 ---
 
-Finally, it is referenced directly in the Story code by the project name.
+Referenced directly in Story code by the project name.
 
 ```tsx stories/index.stories.tsx focus=1:1
 import { content } from 'foo';
@@ -102,6 +102,26 @@ export default {
 };
 ```
 
+---
+
+Finally, when executing the command, first start the source build in listening mode and then start Storybook debugging.
+
+<CH.Code>
+
+``` bash terminal-1
+## Source Code Build
+modern build --watch
+```
+
+---
+
+``` bash terminal-2
+## Storybook Debug
+modern dev storybook
+```
+
+</CH.Code>
+
 </CH.Spotlight>
 
 If, during development, you encounter a situation where the type definition is not available in real time, at that point.
@@ -125,8 +145,8 @@ For npm and Yarn projects, the values of `types` of `package.json` can only be c
 
 So why is it possible to reference the product directly?
 
-1. the `modern build` command is executed automatically before the `modern dev storybook` command, ensuring the existence of the project build product.
-2. The project name is added as an alias inside Storybook to ensure that the path to the project's product can be parsed **according to `package.json`**.
+1. execute `modern build --watch` command before executing `modern dev storybook` command to ensure the existence of project build products.
+2. Add processing logic inside Storybook to ensure that the project's product paths can be parsed **according to `package.json`, based on the `compilerOptions.paths` configuration in the `tsconfig.json` file or (in JS projects) directly with the project name as an alias**.
 
 ### Referencing component source code
 
@@ -144,10 +164,12 @@ export default {
 };
 ```
 
-So why is the source code approach not recommended?
-
+:::tip{title='why is the source code approach not recommended'}
 Not only is it impossible to verify that the component product is correct using the component source code, **but also some of the configurations supported by the module project for building the product cannot be fully translated into Storybook internal configuration**. If some of the configurations cannot be converted to each other, there will be unintended results during Storybook debugging.
 
+Module Tools is based on Esbuild, while Storybook is based on Webpack, and Esbuild's configuration is not fully compatible with Webpack.
+:::
+
 ## Configure Storybook
 
 Storybook is officially configured for projects through a folder called `.storybook`, which contains various configuration files. **In a module project scenario, Storybook configuration files can be added to the `config/storybook` directory of the project.**

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

@@ -2,26 +2,36 @@
 sidebar_position: 3
 ---
 
-# Quick start
+# Quick Start
 
 ## 3 minute demo
 
-Want to experience Module Tools in action? The only prerequisite you need is [Node.js LTS](https://github.com/nodejs/Release) and make sure your Node version is **>= 14.17.6**.
+Want to experience Module Tools in action? The only prerequisite you need is [Node.js LTS](https://github.com/nodejs/Release) and make sure your Node version is **>= 14.18.0**.We recommend using the LTS version of Node.js 16.
 
 From your shell, install the following dependencies in your project.
 
 - `@modern-js/module-tools`
-- `@modern-js/plugin-testing`
+- `"typescript"` (omitted if not a TypeScript project)
 
 > If it's a TypeScript project, add the `"typescript"` dependency.
 
 ```bash
-npm install -D @modern-js/module-tools @modern-js/plugin-testing
+npm install -D @modern-js/module-tools typescript
 ```
 
 > For projects that use pnpm or the Yarn package manager, just replace npm. **pnpm is recommended**.
 
-Then add the command `"build": "modern build"` to your project's `package.json` file.
+Next, create the `modern.config.(t|j)s` file in the root of the project.
+
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+
+export default defineConfig({
+    plugins: [moduleTools()],
+})
+```
+
+Finally, add the command `"build": "modern build"` to the project's `package.json` file.
 
 ```json
 {
@@ -33,11 +43,11 @@ Then add the command `"build": "modern build"` to your project's `package.json`
 
 If your project has a `src/index.(js|jsx)` file or both `src/index.(ts|tsx)` and `tsconfig.json` files, then congratulations you can run the `npm run build` command directly to build your project with Module Tools.
 
-**If you want to see real projects that use the module engineering solution, you can execute the following command**.
+**If you want to see the complete project using the modular engineering scheme, you can execute the following command**.
 
 ```bash
 git clone https://github.com/modern-js-dev/module-tools-examples
-cd module-tools-example
+cd module-tools-example/base
 
 ## Execute the build.
 pnpm build
@@ -50,7 +60,6 @@ pnpm dev storybook
 
 ## Test
 pnpm test
-pnpm test
 ```
 
 **If you want to create a complete module project, you can execute the following command:**

package/docs/en/index.md

@@ -7,24 +7,30 @@ hero:
   tagline: simple, powerful, high-performance modern npm package development solution
   actions:
     - theme: brand
-      text: welcome
-      link: /guide/intro/welcome
+      text: Welcome
+      link: /en/guide/intro/welcome
+    - theme: alt
+      text: Quick Start
+      link: /en/guide/intro/getting-started
 
 features:
   - title: 'Esbuild: The High Performance JS Bundler'
     details: Built on Esbuild, the build is extremely fast and gives you the ultimate development experience.
     icon: 🚀
-  - title: 'Storybook: The community popular UI development tool'
-    details: Integrated with Storybook, you can use it to debug UI.
-    icon: 📦
-  - title: 'transform + bundle'
+  - title: 'Two build modes'
     details: Both bundle and bundleless build modes are supported.
     icon: ✨
-  - title: 'zero configuration'
-    details: Develop your npm packages without any configuration, with built-in presets covering multiple scenarios.
+  - title: 'Out of the box'
+    details: Develop your npm packages without too much configuration, with built-in presets covering a wide range of scenarios.
     icon: 🛠️
   - title: 'Extensible: Provides a powerful plugin mechanism'
     details: With its plugin extension mechanism, you can easily extend the capabilities of Module Tools.
     icon: 🎨
+  - title: 'Storybook: The community popular UI development tool'
+    details: Integrated with Storybook, you can use it to debug UI.
+    icon: 📦
+  - title: 'Jest: Delightful Testing Framework'
+    details: Jest integration makes it easier to test code。
+    icon: 📐
 ---
 # index

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

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