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

package/doc_build/static/js/async/en_guide_advance_in-depth-about-build.js

@@ -18,11 +18,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,12 +1185,12 @@ var chCodeConfig = {
   "autoImport": true,
   "showCopyButton": true,
   "skipLanguages": [],
-  "filepath": "/Users/bytedance/modern.js/website/module-tools/docs/en/guide/advance/in-depth-about-build.md"
+  "filepath": "/Users/targeral/github/targeral-modern-js/website/module-tools/docs/en/guide/advance/in-depth-about-build.md"
 };
-var frontmatter = {
+const frontmatter = {
   "sidebar_position": 1
 };
-var toc = [{
+const toc = [{
   "id": "in-depth-understanding-of-buildconfig",
   "text": "In-depth understanding of buildConfig",
   "depth": 2
@@ -1251,10 +1251,10 @@ var toc = [{
   "text": "Build errors",
   "depth": 2
 }];
-var title = "In-depth understanding of build";
-var content = "\"---\\nsidebar_position: 1\\n---\\n\\n# In-depth understanding of build\\n\\nIn the [Basic Usage] section, we already knew that you can modify the output product of a project through the `buildConfig` configuration. `buildConfig` not only describes some of the features of the product, but also provides some functionality for building the product.\\n\\n:::tip{title=notes}\\nIf you are not sure what `buildConfig` is, it is recommended to take some time to understand it by following this link.\\n\\n- [[modify-output-product](/en/guide/basic/modify-output-product)]\\n  :::\\n\\nIn this chapter we'll dive into the use of certain build configurations and understand what happens when the `modern build` command is executed.\\n\\n## In-depth understanding of `buildConfig`\\n\\n### Bundle and Bundleless\\n\\nSo first let's understand Bundle and Bundleless.\\n\\nA Bundle is a package of build products, which may be a single file or multiple files based on a certain [code splitting strategy](https://esbuild.github.io/api/#splitting).\\n\\nBundleless, on the other hand, means that each source file is compiled and built separately, but not packaged together. Each product file can be found with its corresponding source code file. The process of **Bundleless build can also be understood as the process of code conversion of source files only**.\\n\\nIn `buildConfig` you can specify whether the current build task is Bundle or Bundleless by using [`buildConfig.buildType`](/en/api/config/build-config#buildtype).\\n\\n### Relationship between `input` and `sourceDir`\\n\\n[`buildConfig.input`](/en/api/config/build-config#input) is used to specify the file path or directory path where the source code is read, and its default value differs between Bundle and Bundleless builds.\\n\\n- When `buildType: 'bundle'`, `input` defaults to `['src/index.ts']`\\n- When `buildType: 'bundleless'`, `input` defaults to `['src']`\\n  > 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.\\n\\n:::warn{title=notes}\\nIt 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.\\n:::\\n\\nWe know from the defaults: **Bundle builds can generally specify a file path as the entry point to the build, while Bundleless builds are more expected to use directory paths to find source files**.\\n\\n#### Object type of `input`\\n\\nIn 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`.\\n\\n```tsx modern.config.ts\\nimport { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  buildConfig: {\\n    input: {\\n      main: ['./src/index.ts'],\\n    },\\n    outDir: './dist',\\n  },\\n});\\n```\\n\\nThe Bundleless build process also supports such use, but it is not recommended.\\n\\n#### `sourceDir`\\n\\n[`sourceDir`](/en/api/config/build-config#sourcedir) is used to specify the source code directory, which is related to both.\\n\\n- type file generation\\n- [`outbase`](https://esbuild.github.io/api/#outbase) for specifying the build process\\n\\nIn general:\\n\\n- **During the Bundleless build process, the values of `sourceDir` and `input` should be the same, and their default values are both `src`**.\\n- It is rarely necessary to use `sourceDir` during the Bundle build process.\\n\\n### Declaration Type Files\\n\\nThe [`buildConfig.dts`](/en/api/config/build-config#dts) configuration is mainly used for type file generation.\\n\\n#### Turn off type generation\\n\\nType generation is turned on by default, if you need to turn it off, you can configure it as follows:\\n\\n```ts ./modern.config.ts\\nimport { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  buildConfig: {\\n    dts: false,\\n  },\\n});\\n```\\n\\n:::tip\\nThe build speed is generally improved by closing the type file.\\n:::\\n\\n#### Build type files\\n\\nWith `buildType: 'bundleless'`, type files are generated using the project's `tsc` command to complete production.\\n\\nThe **module engineering solution also supports packaging of type files**, although care needs to be taken when using this feature.\\n\\n- Some third-party dependencies have incorrect syntax that can cause the packaging process to fail. So in this case, you need to exclude such third-party packages manually with [`buildConfig.externals`](/en/api/config/build-config#externals).\\n- It is not possible to handle the case where the type file of a third-party dependency points to a `.ts` file. For example, the `package.json` of a third-party dependency contains something like this: `{\\\"types\\\": \\\". /src/index.ts\\\"}`.\\n\\n#### Alias Conversion\\n\\nDuring the Bundleless build process, if an alias appears in the source code, e.g.\\n\\n```ts ./src/index.ts\\nimport utils from '@common/utils';\\n```\\n\\nNormally, product type files generated with `tsc` will also contain these aliases. However, Module Tools will convert the aliases in the type file generated by `tsc` to:\\n\\n- Alias conversion is possible for code of the form `import '@common/utils'` or `import utils from '@common/utils'`.\\n- Aliasing is possible for code of the form `export { utils } from '@common/utils'`.\\n\\nHowever, there are some cases that cannot be handled at this time.\\n\\n- Output types of the form `Promise<import('@common/utils')>` cannot be converted at this time.\\n\\n#### Some examples of the use of `dts`\\n\\nGeneral usage:\\n\\n```ts\\nimport { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  // The output path of the packaged type file at this point is `./dist/types`\\n  buildConfig: {\\n    buildType: 'bundle',\\n    dts: {\\n      tsconfigPath: './other-tsconfig.json',\\n      distPath: './types',\\n    },\\n    outDir: './dist',\\n  },\\n});\\n```\\n\\nFor the use of `dts.only`:\\n\\n```ts\\nimport { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  // At this moment the type file is not packaged and the output path is `./dist/types`\\n  buildConfig: [\\n    {\\n      buildType: 'bundle',\\n      dts: false,\\n      outDir: './dist',\\n    },\\n    {\\n      buildType: 'bundleless',\\n      dts: {\\n        only: true,\\n      },\\n      outDir: './dist/types',\\n    },\\n  ],\\n});\\n```\\n\\n### `buildConfig.define` Usage for different scenarios\\n\\n[`buildConfig.define`](/en/api/config/build-config#define) functions somewhat similar to [`webpack.DefinePlugin`](https://webpack.js.org/plugins/define-plugin/). A few usage scenarios are described here.\\n\\n#### Environment variable replacement\\n\\n```ts\\nimport { defineConfig } from '@modern-js/module-tools';\\nexport default defineConfig({\\n  buildConfig: {\\n    define: {\\n      'process.env.VERSION': JSON.stringify(process.env.VERSION || '0.0.0'),\\n    },\\n  },\\n});\\n```\\n\\nWith the above configuration, we can put the following code.\\n\\n```\\n// pre-compiler code\\nconsole.log(process.env.VERSION);\\n```\\n\\nWhen executing `VERSION=1.0.0 modern build`, the conversion is:\\n\\n```\\n// compiled code\\nconsole.log('1.0.0');\\n```\\n\\n#### Global variable replacement\\n\\n```ts\\nimport { defineConfig } from '@modern-js/module-tools';\\nexport default defineConfig({\\n  buildConfig: {\\n    define: {\\n      VERSION: JSON.stringify(require('. /package.json').version || '0.0.0'),\\n    },\\n  },\\n});\\n```\\n\\nWith the above configuration, we can put the following code.\\n\\n```\\n// pre-compile code\\nconsole.log(VERSION);\\n```\\n\\nConvert to:\\n\\n```\\n// post-compile code\\nconsole.log('1.0.0');\\n```\\n\\nNote, however: If the project is a TypeScript project, then you may need to add the following to the `.d.ts` file in the project source directory.\\n\\n> If the `.d.ts` file does not exist, then you can create it manually.\\n\\n```ts env.d.ts\\ndeclare const YOUR_ADD_GLOBAL_VAR;\\n```\\n\\n## Build process\\n\\nWhen the `modern build` command is executed, the\\n\\n- Clear the products directory according to `buildConfig.outDir`.\\n- Compile `js/ts` source code to generate the JS build product for Bundle/Bundleless.\\n- Generate Bundle/Bundleless type files using `tsc`.\\n- Handle Copy tasks.\\n\\n## Build errors\\n\\nWhen a build error occurs, based on the information learned above, it is easy to understand what error appears in the terminal.\\n\\n**Errors reported for js or ts builds:**\\n\\n```bash\\nerror  ModuleBuildError:\\n\\n╭───────────────────────╮\\n│ bundle failed:        │\\n│  - format is \\\"cjs\\\"    │\\n│  - target is \\\"esnext\\\" │\\n╰───────────────────────╯\\n\\nDetailed Information:\\n```\\n\\n**Errors reported for the type file generation process:**\\n\\n```bash\\nerror   ModuleBuildError:\\n\\nbundle DTS failed:\\n```\\n\\nFor `js/ts` build errors, we can tell from the error message.\\n\\n- By `'bundle failed:'` to determine if the error is reported for a Bundle build or a Bundleless build?\\n- What is the `format` of the build process?\\n- What is the `target` of the build process?\\n- The specific error message.\\n\"";
+const title = `In-depth understanding of build`;
+const content = "\"---\\nsidebar_position: 1\\n---\\n\\n# In-depth understanding of build\\n\\nIn the [Basic Usage] section, we already knew that you can modify the output product of a project through the `buildConfig` configuration. `buildConfig` not only describes some of the features of the product, but also provides some functionality for building the product.\\n\\n:::tip{title=notes}\\nIf you are not sure what `buildConfig` is, it is recommended to take some time to understand it by following this link.\\n\\n- [[modify-output-product](/en/guide/basic/modify-output-product)]\\n\\n:::\\n\\nIn this chapter we'll dive into the use of certain build configurations and understand what happens when the `modern build` command is executed.\\n\\n## In-depth understanding of `buildConfig`\\n\\n### Bundle and Bundleless\\n\\nSo first let's understand Bundle and Bundleless.\\n\\nA Bundle is a package of build products, which may be a single file or multiple files based on a certain [code splitting strategy](https://esbuild.github.io/api/#splitting).\\n\\nBundleless, on the other hand, means that each source file is compiled and built separately, but not packaged together. Each product file can be found with its corresponding source code file. The process of **Bundleless build can also be understood as the process of code conversion of source files only**.\\n\\nIn `buildConfig` you can specify whether the current build task is Bundle or Bundleless by using [`buildConfig.buildType`](/en/api/config/build-config#buildtype).\\n\\n### Relationship between `input` and `sourceDir`\\n\\n[`buildConfig.input`](/en/api/config/build-config#input) is used to specify the file path or directory path where the source code is read, and its default value differs between Bundle and Bundleless builds.\\n\\n- When `buildType: 'bundle'`, `input` defaults to `['src/index.ts']`\\n- When `buildType: 'bundleless'`, `input` defaults to `['src']`\\n  > 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.\\n\\n:::warning{title=notes}\\nIt 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.\\n:::\\n\\nWe know from the defaults: **Bundle builds can generally specify a file path as the entry point to the build, while Bundleless builds are more expected to use directory paths to find source files**.\\n\\n#### Object type of `input`\\n\\nIn 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`.\\n\\n```js modern.config.ts\\nimport { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  buildConfig: {\\n    input: {\\n      main: ['./src/index.ts'],\\n    },\\n    outDir: './dist',\\n  },\\n});\\n```\\n\\nThe Bundleless build process also supports such use, but it is not recommended.\\n\\n#### `sourceDir`\\n\\n[`sourceDir`](/en/api/config/build-config#sourcedir) is used to specify the source code directory, which is related to both.\\n\\n- type file generation\\n- [`outbase`](https://esbuild.github.io/api/#outbase) for specifying the build process\\n\\nIn general:\\n\\n- **During the Bundleless build process, the values of `sourceDir` and `input` should be the same, and their default values are both `src`**.\\n- It is rarely necessary to use `sourceDir` during the Bundle build process.\\n\\n### Declaration Type Files\\n\\nThe [`buildConfig.dts`](/en/api/config/build-config#dts) configuration is mainly used for type file generation.\\n\\n#### Turn off type generation\\n\\nType generation is turned on by default, if you need to turn it off, you can configure it as follows:\\n\\n```js modern.config.ts\\nimport { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  buildConfig: {\\n    dts: false,\\n  },\\n});\\n```\\n\\n:::tip\\nThe build speed is generally improved by closing the type file.\\n:::\\n\\n#### Build type files\\n\\nWith `buildType: 'bundleless'`, type files are generated using the project's `tsc` command to complete production.\\n\\nThe **module engineering solution also supports packaging of type files**, although care needs to be taken when using this feature.\\n\\n- Some third-party dependencies have incorrect syntax that can cause the packaging process to fail. So in this case, you need to exclude such third-party packages manually with [`buildConfig.externals`](/en/api/config/build-config#externals).\\n- It is not possible to handle the case where the type file of a third-party dependency points to a `.ts` file. For example, the `package.json` of a third-party dependency contains something like this: `{\\\"types\\\": \\\". /src/index.ts\\\"}`.\\n\\n#### Alias Conversion\\n\\nDuring the Bundleless build process, if an alias appears in the source code, e.g.\\n\\n```js ./src/index.ts\\nimport utils from '@common/utils';\\n```\\n\\nNormally, product type files generated with `tsc` will also contain these aliases. However, Module Tools will convert the aliases in the type file generated by `tsc` to:\\n\\n- Alias conversion is possible for code of the form `import '@common/utils'` or `import utils from '@common/utils'`.\\n- Aliasing is possible for code of the form `export { utils } from '@common/utils'`.\\n\\nHowever, there are some cases that cannot be handled at this time.\\n\\n- Output types of the form `Promise<import('@common/utils')>` cannot be converted at this time.\\n\\n#### Some examples of the use of `dts`\\n\\nGeneral usage:\\n\\n```js\\nimport { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  // The output path of the packaged type file at this point is `./dist/types`\\n  buildConfig: {\\n    buildType: 'bundle',\\n    dts: {\\n      tsconfigPath: './other-tsconfig.json',\\n      distPath: './types',\\n    },\\n    outDir: './dist',\\n  },\\n});\\n```\\n\\nFor the use of `dts.only`:\\n\\n```js\\nimport { defineConfig } from '@modern-js/module-tools';\\n\\nexport default defineConfig({\\n  // At this moment the type file is not packaged and the output path is `./dist/types`\\n  buildConfig: [\\n    {\\n      buildType: 'bundle',\\n      dts: false,\\n      outDir: './dist',\\n    },\\n    {\\n      buildType: 'bundleless',\\n      dts: {\\n        only: true,\\n      },\\n      outDir: './dist/types',\\n    },\\n  ],\\n});\\n```\\n\\n### `buildConfig.define` Usage for different scenarios\\n\\n[`buildConfig.define`](/en/api/config/build-config#define) functions somewhat similar to [`webpack.DefinePlugin`](https://webpack.js.org/plugins/define-plugin/). A few usage scenarios are described here.\\n\\n#### Environment variable replacement\\n\\n```js\\nimport { defineConfig } from '@modern-js/module-tools';\\nexport default defineConfig({\\n  buildConfig: {\\n    define: {\\n      'process.env.VERSION': JSON.stringify(process.env.VERSION || '0.0.0'),\\n    },\\n  },\\n});\\n```\\n\\nWith the above configuration, we can put the following code.\\n\\n```js\\n// pre-compiler code\\nconsole.log(process.env.VERSION);\\n```\\n\\nWhen executing `VERSION=1.0.0 modern build`, the conversion is:\\n\\n```js\\n// compiled code\\nconsole.log('1.0.0');\\n```\\n\\n#### Global variable replacement\\n\\n```js\\nimport { defineConfig } from '@modern-js/module-tools';\\nexport default defineConfig({\\n  buildConfig: {\\n    define: {\\n      VERSION: JSON.stringify(require('. /package.json').version || '0.0.0'),\\n    },\\n  },\\n});\\n```\\n\\nWith the above configuration, we can put the following code.\\n\\n```js\\n// pre-compile code\\nconsole.log(VERSION);\\n```\\n\\nConvert to:\\n\\n```js\\n// post-compile code\\nconsole.log('1.0.0');\\n```\\n\\nNote, however: If the project is a TypeScript project, then you may need to add the following to the `.d.ts` file in the project source directory.\\n\\n> If the `.d.ts` file does not exist, then you can create it manually.\\n\\n```ts env.d.ts\\ndeclare const YOUR_ADD_GLOBAL_VAR;\\n```\\n\\n## Build process\\n\\nWhen the `modern build` command is executed, the\\n\\n- Clear the products directory according to `buildConfig.outDir`.\\n- Compile `js/ts` source code to generate the JS build product for Bundle/Bundleless.\\n- Generate Bundle/Bundleless type files using `tsc`.\\n- Handle Copy tasks.\\n\\n## Build errors\\n\\nWhen a build error occurs, based on the information learned above, it is easy to understand what error appears in the terminal.\\n\\n**Errors reported for js or ts builds:**\\n\\n```bash\\nerror  ModuleBuildError:\\n\\n╭───────────────────────╮\\n│ bundle failed:        │\\n│  - format is \\\"cjs\\\"    │\\n│  - target is \\\"esnext\\\" │\\n╰───────────────────────╯\\n\\nDetailed Information:\\n```\\n\\n**Errors reported for the type file generation process:**\\n\\n```bash\\nerror   ModuleBuildError:\\n\\nbundle DTS failed:\\n```\\n\\nFor `js/ts` build errors, we can tell from the error message.\\n\\n- By `'bundle failed:'` to determine if the error is reported for a Bundle build or a Bundleless build?\\n- What is the `format` of the build process?\\n- What is the `target` of the build process?\\n- The specific error message.\\n\"";
 function _createMdxContent(props) {
-  var _components = Object.assign({
+  const _components = Object.assign({
     h1: "h1",
     a: "a",
     p: "p",
@@ -1268,8 +1268,8 @@ function _createMdxContent(props) {
     blockquote: "blockquote",
     h4: "h4"
   }, props.components);
-  if (!CH) _missingMdxReference("CH", false, "47:1-58:4");
-  if (!CH.Code) _missingMdxReference("CH.Code", true, "47:1-58:4");
+  if (!CH) _missingMdxReference("CH", false, "48:1-59:4");
+  if (!CH.Code) _missingMdxReference("CH.Code", true, "48:1-59: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: "in-depth-understanding-of-build",
@@ -1291,15 +1291,15 @@ function _createMdxContent(props) {
         className: "modern-directive-title",
         children: "notes"
       }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.div, {
-        className: "island-directive-content",
+        className: "modern-directive-content",
         children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-          children: ["If you are not sure what ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
+          children: ["\nIf you are not sure what ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig"
           }), " is, it is recommended to take some time to understand it by following this link."]
         }), (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/guide/basic/modify-output-product.html",
+              href: "/module-tools/en/guide/basic/modify-output-product.html",
               children: "modify-output-product"
             }), "]"]
           }), "\n"]
@@ -1331,7 +1331,9 @@ function _createMdxContent(props) {
       children: "So first let's understand Bundle and Bundleless."
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["A Bundle is a package of build products, which may be a single file or multiple files based on a certain ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        href: "https://esbuild.github.io/api/#splitting",
+        href: "https://esbuild.github.io/api/#splitting-4",
+        target: "_blank",
+        rel: "nofollow",
         children: "code splitting strategy"
       }), "."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
@@ -1342,7 +1344,7 @@ function _createMdxContent(props) {
       children: ["In ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: "buildConfig"
       }), " you can specify whether the current build task is Bundle or Bundleless by using ", (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-3",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "buildConfig.buildType"
         })
@@ -1361,7 +1363,7 @@ 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.a, {
-        href: "/en/api/config/build-config#input.html",
+        href: "/module-tools/en/api/config/build-config.html#input-3",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "buildConfig.input"
         })
@@ -1393,14 +1395,14 @@ function _createMdxContent(props) {
         }), "\n"]
       }), "\n"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.div, {
-      className: "modern-directive tip",
+      className: "modern-directive warning",
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
         className: "modern-directive-title",
         children: "notes"
       }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.div, {
-        className: "island-directive-content",
+        className: "modern-directive-content",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-          children: "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."
+          children: "\nIt 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."
         })
       })]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
@@ -1471,7 +1473,7 @@ function _createMdxContent(props) {
               "content": "defineConfig",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#8FBCBB"
                 }
               }
             }, {
@@ -1603,7 +1605,7 @@ function _createMdxContent(props) {
               "content": "buildConfig",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -1640,7 +1642,7 @@ function _createMdxContent(props) {
               "content": "input",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -1677,7 +1679,7 @@ function _createMdxContent(props) {
               "content": "main",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -1758,7 +1760,7 @@ function _createMdxContent(props) {
               "content": "outDir",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -1844,7 +1846,7 @@ function _createMdxContent(props) {
               }
             }]
           }],
-          "lang": "tsx"
+          "lang": "js"
         },
         "annotations": []
       }]
@@ -1862,7 +1864,7 @@ 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.a, {
-        href: "/en/api/config/build-config#sourcedir.html",
+        href: "/module-tools/en/api/config/build-config.html#sourcedir-5",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "sourceDir"
         })
@@ -1872,7 +1874,9 @@ function _createMdxContent(props) {
         children: "type file generation"
       }), "\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: "https://esbuild.github.io/api/#outbase",
+          href: "https://esbuild.github.io/api/#outbase-1",
+          target: "_blank",
+          rel: "nofollow",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "outbase"
           })
@@ -1906,7 +1910,7 @@ function _createMdxContent(props) {
       }), "Declaration Type Files"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["The ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        href: "/en/api/config/build-config#dts.html",
+        href: "/module-tools/en/api/config/build-config.html#dts-3",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "buildConfig.dts"
         })
@@ -1924,12 +1928,12 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(CH.Code, {
       codeConfig: chCodeConfig,
       northPanel: {
-        "tabs": ["./modern.config.ts"],
-        "active": "./modern.config.ts",
+        "tabs": ["modern.config.ts"],
+        "active": "modern.config.ts",
         "heightRatio": 1
       },
       files: [{
-        "name": "./modern.config.ts",
+        "name": "modern.config.ts",
         "focus": "",
         "code": {
           "lines": [{
@@ -1965,7 +1969,7 @@ function _createMdxContent(props) {
               "content": "defineConfig",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#8FBCBB"
                 }
               }
             }, {
@@ -2097,7 +2101,7 @@ function _createMdxContent(props) {
               "content": "buildConfig",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -2134,7 +2138,7 @@ function _createMdxContent(props) {
               "content": "dts",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -2206,7 +2210,7 @@ function _createMdxContent(props) {
               }
             }]
           }],
-          "lang": "ts"
+          "lang": "js"
         },
         "annotations": []
       }]
@@ -2216,9 +2220,9 @@ function _createMdxContent(props) {
         className: "modern-directive-title",
         children: "TIP"
       }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.div, {
-        className: "island-directive-content",
+        className: "modern-directive-content",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-          children: "The build speed is generally improved by closing the type file."
+          children: "\nThe build speed is generally improved by closing the type file."
         })
       })]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h4, {
@@ -2242,7 +2246,7 @@ 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: ["Some third-party dependencies have incorrect syntax that can cause the packaging process to fail. So in this case, you need to exclude such third-party packages manually with ", (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-6",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "buildConfig.externals"
           })
@@ -2296,7 +2300,7 @@ function _createMdxContent(props) {
               "content": "utils",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#8FBCBB"
                 }
               }
             }, {
@@ -2350,7 +2354,7 @@ function _createMdxContent(props) {
               }
             }]
           }],
-          "lang": "ts"
+          "lang": "js"
         },
         "annotations": []
       }]
@@ -2436,7 +2440,7 @@ function _createMdxContent(props) {
               "content": "defineConfig",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#8FBCBB"
                 }
               }
             }, {
@@ -2584,7 +2588,7 @@ function _createMdxContent(props) {
               "content": "buildConfig",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -2621,7 +2625,7 @@ function _createMdxContent(props) {
               "content": "buildType",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -2679,7 +2683,7 @@ function _createMdxContent(props) {
               "content": "dts",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -2716,7 +2720,7 @@ function _createMdxContent(props) {
               "content": "tsconfigPath",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -2774,7 +2778,7 @@ function _createMdxContent(props) {
               "content": "distPath",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -2848,7 +2852,7 @@ function _createMdxContent(props) {
               "content": "outDir",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -2934,7 +2938,7 @@ function _createMdxContent(props) {
               }
             }]
           }],
-          "lang": "ts"
+          "lang": "js"
         },
         "annotations": []
       }]
@@ -2986,7 +2990,7 @@ function _createMdxContent(props) {
               "content": "defineConfig",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#8FBCBB"
                 }
               }
             }, {
@@ -3134,7 +3138,7 @@ function _createMdxContent(props) {
               "content": "buildConfig",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -3180,7 +3184,7 @@ function _createMdxContent(props) {
               "content": "buildType",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -3238,7 +3242,7 @@ function _createMdxContent(props) {
               "content": "dts",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -3282,7 +3286,7 @@ function _createMdxContent(props) {
               "content": "outDir",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -3372,7 +3376,7 @@ function _createMdxContent(props) {
               "content": "buildType",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -3430,7 +3434,7 @@ function _createMdxContent(props) {
               "content": "dts",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -3467,7 +3471,7 @@ function _createMdxContent(props) {
               "content": "only",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -3527,7 +3531,7 @@ function _createMdxContent(props) {
               "content": "outDir",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -3629,7 +3633,7 @@ function _createMdxContent(props) {
               }
             }]
           }],
-          "lang": "ts"
+          "lang": "js"
         },
         "annotations": []
       }]
@@ -3645,12 +3649,14 @@ function _createMdxContent(props) {
       }), " Usage for different scenarios"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: [(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-3",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "buildConfig.define"
         })
       }), " functions somewhat similar to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://webpack.js.org/plugins/define-plugin/",
+        target: "_blank",
+        rel: "nofollow",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "webpack.DefinePlugin"
         })
@@ -3707,7 +3713,7 @@ function _createMdxContent(props) {
               "content": "defineConfig",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#8FBCBB"
                 }
               }
             }, {
@@ -3837,7 +3843,7 @@ function _createMdxContent(props) {
               "content": "buildConfig",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -3874,7 +3880,7 @@ function _createMdxContent(props) {
               "content": "define",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -3946,7 +3952,7 @@ function _createMdxContent(props) {
               "content": "JSON",
               "props": {
                 "style": {
-                  "color": "#8FBCBB"
+                  "color": "#81A1C1"
                 }
               }
             }, {
@@ -4118,7 +4124,7 @@ function _createMdxContent(props) {
               }
             }]
           }],
-          "lang": "ts"
+          "lang": "js"
         },
         "annotations": []
       }]
@@ -4138,15 +4144,93 @@ function _createMdxContent(props) {
           "lines": [{
             "tokens": [{
               "content": "// pre-compiler code",
-              "props": {}
+              "props": {
+                "style": {
+                  "color": "#616E88"
+                }
+              }
             }]
           }, {
             "tokens": [{
-              "content": "console.log(process.env.VERSION);",
-              "props": {}
+              "content": "console",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ".",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": "log",
+              "props": {
+                "style": {
+                  "color": "#88C0D0"
+                }
+              }
+            }, {
+              "content": "(",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": "process",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ".",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": "env",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ".",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": "VERSION",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ")",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": ";",
+              "props": {
+                "style": {
+                  "color": "#81A1C1"
+                }
+              }
             }]
           }],
-          "lang": "text"
+          "lang": "js"
         },
         "annotations": []
       }]
@@ -4168,15 +4252,79 @@ function _createMdxContent(props) {
           "lines": [{
             "tokens": [{
               "content": "// compiled code",
-              "props": {}
+              "props": {
+                "style": {
+                  "color": "#616E88"
+                }
+              }
             }]
           }, {
             "tokens": [{
-              "content": "console.log('1.0.0');",
-              "props": {}
+              "content": "console",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ".",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": "log",
+              "props": {
+                "style": {
+                  "color": "#88C0D0"
+                }
+              }
+            }, {
+              "content": "(",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": "'",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": "1.0.0",
+              "props": {
+                "style": {
+                  "color": "#A3BE8C"
+                }
+              }
+            }, {
+              "content": "'",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": ")",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": ";",
+              "props": {
+                "style": {
+                  "color": "#81A1C1"
+                }
+              }
             }]
           }],
-          "lang": "text"
+          "lang": "js"
         },
         "annotations": []
       }]
@@ -4232,7 +4380,7 @@ function _createMdxContent(props) {
               "content": "defineConfig",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#8FBCBB"
                 }
               }
             }, {
@@ -4362,7 +4510,7 @@ function _createMdxContent(props) {
               "content": "buildConfig",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -4399,7 +4547,7 @@ function _createMdxContent(props) {
               "content": "define",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -4436,7 +4584,7 @@ function _createMdxContent(props) {
               "content": "VERSION",
               "props": {
                 "style": {
-                  "color": "#D8DEE9"
+                  "color": "#88C0D0"
                 }
               }
             }, {
@@ -4457,7 +4605,7 @@ function _createMdxContent(props) {
               "content": "JSON",
               "props": {
                 "style": {
-                  "color": "#8FBCBB"
+                  "color": "#81A1C1"
                 }
               }
             }, {
@@ -4650,7 +4798,7 @@ function _createMdxContent(props) {
               }
             }]
           }],
-          "lang": "ts"
+          "lang": "js"
         },
         "annotations": []
       }]
@@ -4670,15 +4818,65 @@ function _createMdxContent(props) {
           "lines": [{
             "tokens": [{
               "content": "// pre-compile code",
-              "props": {}
+              "props": {
+                "style": {
+                  "color": "#616E88"
+                }
+              }
             }]
           }, {
             "tokens": [{
-              "content": "console.log(VERSION);",
-              "props": {}
+              "content": "console",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ".",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": "log",
+              "props": {
+                "style": {
+                  "color": "#88C0D0"
+                }
+              }
+            }, {
+              "content": "(",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": "VERSION",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ")",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": ";",
+              "props": {
+                "style": {
+                  "color": "#81A1C1"
+                }
+              }
             }]
           }],
-          "lang": "text"
+          "lang": "js"
         },
         "annotations": []
       }]
@@ -4698,15 +4896,79 @@ function _createMdxContent(props) {
           "lines": [{
             "tokens": [{
               "content": "// post-compile code",
-              "props": {}
+              "props": {
+                "style": {
+                  "color": "#616E88"
+                }
+              }
             }]
           }, {
             "tokens": [{
-              "content": "console.log('1.0.0');",
-              "props": {}
+              "content": "console",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9"
+                }
+              }
+            }, {
+              "content": ".",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": "log",
+              "props": {
+                "style": {
+                  "color": "#88C0D0"
+                }
+              }
+            }, {
+              "content": "(",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": "'",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": "1.0.0",
+              "props": {
+                "style": {
+                  "color": "#A3BE8C"
+                }
+              }
+            }, {
+              "content": "'",
+              "props": {
+                "style": {
+                  "color": "#ECEFF4"
+                }
+              }
+            }, {
+              "content": ")",
+              "props": {
+                "style": {
+                  "color": "#D8DEE9FF"
+                }
+              }
+            }, {
+              "content": ";",
+              "props": {
+                "style": {
+                  "color": "#81A1C1"
+                }
+              }
             }]
           }],
-          "lang": "text"
+          "lang": "js"
         },
         "annotations": []
       }]
@@ -5024,21 +5286,17 @@ function _createMdxContent(props) {
     })]
   });
 }
-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/advance/in-depth-about-build.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/advance/in-depth-about-build.md`" : ""));
 }
-var _c;
-__webpack_require__.$Refresh$.register(_c, "MDXContent");
+
 
 /***/ })