@modern-js/module-tools-docs 2.0.0-beta.4 → 2.0.2

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

@@ -1,24 +1,28 @@
+---
+sidebar_position: 5
+---
+
 # Build umd products
 
 The full name of umd is **Universal Module Definition**, and JS files in this format can run in multiple runtime environments: the
 
-* Browser environment: module loading based on AMD specification
-* Node.js environment: module loading based on CommonJS
-* Other cases: mount the module on a global object.
+- Browser environment: module loading based on AMD specification
+- Node.js environment: module loading based on CommonJS
+- Other cases: mount the module on a global object.
 
 We can therefore specify the build product of the project as an umd product in the following way:
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: {
     format: 'umd',
-  }
+  },
 });
 ```
 
 ## Third-party dependency handling for umd products
 
-In the [[How to handle third-party dependencies]](/en/guide/advance/external-dependency) chapter, we know that we can control whether or not the project packages third-party dependencies via the [`autoExternals`](/en/api/build-config#autoexternal) and [`externals`](/en/api/build-config#externals) APIs.
+In the [[How to handle third-party dependencies]](/en/guide/advance/external-dependency) chapter, we know that we can control whether or not the project packages third-party dependencies via the [`autoExternals`](/en/api/config/build-config#autoexternal) and [`externals`](/en/api/config/build-config#externals) APIs.
 So when building umd products, we can also use it like this:
 
 <CH.Spotlight>
@@ -49,13 +53,13 @@ If the project depends on `react`.
 
 `modern.config.ts`.
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: {
     format: 'umd',
     autoExternal: false,
     externals: ['react'],
-  }
+  },
 });
 ```
 
@@ -63,8 +67,8 @@ export default defineConfig({
 
 When a `react` dependency is used in the source code.
 
-``` tsx src/index.ts
-import React from "react";
+```tsx src/index.ts
+import React from 'react';
 console.info(React);
 ```
 
@@ -72,26 +76,30 @@ console.info(React);
 
 The `react` code is not packaged into the product at this point.
 
-``` js dist/index.js focus=1:7
-(function(global, factory) {
-    if (typeof module === "object" && typeof module.exports === "object") factory(exports, require("react"));
-    else if (typeof define === "function" && define.amd) define([
-        "exports",
-        "react"
-    ], factory);
-    else if (global = typeof globalThis !== "undefined" ? globalThis : global || self) factory(global.index = {}, global.react);
-})(this, function(exports, _react) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", {
-        value: true
-    });
-    _react = /*#__PURE__*/ _interopRequireDefault(_react);
-    function _interopRequireDefault(obj) {
-        return obj && obj.__esModule ? obj : {
-            default: obj
+```js dist/index.js focus=1:7
+(function (global, factory) {
+  if (typeof module === 'object' && typeof module.exports === 'object')
+    factory(exports, require('react'));
+  else if (typeof define === 'function' && define.amd)
+    define(['exports', 'react'], factory);
+  else if (
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)
+  )
+    factory((global.index = {}), global.react);
+})(this, function (exports, _react) {
+  'use strict';
+  Object.defineProperty(exports, '__esModule', {
+    value: true,
+  });
+  _react = /*#__PURE__*/ _interopRequireDefault(_react);
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule
+      ? obj
+      : {
+          default: obj,
         };
-    }
-    console.info(_react.default);
+  }
+  console.info(_react.default);
 });
 ```
 
@@ -99,14 +107,13 @@ The `react` code is not packaged into the product at this point.
 
 We know from the above example that when using the `autoExternal` and `externals` APIs.
 
-* In a Node.js environment, you can get the react dependency with `require('react')`.
-* In a browser environment, you can get the react dependency via `global.react`.
+- In a Node.js environment, you can get the react dependency with `require('react')`.
+- In a browser environment, you can get the react dependency via `global.react`.
 
-However, in the browser environment, when getting third-party dependencies, **global variable names are not necessarily identical to the dependency names**, so you have to use the [`buildConfig.umdGlobals`](/en/api/build-config#umdglobals) API.
+However, in the browser environment, when getting third-party dependencies, **global variable names are not necessarily identical to the dependency names**, so you have to use the [`buildConfig.umdGlobals`](/en/api/config/build-config#umdglobals) API.
 
 Again using the previous example, when the `react` dependency exists in the browser environment as a `windows.React` or `global.React` global variable, then:
 
-
 <CH.Spotlight>
 
 ```json package.json
@@ -133,14 +140,14 @@ If the project depends on `react`.
 
 `modern.config.ts` config file。
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: {
     format: 'umd',
     umdGlobals: {
       react: 'React',
     },
-  }
+  },
 });
 ```
 
@@ -148,8 +155,8 @@ export default defineConfig({
 
 When a `react` dependency is used in the source code.
 
-``` tsx src/index.ts
-import React from "react";
+```tsx src/index.ts
+import React from 'react';
 console.info(React);
 ```
 
@@ -157,22 +164,26 @@ console.info(React);
 
 At this point we will see the product code like this.
 
-``` js dist/index.js focus=7:12
-(function(global, factory) {
-    if (typeof module === "object" && typeof module.exports === "object") factory();
-    else if (typeof define === "function" && define.amd) define([], factory);
-    else if (global = typeof globalThis !== "undefined" ? globalThis : global || self) factory();
-})(this, function() {
-    // ...
-    // libuild:globals:react
-    var require_react = __commonJS({
-        "libuild:globals:react" (exports, module1) {
-            module1.exports = Function("return this")()["React"];
-        }
-    });
-    // src/index.ts
-    var import_react = __toESM(require_react());
-    console.info(import_react.default);
+```js dist/index.js focus=7:12
+(function (global, factory) {
+  if (typeof module === 'object' && typeof module.exports === 'object')
+    factory();
+  else if (typeof define === 'function' && define.amd) define([], factory);
+  else if (
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)
+  )
+    factory();
+})(this, function () {
+  // ...
+  // libuild:globals:react
+  var require_react = __commonJS({
+    'libuild:globals:react'(exports, module1) {
+      module1.exports = Function('return this')()['React'];
+    },
+  });
+  // src/index.ts
+  var import_react = __toESM(require_react());
+  console.info(import_react.default);
 });
 ```
 
@@ -180,62 +191,59 @@ At this point we will see the product code like this.
 
 The project can then run in the browser and use the `React` variables that exist on the global object.
 
-
 ## Changing the name of a global variable in a project
 
 When we package the following code into an umd product and run it in the browser, we can use the module via `window.index`.
 
-``` ts ./src/index.ts
+```ts ./src/index.ts
 export default () => {
   console.info('hello world');
-}
+};
 ```
 
 ** By default, the name of the source file is used as the name of the module's global variable in the browser. **For the above example, the product would read as follows:
 
-``` js ./dist/index.js focus=6:6
-(function(global, factory) {
-    if (typeof module === "object" && typeof module.exports === "object") factory(exports);
-    else if (typeof define === "function" && define.amd) define([
-        "exports"
-    ], factory);
-    else if (global = typeof globalThis !== "undefined" ? globalThis : global || self) factory(global.index = {});
-})(this, function(exports) {
+```js ./dist/index.js focus=6:6
+(function (global, factory) {
+  if (typeof module === 'object' && typeof module.exports === 'object')
+    factory(exports);
+  else if (typeof define === 'function' && define.amd)
+    define(['exports'], factory);
+  else if (
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)
+  )
+    factory((global.index = {}));
+})(this, function (exports) {
   //...
 });
 ```
 
-If you need to modify it, you need to use the [`buildConfig.umdModuleName`](/en/api/build-config#umdmodulename) API.
+If you need to modify it, you need to use the [`buildConfig.umdModuleName`](/en/api/config/build-config#umdmodulename) API.
 
 When this API is used:
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: {
     format: 'umd',
     umdModuleName: 'myLib',
-  }
+  },
 });
 ```
 
 The construction products at this point are:
 
-``` js ./dist/index.js focus=6:6
-(function(global, factory) {
-    if (typeof module === "object" && typeof module.exports === "object") factory(exports);
-    else if (typeof define === "function" && define.amd) define([
-        "exports"
-    ], factory);
-    else if (global = typeof globalThis !== "undefined" ? globalThis : global || self) factory(global.myLib = {});
-})(this, function(exports) {
+```js ./dist/index.js focus=6:6
+(function (global, factory) {
+  if (typeof module === 'object' && typeof module.exports === 'object')
+    factory(exports);
+  else if (typeof define === 'function' && define.amd)
+    define(['exports'], factory);
+  else if (
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self)
+  )
+    factory((global.myLib = {}));
+})(this, function (exports) {
   //...
 });
 ```
-
-
-
-
-
-
-
-

package/docs/en/guide/advance/copy.md

@@ -1,13 +1,17 @@
+---
+sidebar_position: 3
+---
+
 # Use the Copy Tools
 
 The Module Project provides the Copy utility for copying already existing individual files or entire directories into the product directory. Next we learn how to use it.
 
 ## Understanding the Copy API
 
-We can use the Copy tool via the [`buildConfig.copy`](/en/api/build-config#copy) API, which contains the following two main configurations.
+We can use the Copy tool via the [`buildConfig.copy`](/en/api/config/build-config#copy) API, which contains the following two main configurations.
 
-* [`patterns`](/en/api/build-config#copypatterns)
-* [`options`](/en/api/build-config#copyoptions)
+- [`patterns`](/en/api/config/build-config#copypatterns)
+- [`options`](/en/api/config/build-config#copyoptions)
 
 It is recommended to spend some time getting to know them before you start learning.
 
@@ -17,23 +21,24 @@ It is recommended to spend some time getting to know them before you start learn
 
 其中 `patterns.from` 用于指定要复制的文件或者目录。它接收 Glob 形式字符串或具体路径。Glob 形式字符串是指 [fast-glob pattern-syntax](https://github.com/mrmlnc/fast-glob#pattern-syntax)。因此我们可以按照如下两种方式使用它：
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: {
     copy: {
       patterns: [
-        { from: './index.html', to: ''},
-        { from: './*.html', to: ''},
-      ]
-    }
-  }
+        { from: './index.html', to: '' },
+        { from: './*.html', to: '' },
+      ],
+    },
+  },
 });
 ```
 
-`patterns.context` 一般和 `patterns.from` 配合使用，默认情况下它的值与 [`buildConfig.sourceDir`](/zh/api/build-config#sourcedir) 相同，因此我们可以按照如下方式指定 `src/data.json` 文件为要复制的文件：
+`patterns.context` 一般和 `patterns.from` 配合使用，默认情况下它的值与 [`buildConfig.sourceDir`](/api/config/build-config#sourcedir) 相同，因此我们可以按照如下方式指定 `src/data.json` 文件为要复制的文件：
+
 > 默认情况下，`buildConfig.sourceDir` 为 `src`
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: {
     copy: {
@@ -65,15 +70,13 @@ export default defineConfig({
 });
 ```
 
-`patterns.to` 用于指定复制文件的输出路径，默认情况下它的值为 [`buildConfig.outdir`](zh/api/build-config#outdir)对应的值。因此我们按照如下方式将 `src/index.html` 复制到 `dist` 目录下：
+`patterns.to` 用于指定复制文件的输出路径，默认情况下它的值为 [`buildConfig.outDir`](/api/config/build-config#outDir)对应的值。因此我们按照如下方式将 `src/index.html` 复制到 `dist` 目录下：
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: {
     copy: {
-      patterns: [
-        { from: './index.html', }
-      ],
+      patterns: [{ from: './index.html' }],
     },
   },
 });
@@ -81,22 +84,22 @@ export default defineConfig({
 
 当我们配置了 `patterns.to` 的时候：
 
-* 如果是相对路径，则该路径会相对于 `buildConfig.outdir` 计算出复制文件输出的绝对路径。
-* 如果是绝对路径，则会直接使用该值。
+- 如果是相对路径，则该路径会相对于 `buildConfig.outDir` 计算出复制文件输出的绝对路径。
+- 如果是绝对路径，则会直接使用该值。
 
 最后 `patterns.globOptions` 用于配置寻找复制文件 [globby](https://github.com/sindresorhus/globby) 对象，其配置可参考：
 
-* [globby.options](https://github.com/sindresorhus/globby#options)
+- [globby.options](https://github.com/sindresorhus/globby#options)
 
 ## 不同场景使用示例
 
 ### 将文件复制文件
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: [
     {
-      outdir: 'dist',
+      outDir: 'dist',
       copy: {
         patterns: [
           /**
@@ -110,17 +113,17 @@ export default defineConfig({
         ],
       },
     },
-  ]
+  ],
 });
 ```
 
 ### 将文件复制到目录
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: [
     {
-      outdir: 'dist',
+      outDir: 'dist',
       copy: {
         patterns: [
           /**
@@ -140,11 +143,11 @@ export default defineConfig({
 
 ### 从目录复制到目录
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: [
     {
-      outdir: 'dist',
+      outDir: 'dist',
       copy: {
         patterns: [
           /**
@@ -167,11 +170,11 @@ export default defineConfig({
 
 ### 从目录到文件
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: [
     {
-      outdir: 'dist',
+      outDir: 'dist',
       copy: {
         patterns: [
           /**
@@ -194,11 +197,11 @@ export default defineConfig({
 
 ### 使用 Glob
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: [
     {
-      outdir: 'dist',
+      outDir: 'dist',
       copy: {
         patterns: [
           /**

package/docs/en/guide/advance/external-dependency.mdx

@@ -1,11 +1,15 @@
+---
+sidebar_position: 4
+---
+
 # How to handle third-party dependencies
 
 Generally, third-party dependencies required by a project can be installed via the `install` command in the package manager. After the third-party dependencies are successfully installed, they will generally appear under `dependencies` and `devDependencies` in the project `package.json`.
 
-``` json pacakge.json
+```json pacakge.json
 {
-    "dependencies": {},
-    "devDependencies": {}
+  "dependencies": {},
+  "devDependencies": {}
 }
 ```
 
@@ -15,19 +19,19 @@ In addition to `"dependencies"`, [`"peerDependencies"`](/en/guide/basic/before-g
 
 ## Default handling of third-party dependencies
 
-By default, third-party dependencies under `"dependencies"` and `"peerDependencies"` are not packaged in the module project**, so:
+By default, third-party dependencies under `"dependencies"` and `"peerDependencies"` are not packaged in the module project\*\*, so:
 
 <CH.Spotlight>
 
 ```json ./v1/package.json
 {
-    "dependencies": {
-        "react": "^17"
-    },
-    // or
-    "peerDependencies": {
-        "react": "^17"
-    }
+  "dependencies": {
+    "react": "^17"
+  },
+  // or
+  "peerDependencies": {
+    "react": "^17"
+  }
 }
 ```
 
@@ -42,7 +46,7 @@ If the project has a dependency on `react`.
   },
   // or
   "peerDependencies": {
-      "react": "^17"
+    "react": "^17"
   }
 }
 ```
@@ -51,8 +55,8 @@ If the project has a dependency on `react`.
 
 When a `react` dependency is used in the source code.
 
-``` tsx src/index.ts
-import React from "react";
+```tsx src/index.ts
+import React from 'react';
 console.info(React);
 ```
 
@@ -60,8 +64,8 @@ console.info(React);
 
 The `react` code is not packaged into the product at this point.
 
-``` js dist/index.js
-import React from "react";
+```js dist/index.js
+import React from 'react';
 console.info(React);
 ```
 
@@ -77,32 +81,32 @@ So how do you enable the packaging of third-party dependencies in your module pr
 
 The following APIs are provided in the build configuration to handle third-party dependencies:
 
-* [`buildConfig.autoExternal`](/en/api/build-config#autoexternal)
-* [`buildConfig.externals`](/en/api/build-config#externals)
+- [`buildConfig.autoExternal`](/en/api/config/build-config#autoexternal)
+- [`buildConfig.externals`](/en/api/config/build-config#externals)
 
 ### Turn off default behavior
 
 When we want to turn off the default handling behavior for third-party dependencies, we can do so by:
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: {
     autoExternal: false,
-  }
+  },
 });
 ```
 
 This way the dependencies under `"dependencies"` and `"peerDependencies"` will be packaged. If you want to turn off the processing of only one of these dependencies, you can use the
 `buildConfig.autoExternal` in the form of an object.
 
-``` ts
+```ts
 export default defineConfig({
   buildConfig: {
     autoExternal: {
       dependencies: false,
       peerDependencies: false,
     },
-  }
+  },
 });
 ```
 
@@ -115,7 +119,7 @@ For example, when we need to leave only certain dependencies unpacked, we can co
 
 > In this case, it is likely that some dependencies are not suitable for packaging. If this is the case, then you can handle it as follows.
 
-``` ts
+```ts
 epxort default defineConfig({
   buildConfig: {
     autoExternal: false,