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

package/docs/en/api/config/plugins.md

@@ -9,9 +9,9 @@ This chapter describes the configuration of the registered module-tools plugin.
 - type: `Array<ModuleToolsPlugin>`
 
 ```js modern.config.ts
-import { ExamplePlugin } from '. /plugins/example';
+import { examplePlugin } from '. /plugins/example';
 export default defineConfig({
-  plugins: [ExamplePlugin()],
+  plugins: [examplePlugin()],
 });
 ```
 

package/docs/en/api/config/testing.md

@@ -5,7 +5,8 @@ sidebar_position: 5
 # Testing
 
 This chapter describes the test-related configuration
-:::tips
+
+:::tip
 You need to enable the unit testing feature with `pnpm run new` first.
 :::
 

package/docs/en/guide/advance/asset.mdx

@@ -18,7 +18,6 @@ For the handling of static files, the module project currently supports the foll
 
 - Set the static resource path to `. /assets`.
 - For files over **10kb** they are inlined into the code.
-- Use [SVGR](https://react-svgr.com/) for files with the `.svg` suffix.
 
 Let us look at the following example:
 
@@ -144,6 +143,3 @@ If the size of `bg.png` is larger than 10 kb, then the product content will be.
 
 </CH.Spotlight>
 
-## SVGR
-
-WIP

package/docs/en/guide/advance/build-umd.mdx

@@ -164,7 +164,7 @@ console.info(React);
 
 At this point we will see the product code like this.
 
-```js dist/index.js focus=7:12
+```js dist/index.js focus=12:18
 (function (global, factory) {
   if (typeof module === 'object' && typeof module.exports === 'object')
     factory();
@@ -203,7 +203,7 @@ export default () => {
 
 ** By default, the name of the source file is used as the name of the module's global variable in the browser. **For the above example, the product would read as follows:
 
-```js ./dist/index.js focus=6:6
+```js ./dist/index.js focus=9:9
 (function (global, factory) {
   if (typeof module === 'object' && typeof module.exports === 'object')
     factory(exports);
@@ -233,7 +233,7 @@ export default defineConfig({
 
 The construction products at this point are:
 
-```js ./dist/index.js focus=6:6
+```js ./dist/index.js focus=9:9
 (function (global, factory) {
   if (typeof module === 'object' && typeof module.exports === 'object')
     factory(exports);

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

@@ -10,7 +10,8 @@ In the [Basic Usage] section, we already knew that you can modify the output pro
 If you are not sure what `buildConfig` is, it is recommended to take some time to understand it by following this link.
 
 - [[modify-output-product](/en/guide/basic/modify-output-product)]
-  :::
+
+:::
 
 In this chapter we'll dive into the use of certain build configurations and understand what happens when the `modern build` command is executed.
 
@@ -34,7 +35,7 @@ In `buildConfig` you can specify whether the current build task is Bundle or Bun
 - When `buildType: 'bundleless'`, `input` defaults to `['src']`
   > In fact, at `buildType: 'bundle'`, the build tool detects the existence of a file matching the name rule `src/index.(j|t)sx?` and uses it as an entry file.
 
-:::warn{title=notes}
+:::warning{title=notes}
 It is recommended that you do not specify multiple source file directories during a Bundleless build, as unintended results may occur. Bundleless builds with multiple source directories are currently in an unstable stage.
 :::
 
@@ -44,7 +45,7 @@ We know from the defaults: **Bundle builds can generally specify a file path as
 
 In addition to setting `input` to an array, you can also set it to an object during the Bundle build process. **By using the object form, we can modify the name of the file that the build product outputs**. So for the following example, `. /src/index.ts` corresponds to the path of the build product file as `. /dist/main.js`.
 
-```tsx modern.config.ts
+```js modern.config.ts
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -79,7 +80,7 @@ The [`buildConfig.dts`](/en/api/config/build-config#dts) configuration is mainly
 
 Type generation is turned on by default, if you need to turn it off, you can configure it as follows:
 
-```ts ./modern.config.ts
+```js modern.config.ts
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -106,7 +107,7 @@ The **module engineering solution also supports packaging of type files**, altho
 
 During the Bundleless build process, if an alias appears in the source code, e.g.
 
-```ts ./src/index.ts
+```js ./src/index.ts
 import utils from '@common/utils';
 ```
 
@@ -123,7 +124,7 @@ However, there are some cases that cannot be handled at this time.
 
 General usage:
 
-```ts
+```js
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -141,7 +142,7 @@ export default defineConfig({
 
 For the use of `dts.only`:
 
-```ts
+```js
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -169,7 +170,7 @@ export default defineConfig({
 
 #### Environment variable replacement
 
-```ts
+```js
 import { defineConfig } from '@modern-js/module-tools';
 export default defineConfig({
   buildConfig: {
@@ -182,21 +183,21 @@ export default defineConfig({
 
 With the above configuration, we can put the following code.
 
-```
+```js
 // pre-compiler code
 console.log(process.env.VERSION);
 ```
 
 When executing `VERSION=1.0.0 modern build`, the conversion is:
 
-```
+```js
 // compiled code
 console.log('1.0.0');
 ```
 
 #### Global variable replacement
 
-```ts
+```js
 import { defineConfig } from '@modern-js/module-tools';
 export default defineConfig({
   buildConfig: {
@@ -209,14 +210,14 @@ export default defineConfig({
 
 With the above configuration, we can put the following code.
 
-```
+```js
 // pre-compile code
 console.log(VERSION);
 ```
 
 Convert to:
 
-```
+```js
 // post-compile code
 console.log('1.0.0');
 ```

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

@@ -10,7 +10,8 @@ sidebar_position: 2
 如果你还不清楚 `buildConfig` 是什么，建议花一些时间通过下面的链接了解一下：
 
 - 【[修改输出产物](/guide/basic/modify-output-product)】
-  :::
+
+:::
 
 而在本章里我们将要深入理解某些构建配置的使用以及了解执行 `modern build` 命令的时候发生了什么。
 

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

@@ -6,7 +6,7 @@ sidebar_position: 1
 
 ## Environment preparation
 
-In order to use the Modern.js module engineering solution, you first need [NodeJS](https://nodejs.org/zh/) engine, we recommend the latest [LTS version](https://github.com/nodejs/Release), and make sure the Node version is **>=14.17.6**. because non-stable NodeJS releases frequently have bugs. You might consider installing via [nvm-windows](https://github.com/coreybutler/nvm-windows) and [nvm](https://github.com/nvm-sh/nvm) (Mac/linux), so you can easily switch to different NodeJS versions that might be required for different projects that you work on.
+In order to use the Modern.js module engineering solution, you first need [NodeJS](https://nodejs.org/zh/) engine, we recommend the latest [LTS version](https://github.com/nodejs/Release), and make sure the Node version is **>=14.18.0**. because non-stable NodeJS releases frequently have bugs. You might consider installing via [nvm-windows](https://github.com/coreybutler/nvm-windows) and [nvm](https://github.com/nvm-sh/nvm) (Mac/linux), so you can easily switch to different NodeJS versions that might be required for different projects that you work on.
 
 ## Getting Started with npm
 
@@ -71,6 +71,7 @@ Similarly, you can install **only packages needed for local development and test
 ```
 
 **When installing or using third-party npm packages be sure to determine what they are for and whether they should be placed in `"dependencies"` or `"devDependencies"` by distinguishing between their types.**
+
 :::tip
 In general, packages that need to be used in source code are `dependencies` dependencies. Unless you are exporting dependent code locally via packaging, in which case it can be treated as a `devDependencies` dependency.
 :::
@@ -161,25 +162,31 @@ npm install -g pnpm
 
 ## Module Tools configuration file
 
-A configuration file for Module Tools is provided in the initial module project directory -- `modern.config.(j|t)s`. By default, no configuration is required, so the `modern.config` configuration file is not required to exist.
+The Module Tools configuration file - `modern.config.(j|t)s` - is provided in the project directory of the module project created with `@modern-js/create`. However, the `modern.config` configuration file is not required to exist.
 
-The contents of the initial configuration file are as follows.
+By default, the contents of the generated configuration file are as follows.
 
 ```typescript
 // modern.config.ts
-import { defineConfig } from '@modern-js/module-tools';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
-export default defineConfig({});
+export default defineConfig({
+  plugins: [moduleTools()],
+  buildPreset: 'npm-library',
+});
 ```
 
 ```js
 // modern.config.js
-const { defineConfig } = require('@modern-js/module-tools');
+import moduleTools from '@modern-js/module-tools';
 
-module.exports = defineConfig({});
+export default {
+  plugins: [moduleTools()],
+  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 configuration file: the:
+**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
@@ -188,5 +195,5 @@ export default {};
 
 ```js
 // modern.config.js
-module.exports = {};
+export default {};
 ```

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

@@ -55,6 +55,7 @@ The `modern new` command is used to start the microgenerator functionality, whic
 
 The following features can currently be enabled.
 
+- Testing support
 - Storybook debugging
 - Tailwind CSS support
 - Modern.js Runtime API
@@ -88,6 +89,7 @@ Options:
   -h, --help display help for command
 ```
 
+You need to execute `modern new` to turn on the test function before you can execute the `modern test` command.
 The `modern test` command will automatically run the `src/tests/*.test.(js|ts|jsx|tsx)` file as a test case.
 
 ## `modern lint`
@@ -204,5 +206,3 @@ Options:
 The `modern upgrade` command is used to upgrade the project Modern.js related dependencies to the latest version.
 
 Executing the command `npx modern upgrade` in the project root directory will update the Modern.js dependencies in `package.json` of the currently executing project to the latest version by default.
-
-command is provided in `@modern-js/module-tools` version **>= 1.17.0**, previous versions can be upgraded using `npx @modern-js/upgrade`.

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

@@ -2,143 +2,139 @@
 sidebar_position: 3
 ---
 
-# modify-output-product
-
-## Modify output product
+## Modify the output product
 
 ## Default output products
 
-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 as follows.
+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.
 
 ```typescript
-import { defineConfig } from '@modern-js/module-tools';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
-  buildPreset: 'base-config',
+  plugins: [moduleTools()],
+  buildPreset: 'npm-library',
 });
 ```
 
-**The default generated product has the following characteristics**:
-
-- The code format is [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules), or simply `cjs`.
-- Code syntax is supported up to `ES6`.
-- All code is packaged into a single file, i.e. **bundle** processing is performed.
-- The output root directory is the `dist` directory under the project, and the output directory for type files is `dist/types`.
+**The default generation product has the following characteristics**.
 
-:::tip
+- will generate [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules) and [ESM](https://nodejs.org/api/esm.html#modules- ecmascript-modules).
+- The code syntax is supported up to `ES6` , and more advanced syntax will be converted.
+- All code is packaged into one file, i.e. **bundle** processing is performed.
+- The output root directory is the `dist` directory under the project, and the type file output directory is `dist/types`.
 
-1. By "code syntax support up to ES6", we mean that the syntax supported by the product code will not exceed `ES6`. If the source code uses syntax above `ES6` (e.g. `ES2017`), it will be converted.
-   :::
-
-You may have the following questions when you see this:
+You may have the following questions when you see this.
 
 1. what is `buildPreset`?
-2. what determines these characteristics of the output?
+2. what determines these characteristics of the product?
 
 Then the next step is to first explain `buildPreset`.
 
 ## buildPreset
 
-`buildPreset` represents one or more sets of build-related configurations prepared in advance. By using the corresponding preset values of `buildPreset`, you can eliminate the troublesome and complicated configuration work and get the expected product.
+The `buildPreset` represents one or more sets of build-related configurations prepared in advance. By using the corresponding preset values of the `buildPreset`, you can eliminate the troublesome and complicated configuration work and get the expected product.
 
-### String form of `buildPreset`
+### String form of build preset
 
 The value of a **build preset can be in the form of a string**, so a build preset of this form is called a preset string.
 
-The module engineering solution provides generic build preset strings and corresponding variants, depending on the generic scenario in which the npm package is used. All currently supported preset strings can be viewed via the [BuildPreset API](/en/api/config/build-config). The relationship between **generic preset strings and variants** is explained here.
+The module engineering solution provides generic build preset strings and corresponding variants, depending on the generic scenario in which the npm package is used. All currently supported preset strings can be viewed via the [BuildPreset API](/api/config/build-preset). Here is an explanation about the relationship between **generic preset strings and variants**.
 
-Among the generic preset strings, `"npm-library"` can be used in the scenario of developing npm packages of the library type, which is suitable for most common module type projects. When `"npm-library"` is set, the output product of the project will have the following characteristics:
+Among the generic preset strings, `"npm-library"` can be used in the scenario of developing npm packages of the library type, which is suitable for most common module type projects. When `"npm-library"` is set, the output product of the project will have the following characteristics.
 
-- In the `dist/lib` directory you will get the product in the code format `cjs`, with syntax support up to `es6` and after packaging.
-- In the `dist/es` directory, you get code in the format `esm`, with syntax support up to `es6` and packaged.
+- In the `dist/lib` directory you will get code formatted as `cjs`, syntax supported up to `es6` and packaged.
+- In the `dist/es` directory, you get code in the format `esm`, with syntax support up to `es6` and after packaging.
 - In the `dist/types` directory, you get the type files. If it is not a TypeScript project, there is no such directory.
 
-The default string `"npm-library"` is a variant of the original product with modified **code-syntax support** and a string naming change to `"npm-library-[es5 | es2016.... . es2020 | esnext]"`.
+The default string `"npm-library"` is a variant of the original product with a modified **code syntax support** feature and a string naming change to `"npm-library-[es5 | es2016.... . es2020 | esnext]"`.
 
-For example, if the output product is based on the preset string `"npm-library"` and the syntax supported by the product code is changed to `es2017`, then simply changing `"npm-library"` to `"npm-library-es2017"` would be sufficient.
+For example, if the output product is based on the preset string `"npm-library"` and the syntax supported by the product code is changed to `es5`, then simply changing `"npm-library"` to `"npm-library-es5"` would be sufficient.
 
-### Function form of `buildPreset`
+### Build pre-defined function forms
 
 **In addition to the string form, the value of a build preset can also be in the form of a function, where the specific configuration corresponding to a preset value can be printed or modified**.
 
-For example, if the same effect as the preset string `"npm-library-es2017"` is achieved using the preset function form, it can be done as follows:
+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 { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   buildPreset({ preset }) {
     return preset.NPM_LIBRARY.map(config => {
-      return { ... .config, target: 'es2017' }
+      return { ... .config, target: 'es5' }
     });
   },
 });
 ```
 
-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 `es2017`.
+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`.
 
-> The specific value of `preset.NPM_LIBRARY` can be viewed via the [BuildPreset API](/en/api/config/build-config). The `preset` object contains not only `NPM_LIBRARY`, but also other similar constants.
+> 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.
 
-So what is the `buildConfig` object here? And what are the previously mentioned build product features based on?
+So what is the `buildConfig` object here? What is the basis for the build product feature mentioned before?
 
-We explain it next.
+Let's explain next.
 
 ## Build configuration (object)
 
-**`buildConfig` is a configuration object that describes how to compile and generate build products**. What was mentioned at the beginning about "_features of build products_" are actually properties supported by `buildConfig`. The currently supported properties cover the needs of most module type projects when building products. `buildConfig` not only contains some of the properties that products have, but also some of the features needed to build products. The following is a brief list from a classification point of view:
+**`buildConfig` is a configuration object that describes how to compile and generate build products**. What was mentioned at the beginning about "_features of build products_" are actually properties supported by `buildConfig`. The currently supported properties cover the needs of most module type projects when building products. `buildConfig` not only contains some properties that products have, but also contains some features needed to build products. The following is a brief list from a classification point of view.
 
 **The basic attributes of a build product include:**
 
-- Whether the product is packaged or not: the corresponding API is [`buildConfig.buildType`](/en/api/config/build-config#buildtype).
-- Product support for syntax: the corresponding API is [`buildConfig.target`](/en/api/config/build-config#target).
-- Output format: The corresponding API is [`buildConfig.format`](/en/api/config/build-config#format).
-- How to handle the output type file: the corresponding API is [`buildConfig.dts`](/en/api/config/build-config#dts).
-- How the sourceMap of the product is handled: the corresponding API is [`buildConfig.sourceMap`](/en/api/config/build-config#sourcemap).
-- The input (or source file) corresponding to the output: the corresponding API is [`buildConfig.input`](/en/api/config/build-config#input).
-- The directory of the output of the product: the corresponding API is [`buildConfig.outDir`](/en/api/config/build-config#outDir).
-- The source directory of the build: the corresponding API is [`buildConfig.sourceDir`](/en/api/config/build-config#sourcedir).
+- Whether the product is packaged or not: the corresponding API is [`buildConfig.buildType`](/api/config/build-config#buildtype).
+- Product support for syntax: the corresponding API is [`buildConfig.target`](/api/config/build-config#target).
+- Output format: the corresponding API is [`buildConfig.format`](/api/config/build-config#format).
+- How the output type file is handled: the corresponding API is [`buildConfig.dts`](/api/config/build-config#dts).
+- How the sourceMap of the product is handled: the corresponding API is [`buildConfig.sourceMap`](/api/config/build-config#sourcemap).
+- The input (or source file) corresponding to the output: the corresponding API is [`buildConfig.input`](/api/config/build-config#input).
+- The directory of the output of the product: the corresponding API is [`buildConfig.outDir`](/api/config/build-config#outDir).
+- Build source directory: the corresponding API is [`buildConfig.sourceDir`](/api/config/build-config#sourcedir).
 
-**Common functions needed to build products include:**
+**Common functions required for build products include:**
 
-- Alias: The corresponding API is [`buildConfig.alias`](/en/api/config/build-config#alias).
-- Static resource handling: The corresponding API is [`buildConfig.asset`](/en/api/config/build-config#asset).
+- Alias: The corresponding API is [`buildConfig.alias`](/api/config/build-config#alias).
+- Static resource handling: the corresponding API is [`buildConfig.asset`](/api/config/build-config#asset).
 - Third-party dependency handling: The corresponding APIs are
-  - [`buildConfig.autoExternal`](/en/api/config/build-config#autoexternal).
-  - [`buildConfig.externals`](/en/api/config/build-config#externals).
-- Copy: The corresponding API is [`buildConfig.copy`](/en/api/config/build-config#copy).
-- Global variable substitution: the corresponding API is [`buildConfig.define`](/en/api/config/build-config#define).
-- Specify [JSX](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) compilation method, the corresponding API is [`buildConfig.jsx`](/en/api/config/build-config#jsx).
+  - [`buildConfig.autoExternal`](/api/config/build-config#autoexternal).
+  - [`buildConfig.externals`](/api/config/build-config#externals).
+- Copy: The corresponding API is [`buildConfig.copy`](/api/config/build-config#copy).
+- Global variable substitution: the corresponding API is [`buildConfig.define`](/api/config/build-config#define).
+- Specify [JSX](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) compilation method, the corresponding API is [`buildConfig.jsx`](/api/config/ build-config#jsx).
 
 **Some advanced properties or less frequently used functions:**
 
-- Product code compression: The corresponding API is [`buildConfig.minify`](/en/api/config/build-config#minify).
-- Code splitting: [`buildConfig.splitting`](/en/api/config/build-config#splitting)
-- Specify whether the build product is for the NodeJS environment or the browser environment: the corresponding API is [`buildConfig.platform`](/en/api/config/build-config#platform).
+- Product code compression: The corresponding API is [`buildConfig.minify`](/api/config/build-config#minify).
+- Code splitting: [`buildConfig.splitting`](/api/config/build-config#splitting)
+- Specify whether the build product is for the NodeJS environment or the browser environment: the corresponding API is [`buildConfig.platform`](/api/config/build-config#platform).
 - umd product-related.
-  - Specifies the global variables imported externally to the umd product: the corresponding API is [`buildConfig.umdGlobals`](/en/api/config/build-config#umdglobals).
-  - Specify the module name of the umd product: the corresponding API is [`buildConfig.umdModuleName`](/en/api/config/build-config#umdmodulename).
+  - Specifies the global variables imported externally to the umd product: the corresponding API is [`buildConfig.umdGlobals`](/api/config/build-config#umdglobals).
+  - Specify the module name of the umd product: the corresponding API is [`buildConfig.umdModuleName`](/api/config/build-config#umdmodulename).
 
-In addition to the above categories, frequently asked questions and best practices about these APIs can be found at the following links.
+In addition to the above categories, frequently asked questions and best practices about these APIs can be found at the following links
 
-- [What are `bundle` and `bundleless`?](/en/guide/advance/in-depth-about-build#bundle-and-bundleless)
-- [The relationship between `input` and `sourceDir`](/en/guide/advance/in-depth-about-build#relationship-between-input-and-sourcedir)
-- [The multiple ways of generating type files in products](/en/guide/advance/in-depth-about-build#declaration-type-files)
-- [The use of `buildConfig.define` for different scenarios.](/en/guide/advance/in-depth-about-build#buildconfigdefine-usage-for-different-scenarios)
-- [How to handle third-party dependencies?](/en/guide/advance/external-dependency)
-- [How to use copy?](/en/guide/advance/copy)
-- [How to build umd products?](/en/guide/advance/build-umd)
-- [The capabilities currently supported by static resources.](/en/guide/advance/asset)
+- [What are `bundle` and `bundleless`?](/guide/advance/in-depth-about-build#bundle- and-bundleless)
+- [Relationship of `input` to `sourceDir`](/guide/advance/in-depth-about-build#input- to -sourcedir-)
+- [Multiple ways to generate type files in product](/guide/advance/in-depth-about-build#type-files).
+- [`buildConfig.define` Different ways to use it for different scenarios.](/guide/advance/in-depth-about-build#buildconfigdefine - How to use it for different scenarios)
+- [How to handle third-party dependencies?](/guide/advance/external-dependency)
+- [How to use copy?](/guide/advance/copy)
+- How do I build umd products? (/guide/advance/build-umd# sets the global variable name of the project)
+- [The capabilities currently supported by static resources.](/guide/advance/asset)
 
 ## When to use `buildConfig`
 
-`buildConfig` is one of the ways used to modify the product, **and only `buildConfig` will take effect when configured in conjunction with `buildPreset`**. So if configured as follows.
+`buildConfig` is one of the methods used to modify the product, **only `buildConfig` will take effect when configured in conjunction with `buildPreset`**. So if configured as follows.
 
 ```typescript
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
-  buildConfig: [{}],
-  buildPreset: 'base-config',
+  buildConfig: {
+    format: 'umd',
+  },
+  buildPreset: 'npm-library',
 });
 ```
 
@@ -150,4 +146,4 @@ Since both 'buildConfig' and 'buildPreset' are present, only the 'buildConfig' c
 
 The set or sets of build-related configurations represented by `buildPreset` are composed of `buildConfig`, **which can be used to customize output products** when the current project needs cannot be met using `buildPreset`.
 
-The process of using `buildConfig` is the process of thinking about "_what kind of build product to get_".
+The process of using `buildConfig` is the process of thinking about **what kind of build product to get**.

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

@@ -8,9 +8,7 @@ This chapter will describe how to test modules.
 
 ## Prerequisites and conventions
 
-To use the testing functionality of the project, you need to make sure that the project contains the following dependencies:
-
-- `"@modern-js/plugin-testing"`
+To use the testing features of the project, you need to make sure that the project contains the dependency: `"@modern-js/plugin-testing"` , which can be done with [modern new](/guide/basic/command-preview#modern-new).
 
 In the module engineering scheme, the following conventions are in place for test cases, or files for writing tests:
 

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

@@ -14,6 +14,10 @@ Thus with these capabilities, **Microgenerator can enable additional feature fun
 
 The microgenerator can be started via [`modern new`](/guide/basic/command-preview). The current Microgenerator features supported by the Module Engineering program are:
 
+## 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**.
+
 ## 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**.

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

@@ -150,8 +150,6 @@ Not only is it impossible to verify that the component product is correct using
 
 ## Configure Storybook
 
-### Configuration file
-
 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.**
 
 For more information on how to use the various Storybook configuration files, see the following links:
@@ -165,17 +163,7 @@ For more information on how to use the various Storybook configuration files, se
 
 In the future we will consider whether these configurations can be allowed to be modified, but for now we are limiting their use to reduce unpredictable issues.
 
-### `dev.storybook`
-
-In addition to the configuration file, the module engineering solution also provides a `dev.storybook` configuration item in the `modern.config.(j|t)s` project configuration file.
-
-The webpack configuration of Storybook can be modified via this configuration.
-
-{/* 链接待补充 */}
-
-- `dev.storybook.webpack`
-
-### Building Storybook Products
+## Building Storybook Products
 
 In addition to Storybook debugging of components or common modules, you can also perform Storybook build tasks with the following commands.
 

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

@@ -6,22 +6,32 @@ sidebar_position: 3
 
 ## 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/plugins/guide/getting-started.mdx

@@ -54,9 +54,9 @@ export const ExamplePlugin = (): CliPlugin<ModuleTools> => {
 Then we register the plugin we just wrote via the [`plugins`](/en/api/config/plugins) API.
 
 ```ts . /modern.config.ts
-import { ExamplePlugin } from '. /plugins/example';
+import { examplePlugin } from '. /plugins/example';
 export default defineConfig({
-  plugins: [ExamplePlugin()],
+  plugins: [examplePlugin()],
 });
 ```