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

package/doc_build/static/js/async/en_guide_basic_modify-output-product.js

@@ -10,7 +10,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "chCodeConfig": function() { return /* binding */ chCodeConfig; },
 /* harmony export */   "content": function() { return /* binding */ content; },
 /* harmony export */   "frontmatter": function() { return /* binding */ frontmatter; },
-/* harmony export */   "title": function() { return /* binding */ title; },
 /* harmony export */   "toc": function() { return /* binding */ toc; }
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js");
@@ -18,11 +17,11 @@ __webpack_require__.r(__webpack_exports__);
 /*@jsxRuntime automatic @jsxImportSource react*/
 
 
-var CH = {
+const CH = {
   annotations: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.annotations,
   Code: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.Code
 };
-var chCodeConfig = {
+const chCodeConfig = {
   "staticMediaQuery": "not screen, (max-width: 768px)",
   "theme": {
     "name": "nord",
@@ -1185,14 +1184,14 @@ var chCodeConfig = {
   "autoImport": true,
   "showCopyButton": true,
   "skipLanguages": [],
-  "filepath": "/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/modify-output-product.md"
+  "filepath": "/Users/targeral/github/targeral-modern-js/website/module-tools/docs/en/guide/basic/modify-output-product.md"
 };
-var frontmatter = {
+const frontmatter = {
   "sidebar_position": 3
 };
-var toc = [{
-  "id": "modify-output-product",
-  "text": "Modify output product",
+const toc = [{
+  "id": "modify-the-output-product",
+  "text": "Modify the output product",
   "depth": 2
 }, {
   "id": "default-output-products",
@@ -1203,12 +1202,12 @@ var toc = [{
   "text": "buildPreset",
   "depth": 2
 }, {
-  "id": "string-form-of-buildpreset",
-  "text": "String form of buildPreset",
+  "id": "string-form-of-build-preset",
+  "text": "String form of build preset",
   "depth": 3
 }, {
-  "id": "function-form-of-buildpreset",
-  "text": "Function form of buildPreset",
+  "id": "build-pre-defined-function-forms",
+  "text": "Build pre-defined function forms",
   "depth": 3
 }, {
   "id": "build-configuration-object",
@@ -1219,43 +1218,32 @@ var toc = [{
   "text": "When to use buildConfig",
   "depth": 2
 }];
-var title = "modify-output-product";
-var content = "\"---\\nsidebar_position: 3\\n---\\n\\n# modify-output-product\\n\\n## Modify output product\\n\\n## Default output products\\n\\nWhen 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.\\n\\n```typescript\\nimport { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  buildPreset: 'base-config',\\n});\\n```\\n\\n**The default generated product has the following characteristics**:\\n\\n- The code format is [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules), or simply `cjs`.\\n- Code syntax is supported up to `ES6`.\\n- All code is packaged into a single file, i.e. **bundle** processing is performed.\\n- The output root directory is the `dist` directory under the project, and the output directory for type files is `dist/types`.\\n\\n:::tip\\n\\n1. 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.\\n   :::\\n\\nYou may have the following questions when you see this:\\n\\n1. what is `buildPreset`?\\n2. what determines these characteristics of the output?\\n\\nThen the next step is to first explain `buildPreset`.\\n\\n## buildPreset\\n\\n`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.\\n\\n### String form of `buildPreset`\\n\\nThe 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.\\n\\nThe 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.\\n\\nAmong 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:\\n\\n- In the `dist/lib` directory you will get the product in the code format `cjs`, with syntax support up to `es6` and after packaging.\\n- In the `dist/es` directory, you get code in the format `esm`, with syntax support up to `es6` and packaged.\\n- In the `dist/types` directory, you get the type files. If it is not a TypeScript project, there is no such directory.\\n\\nThe 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]\\\"`.\\n\\nFor 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.\\n\\n### Function form of `buildPreset`\\n\\n**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**.\\n\\nFor 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:\\n\\n```typescript\\nimport { defineConfig } from \\\"@modern-js/module-tools\\\";\\n\\nexport default defineConfig({\\n  buildPreset({ preset }) {\\n    return preset.NPM_LIBRARY.map(config => {\\n      return { ... .config, target: 'es2017' }\\n    });\\n  },\\n});\\n```\\n\\nIn 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`.\\n\\n> 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.\\n\\nSo what is the `buildConfig` object here? And what are the previously mentioned build product features based on?\\n\\nWe explain it next.\\n\\n## Build configuration (object)\\n\\n**`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:\\n\\n**The basic attributes of a build product include:**\\n\\n- Whether the product is packaged or not: the corresponding API is [`buildConfig.buildType`](/en/api/config/build-config#buildtype).\\n- Product support for syntax: the corresponding API is [`buildConfig.target`](/en/api/config/build-config#target).\\n- Output format: The corresponding API is [`buildConfig.format`](/en/api/config/build-config#format).\\n- How to handle the output type file: the corresponding API is [`buildConfig.dts`](/en/api/config/build-config#dts).\\n- How the sourceMap of the product is handled: the corresponding API is [`buildConfig.sourceMap`](/en/api/config/build-config#sourcemap).\\n- The input (or source file) corresponding to the output: the corresponding API is [`buildConfig.input`](/en/api/config/build-config#input).\\n- The directory of the output of the product: the corresponding API is [`buildConfig.outDir`](/en/api/config/build-config#outDir).\\n- The source directory of the build: the corresponding API is [`buildConfig.sourceDir`](/en/api/config/build-config#sourcedir).\\n\\n**Common functions needed to build products include:**\\n\\n- Alias: The corresponding API is [`buildConfig.alias`](/en/api/config/build-config#alias).\\n- Static resource handling: The corresponding API is [`buildConfig.asset`](/en/api/config/build-config#asset).\\n- Third-party dependency handling: The corresponding APIs are\\n  - [`buildConfig.autoExternal`](/en/api/config/build-config#autoexternal).\\n  - [`buildConfig.externals`](/en/api/config/build-config#externals).\\n- Copy: The corresponding API is [`buildConfig.copy`](/en/api/config/build-config#copy).\\n- Global variable substitution: the corresponding API is [`buildConfig.define`](/en/api/config/build-config#define).\\n- 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).\\n\\n**Some advanced properties or less frequently used functions:**\\n\\n- Product code compression: The corresponding API is [`buildConfig.minify`](/en/api/config/build-config#minify).\\n- Code splitting: [`buildConfig.splitting`](/en/api/config/build-config#splitting)\\n- 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).\\n- umd product-related.\\n  - Specifies the global variables imported externally to the umd product: the corresponding API is [`buildConfig.umdGlobals`](/en/api/config/build-config#umdglobals).\\n  - Specify the module name of the umd product: the corresponding API is [`buildConfig.umdModuleName`](/en/api/config/build-config#umdmodulename).\\n\\nIn addition to the above categories, frequently asked questions and best practices about these APIs can be found at the following links.\\n\\n- [What are `bundle` and `bundleless`?](/en/guide/advance/in-depth-about-build#bundle-and-bundleless)\\n- [The relationship between `input` and `sourceDir`](/en/guide/advance/in-depth-about-build#relationship-between-input-and-sourcedir)\\n- [The multiple ways of generating type files in products](/en/guide/advance/in-depth-about-build#declaration-type-files)\\n- [The use of `buildConfig.define` for different scenarios.](/en/guide/advance/in-depth-about-build#buildconfigdefine-usage-for-different-scenarios)\\n- [How to handle third-party dependencies?](/en/guide/advance/external-dependency)\\n- [How to use copy?](/en/guide/advance/copy)\\n- [How to build umd products?](/en/guide/advance/build-umd)\\n- [The capabilities currently supported by static resources.](/en/guide/advance/asset)\\n\\n## When to use `buildConfig`\\n\\n`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.\\n\\n```typescript\\nimport { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  buildConfig: [{}],\\n  buildPreset: 'base-config',\\n});\\n```\\n\\nThen at this point you will see the following prompt.\\n\\n```bash\\nSince both 'buildConfig' and 'buildPreset' are present, only the 'buildConfig' configuration will take effect\\n```\\n\\nThe 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`.\\n\\nThe process of using `buildConfig` is the process of thinking about \\\"_what kind of build product to get_\\\".\\n\"";
+const content = "\"---\\nsidebar_position: 3\\n---\\n\\n## Modify the output product\\n\\n## Default output products\\n\\nWhen 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.\\n\\n```typescript\\nimport moduleTools, { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  plugins: [moduleTools()],\\n  buildPreset: 'npm-library',\\n});\\n```\\n\\n**The default generation product has the following characteristics**.\\n\\n- will generate [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules) and [ESM](https://nodejs.org/api/esm.html#modules- ecmascript-modules).\\n- The code syntax is supported up to `ES6` , and more advanced syntax will be converted.\\n- All code is packaged into one file, i.e. **bundle** processing is performed.\\n- The output root directory is the `dist` directory under the project, and the type file output directory is `dist/types`.\\n\\nYou may have the following questions when you see this.\\n\\n1. what is `buildPreset`?\\n2. what determines these characteristics of the product?\\n\\nThen the next step is to first explain `buildPreset`.\\n\\n## buildPreset\\n\\nThe `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.\\n\\n### String form of build preset\\n\\nThe 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.\\n\\nThe 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**.\\n\\nAmong 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.\\n\\n- In the `dist/lib` directory you will get code formatted as `cjs`, syntax supported up to `es6` and packaged.\\n- In the `dist/es` directory, you get code in the format `esm`, with syntax support up to `es6` and after packaging.\\n- In the `dist/types` directory, you get the type files. If it is not a TypeScript project, there is no such directory.\\n\\nThe 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]\\\"`.\\n\\nFor 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.\\n\\n### Build pre-defined function forms\\n\\n**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**.\\n\\nFor 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.\\n\\n```typescript\\nimport { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  buildPreset({ preset }) {\\n    return preset.NPM_LIBRARY.map(config => {\\n      return { ... .config, target: 'es5' }\\n    });\\n  },\\n});\\n```\\n\\nIn 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`.\\n\\n> 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.\\n\\nSo what is the `buildConfig` object here? What is the basis for the build product feature mentioned before?\\n\\nLet's explain next.\\n\\n## Build configuration (object)\\n\\n**`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.\\n\\n**The basic attributes of a build product include:**\\n\\n- Whether the product is packaged or not: the corresponding API is [`buildConfig.buildType`](/api/config/build-config#buildtype).\\n- Product support for syntax: the corresponding API is [`buildConfig.target`](/api/config/build-config#target).\\n- Output format: the corresponding API is [`buildConfig.format`](/api/config/build-config#format).\\n- How the output type file is handled: the corresponding API is [`buildConfig.dts`](/api/config/build-config#dts).\\n- How the sourceMap of the product is handled: the corresponding API is [`buildConfig.sourceMap`](/api/config/build-config#sourcemap).\\n- The input (or source file) corresponding to the output: the corresponding API is [`buildConfig.input`](/api/config/build-config#input).\\n- The directory of the output of the product: the corresponding API is [`buildConfig.outDir`](/api/config/build-config#outDir).\\n- Build source directory: the corresponding API is [`buildConfig.sourceDir`](/api/config/build-config#sourcedir).\\n\\n**Common functions required for build products include:**\\n\\n- Alias: The corresponding API is [`buildConfig.alias`](/api/config/build-config#alias).\\n- Static resource handling: the corresponding API is [`buildConfig.asset`](/api/config/build-config#asset).\\n- Third-party dependency handling: The corresponding APIs are\\n  - [`buildConfig.autoExternal`](/api/config/build-config#autoexternal).\\n  - [`buildConfig.externals`](/api/config/build-config#externals).\\n- Copy: The corresponding API is [`buildConfig.copy`](/api/config/build-config#copy).\\n- Global variable substitution: the corresponding API is [`buildConfig.define`](/api/config/build-config#define).\\n- 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).\\n\\n**Some advanced properties or less frequently used functions:**\\n\\n- Product code compression: The corresponding API is [`buildConfig.minify`](/api/config/build-config#minify).\\n- Code splitting: [`buildConfig.splitting`](/api/config/build-config#splitting)\\n- 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).\\n- umd product-related.\\n  - Specifies the global variables imported externally to the umd product: the corresponding API is [`buildConfig.umdGlobals`](/api/config/build-config#umdglobals).\\n  - Specify the module name of the umd product: the corresponding API is [`buildConfig.umdModuleName`](/api/config/build-config#umdmodulename).\\n\\nIn addition to the above categories, frequently asked questions and best practices about these APIs can be found at the following links\\n\\n- [What are `bundle` and `bundleless`?](/guide/advance/in-depth-about-build#bundle- and-bundleless)\\n- [Relationship of `input` to `sourceDir`](/guide/advance/in-depth-about-build#input- to -sourcedir-)\\n- [Multiple ways to generate type files in product](/guide/advance/in-depth-about-build#type-files).\\n- [`buildConfig.define` Different ways to use it for different scenarios.](/guide/advance/in-depth-about-build#buildconfigdefine - How to use it for different scenarios)\\n- [How to handle third-party dependencies?](/guide/advance/external-dependency)\\n- [How to use copy?](/guide/advance/copy)\\n- How do I build umd products? (/guide/advance/build-umd# sets the global variable name of the project)\\n- [The capabilities currently supported by static resources.](/guide/advance/asset)\\n\\n## When to use `buildConfig`\\n\\n`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.\\n\\n```typescript\\nimport { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  buildConfig: {\\n    format: 'umd',\\n  },\\n  buildPreset: 'npm-library',\\n});\\n```\\n\\nThen at this point you will see the following prompt.\\n\\n```bash\\nSince both 'buildConfig' and 'buildPreset' are present, only the 'buildConfig' configuration will take effect\\n```\\n\\nThe 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`.\\n\\nThe process of using `buildConfig` is the process of thinking about **what kind of build product to get**.\\n\"";
 function _createMdxContent(props) {
-  var _components = Object.assign({
-    h1: "h1",
-    a: "a",
+  const _components = Object.assign({
     h2: "h2",
+    a: "a",
     p: "p",
     code: "code",
     strong: "strong",
     ul: "ul",
     li: "li",
-    div: "div",
     ol: "ol",
     h3: "h3",
     blockquote: "blockquote",
     em: "em"
   }, props.components);
-  if (!CH) _missingMdxReference("CH", false, "13:1-19:4");
-  if (!CH.Code) _missingMdxReference("CH.Code", true, "13:1-19:4");
+  if (!CH) _missingMdxReference("CH", false, "11:1-18:4");
+  if (!CH.Code) _missingMdxReference("CH.Code", true, "11:1-18:4");
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
-    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h1, {
-      id: "modify-output-product",
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        className: "header-anchor",
-        "aria-hidden": "true",
-        href: "#modify-output-product",
-        children: "#"
-      }), "modify-output-product"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
-      id: "modify-output-product-1",
+    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
+      id: "modify-the-output-product",
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         className: "header-anchor",
         "aria-hidden": "true",
-        href: "#modify-output-product-1",
+        href: "#modify-the-output-product",
         children: "#"
-      }), "Modify output product"]
+      }), "Modify the output product"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
       id: "default-output-products",
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
@@ -1267,7 +1255,7 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["When the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "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."]
+      }), " 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."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.Code, {
       codeConfig: chCodeConfig,
       northPanel: {
@@ -1294,6 +1282,27 @@ function _createMdxContent(props) {
                   "color": "#D8DEE9FF"
                 }
               }
+            }, {
+              "content": "moduleTools",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ",",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": " ",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
             }, {
               "content": "{",
               "props": {
@@ -1432,6 +1441,57 @@ function _createMdxContent(props) {
                 }
               }
             }]
+          }, {
+            "tokens": [{
+              "content": "  ",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": "plugins",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ":",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": " [",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": "moduleTools",
+              "props": {
+                "style": {
+                  "color": "#88C0D0"
+                }
+              }
+            }, {
+              "content": "()]",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": ",",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }]
           }, {
             "tokens": [{
               "content": "  ",
@@ -1469,7 +1529,7 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "base-config",
+              "content": "npm-library",
               "props": {
                 "style": {
                   "color": "#A3BE8C"
@@ -1520,59 +1580,45 @@ function _createMdxContent(props) {
       }]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
-        children: "The default generated product has the following characteristics"
-      }), ":"]
+        children: "The default generation product has the following characteristics"
+      }), "."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
-        children: ["The code format is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "https://nodejs.org/api/modules.html#modules-commonjs-modules",
+        children: ["will generate ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
+          href: "https://nodejs.org/api/modules.html#modules-commonjs-modules-2",
+          target: "_blank",
+          rel: "nofollow",
           children: "CommonJS"
-        }), ", or simply ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "cjs"
-        }), "."]
+        }), " and [ESM](", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
+          href: "https://nodejs.org/api/esm.html#modules--1",
+          target: "_blank",
+          rel: "nofollow",
+          children: "https://nodejs.org/api/esm.html#modules-"
+        }), " ecmascript-modules)."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
-        children: ["Code syntax is supported up to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+        children: ["The code syntax is supported up to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "ES6"
-        }), "."]
+        }), " , and more advanced syntax will be converted."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
-        children: ["All code is packaged into a single file, i.e. ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
+        children: ["All code is packaged into one file, i.e. ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
           children: "bundle"
         }), " processing is performed."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["The output root directory is the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "dist"
-        }), " directory under the project, and the output directory for type files is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+        }), " directory under the project, and the type file output directory is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "dist/types"
         }), "."]
       }), "\n"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.div, {
-      className: "modern-directive tip",
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-        className: "modern-directive-title",
-        children: "TIP"
-      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.div, {
-        className: "island-directive-content",
-        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ol, {
-          children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
-            children: ["By \"code syntax support up to ES6\", we mean that the syntax supported by the product code will not exceed ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-              children: "ES6"
-            }), ". If the source code uses syntax above ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-              children: "ES6"
-            }), " (e.g. ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-              children: "ES2017"
-            }), "), it will be converted."]
-          }), "\n"]
-        })
-      })]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "You may have the following questions when you see this:"
+      children: "You may have the following questions when you see this."
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ol, {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["what is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "buildPreset"
         }), "?"]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: "what determines these characteristics of the output?"
+        children: "what determines these characteristics of the product?"
       }), "\n"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["Then the next step is to first explain ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
@@ -1587,47 +1633,45 @@ function _createMdxContent(props) {
         children: "#"
       }), "buildPreset"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+      children: ["The ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "buildPreset"
-      }), " represents one or more sets of build-related configurations prepared in advance. By using the corresponding preset values of ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+      }), " represents one or more sets of build-related configurations prepared in advance. By using the corresponding preset values of the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "buildPreset"
       }), ", you can eliminate the troublesome and complicated configuration work and get the expected product."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h3, {
-      id: "string-form-of-buildpreset",
+      id: "string-form-of-build-preset",
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         className: "header-anchor",
         "aria-hidden": "true",
-        href: "#string-form-of-buildpreset",
+        href: "#string-form-of-build-preset",
         children: "#"
-      }), "String form of ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "buildPreset"
-      })]
+      }), "String form of build preset"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["The value of a ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
         children: "build preset can be in the form of a string"
       }), ", so a build preset of this form is called a preset string."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["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 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        href: "/en/api/config/build-config.html",
+        href: "/module-tools/en/api/config/build-preset.html",
         children: "BuildPreset API"
-      }), ". The relationship between ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
+      }), ". Here is an explanation about the relationship between ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
         children: "generic preset strings and variants"
-      }), " is explained here."]
+      }), "."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["Among the generic preset strings, ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "\"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 ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "\"npm-library\""
-      }), " is set, the output product of the project will have the following characteristics:"]
+      }), " is set, the output product of the project will have the following characteristics."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["In the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "dist/lib"
-        }), " directory you will get the product in the code format ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+        }), " directory you will get code formatted as ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "cjs"
-        }), ", with syntax support up to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+        }), ", syntax supported up to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "es6"
-        }), " and after packaging."]
+        }), " and packaged."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["In the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "dist/es"
@@ -1635,7 +1679,7 @@ function _createMdxContent(props) {
           children: "esm"
         }), ", with syntax support up to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "es6"
-        }), " and packaged."]
+        }), " and after packaging."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["In the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "dist/types"
@@ -1644,39 +1688,35 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["The default string ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "\"npm-library\""
-      }), " is a variant of the original product with modified ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
-        children: "code-syntax support"
-      }), " and a string naming change to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+      }), " is a variant of the original product with a modified ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
+        children: "code syntax support"
+      }), " feature and a string naming change to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "\"npm-library-[es5 | es2016.... . es2020 | esnext]\""
       }), "."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["For example, if the output product is based on the preset string ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "\"npm-library\""
       }), " and the syntax supported by the product code is changed to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "es2017"
+        children: "es5"
       }), ", then simply changing ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "\"npm-library\""
       }), " to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "\"npm-library-es2017\""
+        children: "\"npm-library-es5\""
       }), " would be sufficient."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h3, {
-      id: "function-form-of-buildpreset",
+      id: "build-pre-defined-function-forms",
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         className: "header-anchor",
         "aria-hidden": "true",
-        href: "#function-form-of-buildpreset",
+        href: "#build-pre-defined-function-forms",
         children: "#"
-      }), "Function form of ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "buildPreset"
-      })]
+      }), "Build pre-defined function forms"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
         children: "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"
       }), "."]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: ["For example, if the same effect as the preset string ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "\"npm-library-es2017\""
-      }), " is achieved using the preset function form, it can be done as follows:"]
+    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
+      children: "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."
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.Code, {
       codeConfig: chCodeConfig,
       northPanel: {
@@ -1760,7 +1800,7 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "\"",
+              "content": "'",
               "props": {
                 "style": {
                   "color": "#ECEFF4"
@@ -1774,7 +1814,7 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "\"",
+              "content": "'",
               "props": {
                 "style": {
                   "color": "#ECEFF4"
@@ -2113,7 +2153,7 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "es2017",
+              "content": "es5",
               "props": {
                 "style": {
                   "color": "#A3BE8C"
@@ -2233,27 +2273,22 @@ function _createMdxContent(props) {
       }), " object and modify the shallow copy to get ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "buildConfig.target"
       }), ", specifying it as ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "es2017"
+        children: "es5"
       }), "."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.blockquote, {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-        children: ["The specific value of ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "preset.NPM_LIBRARY"
-        }), " can be viewed via the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config.html",
-          children: "BuildPreset API"
-        }), ". The ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "preset"
-        }), " object contains not only ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "NPM_LIBRARY"
-        }), ", but also other similar constants."]
+        children: ["NPM_LIBRARY", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: ", you can check it with [BuildPreset API](/api/config/build-preset). The"
+        }), "preset", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: "object contains not only"
+        }), "NPM_LIBRARY`, but also other similar constants."]
       }), "\n"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["So what is the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "buildConfig"
-      }), " object here? And what are the previously mentioned build product features based on?"]
+      }), " object here? What is the basis for the build product feature mentioned before?"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "We explain it next."
+      children: "Let's explain next."
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
       id: "build-configuration-object",
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
@@ -2273,7 +2308,7 @@ function _createMdxContent(props) {
         children: "buildConfig"
       }), ". The currently supported properties cover the needs of most module type projects when building products. ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "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:"]
+      }), " 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."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
       children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
         children: "The basic attributes of a build product include:"
@@ -2281,56 +2316,56 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["Whether the product is packaged or not: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#buildtype.html",
+          href: "/module-tools/en/api/config/build-config.html#buildtype-4",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.buildType"
           })
         }), "."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["Product support for syntax: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#target.html",
+          href: "/module-tools/en/api/config/build-config.html#target-2",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.target"
           })
         }), "."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
-        children: ["Output format: The corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#format.html",
+        children: ["Output format: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
+          href: "/module-tools/en/api/config/build-config.html#format-2",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.format"
           })
         }), "."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
-        children: ["How to handle the output type file: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#dts.html",
+        children: ["How the output type file is handled: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
+          href: "/module-tools/en/api/config/build-config.html#dts-4",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.dts"
           })
         }), "."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["How the sourceMap of the product is handled: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#sourcemap.html",
+          href: "/module-tools/en/api/config/build-config.html#sourcemap-2",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.sourceMap"
           })
         }), "."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["The input (or source file) corresponding to the output: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#input.html",
+          href: "/module-tools/en/api/config/build-config.html#input-4",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.input"
           })
         }), "."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["The directory of the output of the product: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#outDir.html",
+          href: "/module-tools/en/api/config/build-config.html#outdir-8",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.outDir"
           })
         }), "."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
-        children: ["The source directory of the build: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#sourcedir.html",
+        children: ["Build source directory: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
+          href: "/module-tools/en/api/config/build-config.html#sourcedir-6",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.sourceDir"
           })
@@ -2338,19 +2373,19 @@ function _createMdxContent(props) {
       }), "\n"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
       children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
-        children: "Common functions needed to build products include:"
+        children: "Common functions required for build products include:"
       })
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["Alias: The corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#alias.html",
+          href: "/module-tools/en/api/config/build-config.html#alias-2",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.alias"
           })
         }), "."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
-        children: ["Static resource handling: The corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#asset.html",
+        children: ["Static resource handling: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
+          href: "/module-tools/en/api/config/build-config.html#asset-4",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.asset"
           })
@@ -2359,14 +2394,14 @@ function _createMdxContent(props) {
         children: ["Third-party dependency handling: The corresponding APIs are", "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
           children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
             children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-              href: "/en/api/config/build-config#autoexternal.html",
+              href: "/module-tools/en/api/config/build-config.html#autoexternal-6",
               children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
                 children: "buildConfig.autoExternal"
               })
             }), "."]
           }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
             children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-              href: "/en/api/config/build-config#externals.html",
+              href: "/module-tools/en/api/config/build-config.html#externals-8",
               children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
                 children: "buildConfig.externals"
               })
@@ -2375,14 +2410,14 @@ function _createMdxContent(props) {
         }), "\n"]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["Copy: The corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#copy.html",
+          href: "/module-tools/en/api/config/build-config.html#copy-4",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.copy"
           })
         }), "."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["Global variable substitution: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#define.html",
+          href: "/module-tools/en/api/config/build-config.html#define-4",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.define"
           })
@@ -2390,13 +2425,12 @@ function _createMdxContent(props) {
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["Specify ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
           href: "https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html",
+          target: "_blank",
+          rel: "nofollow",
           children: "JSX"
-        }), " compilation method, the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#jsx.html",
-          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "buildConfig.jsx"
-          })
-        }), "."]
+        }), " compilation method, the corresponding API is [", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: "buildConfig.jsx"
+        }), "](/api/config/ build-config#jsx)."]
       }), "\n"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
       children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
@@ -2405,21 +2439,21 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["Product code compression: The corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#minify.html",
+          href: "/module-tools/en/api/config/build-config.html#minify-2",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.minify"
           })
         }), "."]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["Code splitting: ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#splitting.html",
+          href: "/module-tools/en/api/config/build-config.html#splitting-5",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.splitting"
           })
         })]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
         children: ["Specify whether the build product is for the NodeJS environment or the browser environment: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#platform.html",
+          href: "/module-tools/en/api/config/build-config.html#platform-2",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.platform"
           })
@@ -2428,14 +2462,14 @@ function _createMdxContent(props) {
         children: ["umd product-related.", "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
           children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
             children: ["Specifies the global variables imported externally to the umd product: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-              href: "/en/api/config/build-config#umdglobals.html",
+              href: "/module-tools/en/api/config/build-config.html#umdglobals-4",
               children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
                 children: "buildConfig.umdGlobals"
               })
             }), "."]
           }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
             children: ["Specify the module name of the umd product: the corresponding API is ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-              href: "/en/api/config/build-config#umdmodulename.html",
+              href: "/module-tools/en/api/config/build-config.html#umdmodulename-4",
               children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
                 children: "buildConfig.umdModuleName"
               })
@@ -2444,56 +2478,44 @@ function _createMdxContent(props) {
         }), "\n"]
       }), "\n"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "In addition to the above categories, frequently asked questions and best practices about these APIs can be found at the following links."
+      children: "In addition to the above categories, frequently asked questions and best practices about these APIs can be found at the following links"
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
-      children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.a, {
-          href: "/en/guide/advance/in-depth-about-build#bundle-and-bundleless.html",
-          children: ["What are ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "bundle"
-          }), " and ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "bundleless"
-          }), "?"]
-        })
-      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.a, {
-          href: "/en/guide/advance/in-depth-about-build#relationship-between-input-and-sourcedir.html",
-          children: ["The relationship between ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "input"
-          }), " and ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "sourceDir"
-          })]
-        })
-      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/guide/advance/in-depth-about-build#declaration-type-files.html",
-          children: "The multiple ways of generating type files in products"
-        })
-      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.a, {
-          href: "/en/guide/advance/in-depth-about-build#buildconfigdefine-usage-for-different-scenarios.html",
-          children: ["The use of ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-            children: "buildConfig.define"
-          }), " for different scenarios."]
-        })
+      children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
+        children: ["[What are ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: "bundle"
+        }), " and ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: "bundleless"
+        }), "?](/guide/advance/in-depth-about-build#bundle- and-bundleless)"]
+      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
+        children: ["[Relationship of ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: "input"
+        }), " to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: "sourceDir"
+        }), "](/guide/advance/in-depth-about-build#input- to -sourcedir-)"]
+      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
+        children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
+          href: "/module-tools/en/guide/advance/in-depth-about-build.html#type-files-1",
+          children: "Multiple ways to generate type files in product"
+        }), "."]
+      }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.li, {
+        children: ["[", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: "buildConfig.define"
+        }), " Different ways to use it for different scenarios.](/guide/advance/in-depth-about-build#buildconfigdefine - How to use it for different scenarios)"]
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/guide/advance/external-dependency.html",
+          href: "/module-tools/en/guide/advance/external-dependency.html",
           children: "How to handle third-party dependencies?"
         })
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/guide/advance/copy.html",
+          href: "/module-tools/en/guide/advance/copy.html",
           children: "How to use copy?"
         })
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/guide/advance/build-umd.html",
-          children: "How to build umd products?"
-        })
+        children: "How do I build umd products? (/guide/advance/build-umd# sets the global variable name of the project)"
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/guide/advance/asset.html",
+          href: "/module-tools/en/guide/advance/asset.html",
           children: "The capabilities currently supported by static resources."
         })
       }), "\n"]
@@ -2510,8 +2532,8 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "buildConfig"
-      }), " is one of the ways used to modify the product, ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.strong, {
-        children: ["and only ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+      }), " is one of the methods used to modify the product, ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.strong, {
+        children: ["only ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "buildConfig"
         }), " will take effect when configured in conjunction with ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "buildPreset"
@@ -2704,26 +2726,70 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": " [",
+              "content": " ",
               "props": {
                 "style": {
                   "color": "#D8DEE9FF"
                 }
               }
             }, {
-              "content": "{}",
+              "content": "{",
               "props": {
                 "style": {
                   "color": "#ECEFF4"
                 }
               }
+            }]
+          }, {
+            "tokens": [{
+              "content": "    ",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
             }, {
-              "content": "]",
+              "content": "format",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ":",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": " ",
               "props": {
                 "style": {
                   "color": "#D8DEE9FF"
                 }
               }
+            }, {
+              "content": "'",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": "umd",
+              "props": {
+                "style": {
+                  "color": "#A3BE8C"
+                }
+              }
+            }, {
+              "content": "'",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
             }, {
               "content": ",",
               "props": {
@@ -2732,6 +2798,22 @@ function _createMdxContent(props) {
                 }
               }
             }]
+          }, {
+            "tokens": [{
+              "content": "  ",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": "},",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }]
           }, {
             "tokens": [{
               "content": "  ",
@@ -2769,7 +2851,7 @@ function _createMdxContent(props) {
                 }
               }
             }, {
-              "content": "base-config",
+              "content": "npm-library",
               "props": {
                 "style": {
                   "color": "#A3BE8C"
@@ -2942,27 +3024,23 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["The process of using ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "buildConfig"
-      }), " is the process of thinking about \"", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.em, {
+      }), " is the process of thinking about ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.strong, {
         children: "what kind of build product to get"
-      }), "\"."]
+      }), "."]
     })]
   });
 }
-function MDXContent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _ref = props.components || {},
-    MDXLayout = _ref.wrapper;
+function MDXContent(props = {}) {
+  const {wrapper: MDXLayout} = props.components || ({});
   return MDXLayout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(MDXLayout, Object.assign({}, props, {
     children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_createMdxContent, props)
   })) : _createMdxContent(props);
 }
-_c = MDXContent;
 /* harmony default export */ __webpack_exports__["default"] = (MDXContent);
 function _missingMdxReference(id, component, place) {
-  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it." + (place ? "\nIt’s referenced in your code at `" + place + "` in `/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/modify-output-product.md`" : ""));
+  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it." + (place ? "\nIt’s referenced in your code at `" + place + "` in `/Users/targeral/github/targeral-modern-js/website/module-tools/docs/en/guide/basic/modify-output-product.md`" : ""));
 }
-var _c;
-__webpack_require__.$Refresh$.register(_c, "MDXContent");
+
 
 /***/ })