@modern-js/module-tools-docs 2.0.1 → 2.0.3-beta.0

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

@@ -9,8 +9,9 @@ sidebar_position: 1
 :::tip{title=注意}
 如果你还不清楚 `buildConfig` 是什么，建议花一些时间通过下面的链接了解一下：
 
-- 【[修改输出产物](/zh/guide/modify-output-product)】
-  :::
+- 【[修改输出产物](/guide/basic/modify-output-product)】
+
+:::
 
 而在本章里我们将要深入理解某些构建配置的使用以及了解执行 `modern build` 命令的时候发生了什么。
 
@@ -24,17 +25,17 @@ sidebar_position: 1
 
 而 Bundleless 则是指对每个源文件单独进行编译构建，但是并不将它们打包在一起。每一个产物文件都可以找到与之相对应的源码文件。**Bundleless 构建的过程，也可以理解为仅对源文件进行代码转换的过程**。
 
-在 `buildConfig` 中可以通过 [`buildConfig.buildType`](/zh/api/build-config#buildtype) 来指定当前构建任务是 Bundle 还是 Bundleless。
+在 `buildConfig` 中可以通过 [`buildConfig.buildType`](/api/config/build-config#buildtype) 来指定当前构建任务是 Bundle 还是 Bundleless。
 
 ### `input` 与 `sourceDir` 的关系
 
-[`buildConfig.input`](/zh/api/build-config#input) 用于指定读取源码的文件路径或者目录路径，其默认值在 Bundle 和 Bundleless 构建过程中有所不同：
+[`buildConfig.input`](/api/config/build-config#input) 用于指定读取源码的文件路径或者目录路径，其默认值在 Bundle 和 Bundleless 构建过程中有所不同：
 
 - 当 `buildType: 'bundle'` 的时候，`input` 默认值为 `['src/index.ts']`
 - 当 `buildType: 'bundleless'` 的时候，`input` 默认值为 `['src']`
   > 实际上，在 `buildType: 'bundle'` 的时候，构建工具会检测是否存在符合 `src/index.(j|t)sx?` 这个名称规则的文件，并将其作为入口文件。
 
-:::warn{title=注意}
+:::warning {title=注意}
 建议不要在 Bundleless 构建过程中指定多个源码文件目录，可能出现不符合预期的结果。目前多个源码目录的 Bundleless 构建还处于不稳定阶段。
 :::
 
@@ -44,7 +45,7 @@ sidebar_position: 1
 
 在 Bundle 构建过程中，除了将 `input` 设置为一个数组，也可以将它设置为一个对象。**通过使用对象的形式，我们可以修改构建产物输出的文件名称**。那么对于下面的例子，`./src/index.ts` 对应的构建产物文件路径为 `./dist/main.js`。
 
-```tsx modern.config.ts
+```js modern.config.ts
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -61,7 +62,7 @@ export default defineConfig({
 
 #### `sourceDir`
 
-[`sourceDir`](/zh/api/build-config#sourcedir) 用于指定源码目录，它主要与以下两个内容有关系：
+[`sourceDir`](/api/config/build-config#sourcedir) 用于指定源码目录，它主要与以下两个内容有关系：
 
 - 类型文件生成
 - 指定构建过程中的 [`outbase`](https://esbuild.github.io/api/#outbase)
@@ -73,13 +74,13 @@ export default defineConfig({
 
 ### 类型文件
 
-[`buildConfig.dts`](/zh/api/build-config#dts) 配置主要用于类型文件的生成。
+[`buildConfig.dts`](/api/config/build-config#dts) 配置主要用于类型文件的生成。
 
 #### 关闭类型生成
 
 默认情况下类型生成功能是开启的，如果需要关闭的话，可以按照如下配置：
 
-```ts ./modern.config.ts
+```js modern.config.ts
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -99,14 +100,14 @@ export default defineConfig({
 
 **模块工程解决方案同时还支持对类型文件进行打包**，不过使用该功能的时候需要注意：
 
-- 一些第三方依赖存在错误的语法会导致打包过程失败。因此对于这种情况，需要手动通过 [`buildConfig.externals`](/zh/api/build-config#externals) 将这类第三方包排除。
+- 一些第三方依赖存在错误的语法会导致打包过程失败。因此对于这种情况，需要手动通过 [`buildConfig.externals`](/api/config/build-config#externals) 将这类第三方包排除。
 - 对于第三方依赖的类型文件指向的是一个 `.ts` 文件的情况，目前无法处理。比如第三方依赖的 `package.json` 中存在这样的内容： `{"types": "./src/index.ts"}`。
 
 #### 别名转换
 
 在 Bundleless 构建过程中，如果源代码中出现了别名，例如：
 
-```ts ./src/index.ts
+```js ./src/index.ts
 import utils from '@common/utils';
 ```
 
@@ -123,7 +124,7 @@ import utils from '@common/utils';
 
 一般使用方式：
 
-```ts
+```js
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -141,7 +142,7 @@ export default defineConfig({
 
 使用 `dts.only` 的情况：
 
-```ts
+```js
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -165,11 +166,11 @@ export default defineConfig({
 
 ### `buildConfig.define` 不同场景的使用方式
 
-[`buildConfig.define`](/zh/api/build-config#define) 功能有些类似 [`webpack.DefinePlugin`](https://webpack.js.org/plugins/define-plugin/)。这里介绍几个使用场景：
+[`buildConfig.define`](/api/config/build-config#define) 功能有些类似 [`webpack.DefinePlugin`](https://webpack.js.org/plugins/define-plugin/)。这里介绍几个使用场景：
 
 #### 环境变量替换
 
-```ts
+```js
 import { defineConfig } from '@modern-js/module-tools';
 export default defineConfig({
   buildConfig: {
@@ -182,21 +183,21 @@ export default defineConfig({
 
 通过上面的配置，我们就可以将下面这段代码：
 
-```
+```js
 // 编译前代码
 console.log(process.env.VERSION);
 ```
 
 在执行 `VERSION=1.0.0 modern build` 的时候，转换为：
 
-```
+```js
 // 编译后代码
 console.log('1.0.0');
 ```
 
 #### 全局变量替换
 
-```ts
+```js
 import { defineConfig } from '@modern-js/module-tools';
 export default defineConfig({
   buildConfig: {
@@ -209,14 +210,14 @@ export default defineConfig({
 
 通过上面的配置，我们就可以将下面这段代码：
 
-```
+```js
 // 编译前代码
 console.log(VERSION);
 ```
 
 转换为：
 
-```
+```js
 // 编译后代码
 console.log('1.0.0');
 ```

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

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

package/docs/zh/guide/advance/theme-config.mdx

@@ -4,7 +4,7 @@ sidebar_position: 6
 
 # 主题配置
 
-模块工程通过 [`designSystem`](/zh/api/design-system) API，提供了配置主题的能力。
+模块工程通过 [`designSystem`](/api/config/design-system) API，提供了配置主题的能力。
 
 ## 动机和原理
 
@@ -17,7 +17,7 @@ sidebar_position: 6
   - 在 css/less/sass 下通过 `@apply` 自定义指令使用与 tailwindcss 支持的 HTML 类名同名的字符串。
 - css/less/scss: 通过 `designSystem` 生成全局的样式变量。
 
-`designSystem` API 的数据结构借鉴了 `tailwindcss` 配置对象中的 [theme API](https://tailwindcss.com/docs/theme)，因此存在默认的一套 `designToken`。关于默认值，可以查看 [`designSystem` API](/zh/api/design-system)。
+`designSystem` API 的数据结构借鉴了 `tailwindcss` 配置对象中的 [theme API](https://tailwindcss.com/docs/theme)，因此存在默认的一套 `designToken`。关于默认值，可以查看 [`designSystem` API](/api/config/design-system)。
 
 :::info
 目前暂时还未支持 css/less/sass 全局变量。

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

@@ -6,7 +6,7 @@ sidebar_position: 1
 
 ## 环境准备
 
-为了使用 Modern.js 模块工程解决方案，首先需要 [NodeJS](https://nodejs.org/zh/)，我们推荐最新的[长期维护版本](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.17.6**。因为非稳定的 NodeJS 时常有一些 Bug，你可以使用 [nvm-windows](https://github.com/coreybutler/nvm-windows) 和 [nvm](https://github.com/nvm-sh/nvm)（Mac/linux）安装，这样你就可以方便地切换到不同的 NodeJS 版本，这些版本可能会用于不同的项目。
+为了使用 Modern.js 模块工程解决方案，首先需要 [NodeJS](https://nodejs.org/zh/)，我们推荐最新的[长期维护版本](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.18.0**。因为非稳定的 NodeJS 时常有一些 Bug，你可以使用 [nvm-windows](https://github.com/coreybutler/nvm-windows) 和 [nvm](https://github.com/nvm-sh/nvm)（Mac/linux）安装，这样你就可以方便地切换到不同的 NodeJS 版本，这些版本可能会用于不同的项目。
 
 ## 初识 npm
 
@@ -14,7 +14,7 @@ sidebar_position: 1
 
 npm 是 NodeJS 的标准软件包管理器。它一开始的用途是用于下载和管理 NodeJS 包的依赖关系，但后来它逐渐变成为一个用于前端 JavaScript 的工具。
 
-**如果你已经对 npm 和 npm 包的使用方式有所了解，那么可以直接跳到[【npm 包管理器】](/zh/guide/before-getting-started#npm-包管理器)部分。**
+**如果你已经对 npm 和 npm 包的使用方式有所了解，那么可以直接跳到[【npm 包管理器】](/guide/basic/before-getting-started#npm-包管理器)部分。**
 
 ## npm 包类型项目
 
@@ -71,6 +71,7 @@ npm Registry 是一个 [npm 包存储的地方](https://docs.npmjs.com/about-the
 ```
 
 **在安装或者使用第三方 npm 包的时候一定要确定它们的用途，以及通过区分它们的类型确定好它们应该放在 `"dependencies"` 还是 `"devDependencies"` 中。**
+
 :::tip
 一般来说，需要在源代码中使用到的包都属于 `dependencies` 依赖。除非你通过打包的方式将依赖的代码输出到本地，那么这种情况可以将它作为 `devDependencies` 依赖。
 :::
@@ -161,22 +162,28 @@ npm install -g pnpm
 
 ## Module Tools 配置文件
 
-初始化的模块工程项目目录下提供了 Module Tools 的配置文件 —— `modern.config.(j|t)s`。默认情况下，不需要做任何配置，因此 `modern.config` 配置文件不是必须存在的。
+通过`@modern-js/create`创建的模块工程项目目录下提供了 Module Tools 的配置文件 —— `modern.config.(j|t)s`。但 `modern.config` 配置文件不是必须存在的。
 
-初始化的配置文件的内容如下：
+默认情况下，生成的配置文件的内容如下：
 
 ```typescript
 // modern.config.ts
-import { defineConfig } from '@modern-js/module-tools';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
-export default defineConfig({});
+export default defineConfig({
+  plugins: [moduleTools()],
+  buildPreset: 'npm-library',
+});
 ```
 
 ```js
 // modern.config.js
-const { defineConfig } = require('@modern-js/module-tools');
+import moduleTools from '@modern-js/module-tools';
 
-module.exports = defineConfig({});
+export default {
+  plugins: [moduleTools()],
+  buildPreset: 'npm-library',
+};
 ```
 
 **我们推荐使用 `defineConfig` 函数**，不过并不强制使用它。因此你也可以在配置文件中直接返回一个对象：
@@ -188,5 +195,5 @@ export default {};
 
 ```js
 // modern.config.js
-module.exports = {};
+export default {};
 ```

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

@@ -26,7 +26,7 @@ Options:
 当想要启动项目构建的时候，可以执行 `modern build` 命令。在使用这个命令的时候，我们可以：
 
 - 当想要以观察模式启动构建时，使用 `--watch` 选项。
-- 当想要指定项目编译读取的 TypeScript 配置文件的路径时，使用 `build --tsconfig ./path/config.json` 选项。使用该选项后，会覆盖所有 [`buildConfig`](/zh/api/build-config) 里 [`dts.tsconfigPath`](/zh/api/build-config) 配置。
+- 当想要指定项目编译读取的 TypeScript 配置文件的路径时，使用 `build --tsconfig ./path/config.json` 选项。使用该选项后，会覆盖所有 [`buildConfig`](/api/config/build-config) 里 [`dts.tsconfigPath`](/api/config/build-config) 配置。
 - 当需要关闭项目的 DTS 类型文件生成和类型检查行为时，可以使用 `--no-dts` 选项。**注意：类型文件的生成依赖类型检查的结果。如果关闭了类型检查，那么类型文件也不会生成**。
 - 当需要关闭自动清除产物输出目录的行为时，可以使用 `--no-clear` 选项。
 
@@ -55,11 +55,12 @@ Options:
 
 目前可以开启的功能有：
 
+- Test 测试
 - Storybook 调试
 - Tailwind CSS 支持
 - Modern.js Runtime API
 
-关于这些功能，可以通过[【使用微生成器】](/zh/guide/use-micro-generator) 章节了解更多。
+关于这些功能，可以通过[【使用微生成器】](/guide/basic/use-micro-generator) 章节了解更多。
 
 ## `modern dev`
 
@@ -88,6 +89,7 @@ Options:
   -h, --help  display help for command
 ```
 
+需要先执行 `modern new` 开启测试功能，然后才可以执行 `modern test` 命令。
 `modern test` 命令会自动将 `src/tests/*.test.(js|ts|jsx|tsx)` 文件当做测试用例运行。
 
 ## `modern lint`
@@ -204,5 +206,3 @@ Options:
 `modern upgrade` 命令，用于升级项目 Modern.js 相关依赖至最新版本。
 
 在项目根目录下执行命令 `npx modern upgrade`，会默认将当前执行命令项目的 `package.json` 中的 Modern.js 相关依赖更新至最新版本。
-
-命令在 `@modern-js/module-tools` 版本 **>= 1.17.0** 提供，之前版本可使用 `npx @modern-js/upgrade` 进行升级。

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

@@ -9,25 +9,21 @@ sidebar_position: 3
 当在初始化的项目里使用 `modern build` 命令的时候，会根据 Module Tools 默认支持的配置生成相应的产物。默认支持的配置具体如下：
 
 ```typescript
-import { defineConfig } from '@modern-js/module-tools';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
-  buildPreset: 'base-config',
+  plugins: [moduleTools()],
+  buildPreset: 'npm-library',
 });
 ```
 
 **默认生成产物具有以下特点**：
 
-- 代码格式为 [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules)，或者简称为 `cjs`。
-- 代码语法支持到 `ES6`。
+- 会生成[CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules)和[ESM](https://nodejs.org/api/esm.html#modules-ecmascript-modules)两份产物。
+- 代码语法支持到 `ES6` ,更高级的语法将会被转换。
 - 所有的代码经过打包变成了一个文件，即进行了 **bundle** 处理。
 - 产物输出根目录为项目下的 `dist` 目录，类型文件输出的目录为 `dist/types`。
 
-:::tip
-
-1. 所谓“代码语法支持到 ES6”的意思是指：产物代码所支持的语法不会超过 `ES6`。如果源码中使用语法是 `ES6` 以上的语法（例如 `ES2017`），则会被进行转换。
-   :::
-
 看到这里你可能会有以下疑问：
 
 1. `buildPreset` 是什么？
@@ -43,7 +39,7 @@ export default defineConfig({
 
 **构建预设的值可以是字符串形式**，因此这样形式的构建预设叫做预设字符串。
 
-模块工程解决方案根据 npm 包使用的通用场景，提供了通用的构建预设字符串以及相应的变体。目前支持的所有预设字符串可以通过 [BuildPreset API](/zh/api/build-config) 查看。这里讲解一下关于**通用的预设字符串与变体之间的关系**。
+模块工程解决方案根据 npm 包使用的通用场景，提供了通用的构建预设字符串以及相应的变体。目前支持的所有预设字符串可以通过 [BuildPreset API](/api/config/build-preset) 查看。这里讲解一下关于**通用的预设字符串与变体之间的关系**。
 
 在通用的预设字符串中，`"npm-library"` 可以用于在开发库类型的 npm 包的场景下使用，它适合大多数普通的模块类型项目。当设置 `"npm-library"` 的时候，项目的输出产物会有以下特点：
 
@@ -53,13 +49,13 @@ export default defineConfig({
 
 而预设字符串 `"npm-library"` 对应的变体则是在原本产物的基础上修改了**代码语法支持**这一特点，同时在字符串命名上也变为了 `"npm-library-[es5 | es2016...es2020 | esnext]"` 这样的形式。
 
-例如，如果在预设字符串 `"npm-library"` 对应的输出产物基础上，让产物代码支持的语法变为 `es2017` 的话，那么只需要将 `"npm-library"` 改变为 `"npm-library-es2017"` 就可以了。
+例如，如果在预设字符串 `"npm-library"` 对应的输出产物基础上，让产物代码支持的语法变为 `es5` 的话，那么只需要将 `"npm-library"` 改变为 `"npm-library-es5"` 就可以了。
 
 ### 构建预设的函数形式
 
 **除了字符串形式以外，构建预设的值也可以是函数形式，在函数中可以打印或者修改某个预设值对应的具体配置**。
 
-例如，如果使用预设函数的形式达到预设字符串 `"npm-library-es2017"` 同样的效果，可以按照如下的方式：
+例如，如果使用预设函数的形式达到预设字符串 `"npm-library-es5"` 同样的效果，可以按照如下的方式：
 
 ```typescript
 import { defineConfig } from '@modern-js/module-tools';
@@ -67,15 +63,15 @@ import { defineConfig } from '@modern-js/module-tools';
 export default defineConfig({
   buildPreset({ preset }) {
     return preset.NPM_LIBRARY.map(config => {
-      return { ...config, target: 'es2017' };
+      return { ...config, target: 'es5' };
     });
   },
 });
 ```
 
-在上面的代码实现中，`preset.NPM_LIBRARY` 与预设字符串 `"npm-library"` 是相对应的，它代表着 `"npm-library"` 等价的多组构建相关的配置。我们通过 `map` 方法遍历了 `NPM_LIBRARY` 这个数组，在这个数组中包含了多个 `buildConfig` 对象。我们将原本的 `buildConfig` 对象进行了浅拷贝并修改了浅拷贝后得到 `buildConfig.target`，将它指定为 `es2017`。
+在上面的代码实现中，`preset.NPM_LIBRARY` 与预设字符串 `"npm-library"` 是相对应的，它代表着 `"npm-library"` 等价的多组构建相关的配置。我们通过 `map` 方法遍历了 `NPM_LIBRARY` 这个数组，在这个数组中包含了多个 `buildConfig` 对象。我们将原本的 `buildConfig` 对象进行了浅拷贝并修改了浅拷贝后得到 `buildConfig.target`，将它指定为 `es5`。
 
-> 关于 `preset.NPM_LIBRARY` 具体对应的值，可以通过 [BuildPreset API](/zh/api/build-config) 查看。在 `preset` 对象下不仅包含了 `NPM_LIBRARY`，还包含了其他类似的常量。
+> 关于 `preset.NPM_LIBRARY` 具体对应的值，可以通过 [BuildPreset API](/api/config/build-preset) 查看。在 `preset` 对象下不仅包含了 `NPM_LIBRARY`，还包含了其他类似的常量。
 
 那么这里的 `buildConfig` 对象是什么呢？之前提到的构建产物特点又是根据什么呢？
 
@@ -87,45 +83,45 @@ export default defineConfig({
 
 **构建产物的基本属性包括：**
 
-- 产物是否被打包：对应的 API 是 [`buildConfig.buildType`](/zh/api/build-config#buildtype)。
-- 产物对于语法的支持：对应的 API 是 [`buildConfig.target`](/zh/api/build-config#target)。
-- 产物格式：对应的 API 是 [`buildConfig.format`](/zh/api/build-config#format)。
-- 产物类型文件如何处理，对应的 API 是 [`buildConfig.dts`](/zh/api/build-config#dts)。
-- 产物的 sourceMap 如何处理：对应的 API 是 [`buildConfig.sourceMap`](/zh/api/build-config#sourcemap)。
-- 产物对应的输入（或者是源文件）：对应的 API 是 [`buildConfig.input`](/zh/api/build-config#input)。
-- 产物输出的目录：对应的 API 是 [`buildConfig.outDir`](/zh/api/build-config#outDir)。
-- 构建的源码目录：对应的 API 是 [`buildConfig.sourceDir`](/zh/api/build-config#sourcedir)。
+- 产物是否被打包：对应的 API 是 [`buildConfig.buildType`](/api/config/build-config#buildtype)。
+- 产物对于语法的支持：对应的 API 是 [`buildConfig.target`](/api/config/build-config#target)。
+- 产物格式：对应的 API 是 [`buildConfig.format`](/api/config/build-config#format)。
+- 产物类型文件如何处理，对应的 API 是 [`buildConfig.dts`](/api/config/build-config#dts)。
+- 产物的 sourceMap 如何处理：对应的 API 是 [`buildConfig.sourceMap`](/api/config/build-config#sourcemap)。
+- 产物对应的输入（或者是源文件）：对应的 API 是 [`buildConfig.input`](/api/config/build-config#input)。
+- 产物输出的目录：对应的 API 是 [`buildConfig.outDir`](/api/config/build-config#outDir)。
+- 构建的源码目录：对应的 API 是 [`buildConfig.sourceDir`](/api/config/build-config#sourcedir)。
 
 **构建产物所需的常用功能包括：**
 
-- 别名：对应的 API 是 [`buildConfig.alias`](/zh/api/build-config#alias)。
-- 静态资源处理：对应的 API 是 [`buildConfig.asset`](/zh/api/build-config#asset)。
+- 别名：对应的 API 是 [`buildConfig.alias`](/api/config/build-config#alias)。
+- 静态资源处理：对应的 API 是 [`buildConfig.asset`](/api/config/build-config#asset)。
 - 第三方依赖处理：对应的 API 有：
-  - [`buildConfig.autoExternal`](/zh/api/build-config#autoexternal)。
-  - [`buildConfig.externals`](/zh/api/build-config#externals)。
-- 拷贝：对应的 API 是 [`buildConfig.copy`](/zh/api/build-config#copy)。
-- 全局变量替换：对应的 API 是 [`buildConfig.define`](/zh/api/build-config#define)。
-- 指定 [JSX](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) 编译方式，对应的 API 是 [`buildConfig.jsx`](/zh/api/build-config#jsx)。
+  - [`buildConfig.autoExternal`](/api/config/build-config#autoexternal)。
+  - [`buildConfig.externals`](/api/config/build-config#externals)。
+- 拷贝：对应的 API 是 [`buildConfig.copy`](/api/config/build-config#copy)。
+- 全局变量替换：对应的 API 是 [`buildConfig.define`](/api/config/build-config#define)。
+- 指定 [JSX](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) 编译方式，对应的 API 是 [`buildConfig.jsx`](/api/config/build-config#jsx)。
 
 **一些高级属性或者使用频率不高的功能：**
 
-- 产物代码压缩：对应的 API 是 [`buildConfig.minify`](/zh/api/build-config#minify)。
-- 代码分割：[`buildConfig.spitting`](/zh/api/build-config#splitting)
-- 指定构建产物用于 NodeJS 环境还是浏览器环境：对应的 API 是 [`buildConfig.platform`](/zh/api/build-config#platform)。
+- 产物代码压缩：对应的 API 是 [`buildConfig.minify`](/api/config/build-config#minify)。
+- 代码分割：[`buildConfig.spitting`](/api/config/build-config#splitting)
+- 指定构建产物用于 NodeJS 环境还是浏览器环境：对应的 API 是 [`buildConfig.platform`](/api/config/build-config#platform)。
 - umd 产物相关：
-  - 指定 umd 产物外部导入的全局变量：对应的 API 是 [`buildConfig.umdGlobals`](/zh/api/build-config#umdglobals)。
-  - 指定 umd 产物的模块名：对应的 API 是 [`buildConfig.umdModuleName`](/zh/api/build-config#umdmodulename)。
+  - 指定 umd 产物外部导入的全局变量：对应的 API 是 [`buildConfig.umdGlobals`](/api/config/build-config#umdglobals)。
+  - 指定 umd 产物的模块名：对应的 API 是 [`buildConfig.umdModuleName`](/api/config/build-config#umdmodulename)。
 
-除了以上分类以外，关于这些 API 的常见问题和最佳实践可以通过下面的链接来了解，敬请期待。
+除了以上分类以外，关于这些 API 的常见问题和最佳实践可以通过下面的链接来了解
 
-- [什么是 `bundle` 和 `bundleless`?](/zh/guide/advance/in-depth-about-build#bundle-和-bundleless)
-- [`input` 与 `sourceDir` 的关系](/zh/guide/advance/in-depth-about-build#input-与-sourcedir-的关系)。
-- [产物中类型文件的多种生成方式](/zh/guide/advance/in-depth-about-build#类型文件)。
-- [`buildConfig.define` 不同场景的使用方式。](/zh/guide/advance/in-depth-about-build#buildconfigdefine-不同场景的使用方式)
-- [如何处理第三方依赖？](/zh/guide/advance/external-dependency)
-- [如何使用拷贝？](/zh/guide/advance/copy)
-- [如何构建 umd 产物？](/zh/guide/advance/build-umd#设置项目的全局变量名称)
-- [静态资源目前所支持的能力。](/zh/guide/advance/asset)
+- [什么是 `bundle` 和 `bundleless`?](/guide/advance/in-depth-about-build#bundle-和-bundleless)
+- [`input` 与 `sourceDir` 的关系](/guide/advance/in-depth-about-build#input-与-sourcedir-的关系)。
+- [产物中类型文件的多种生成方式](/guide/advance/in-depth-about-build#类型文件)。
+- [`buildConfig.define` 不同场景的使用方式。](/guide/advance/in-depth-about-build#buildconfigdefine-不同场景的使用方式)
+- [如何处理第三方依赖？](/guide/advance/external-dependency)
+- [如何使用拷贝？](/guide/advance/copy)
+- [如何构建 umd 产物？](/guide/advance/build-umd#设置项目的全局变量名称)
+- [静态资源目前所支持的能力。](/guide/advance/asset)
 
 ## 什么时候使用 `buildConfig`
 
@@ -135,8 +131,10 @@ export default defineConfig({
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
-  buildConfig: [{}],
-  buildPreset: 'base-config',
+  buildConfig: {
+    format: 'umd',
+  },
+  buildPreset: 'npm-library',
 });
 ```
 
@@ -148,4 +146,4 @@ export default defineConfig({
 
 `buildPreset` 代表的一组或者多组构建相关的配置都是由 `buildConfig` 组成，**当使用 `buildPreset` 无法满足当前项目需求的时候，就可以使用 `buildConfig` 来自定义输出产物**。
 
-在使用 `buildConfig` 的过程，就是对“_获得怎样的构建产物_”的思考过程。
+在使用 `buildConfig` 的过程，就是对**获得怎样的构建产物**的思考过程。

package/docs/zh/guide/basic/publish-your-project.md

@@ -20,7 +20,7 @@ sidebar_position: 7
 
 当这些变化一旦完成后，需要通过以下命令来对当前的变化进行记录：
 
-- [`modern change`](/zh/guide/command-preview#modern-change)
+- [`modern change`](/guide/basic/command-preview#modern-change)
 
 执行 `modern change` 命令后会向开发者提出几个问题，并根据开发者的回答生成变更记录。变更记录文件包含了版本变化的类型和其描述，该文件会被提交到 git 仓库中。
 
@@ -53,7 +53,7 @@ publish test
 
 当需要更新项目版本的时候，执行以下命令：
 
-- [`modern bump`](/zh/guide/command-preview#modern-bump)
+- [`modern bump`](/guide/basic/command-preview#modern-bump)
 
 执行 `modern bump` 将会基于 `.changeset/` 目录下记录了变更的 Markdown 文件内容来修改 `package.json` 中的版本号，同时生成 `CHANGELOG.md` 文件。**而当版本更新完成后，这些记录变更的 Markdown 文件也会被删除，也可说这些 Markdown 文件被“消耗”掉了**。
 
@@ -71,7 +71,7 @@ publish test
 
 发布项目可以执行以下命令：
 
-- [`modern publish`](/zh/guide/command-preview#modern-release)
+- [`modern publish`](/guide/basic/command-preview#modern-release)
 
 `modern release` 命令可以将项目发布到 npm Registry。
 
@@ -89,7 +89,7 @@ modern release --tag beta
 
 当需要在正式发布之前进行预发布，则需要执行以下命令：
 
-- [`modern pre`](/zh/guide/command-preview#modern-pre)
+- [`modern pre`](/guide/basic/command-preview#modern-pre)
 
 首先 `modern pre enter <tag>` 进入预发布模式，`<tag>` 可以与发布项目的时候使用 `modern release --tag` 命令指定的 `tag` 一致。
 

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

@@ -8,9 +8,7 @@ sidebar_position: 6
 
 ## 先决条件和约定
 
-想要使用项目的测试功能，需要确保项目中包含以下依赖：
-
-- `"@modern-js/plugin-testing"`
+想要使用项目的测试功能，需要确保项目中包含依赖：`"@modern-js/plugin-testing"` ,可以通过[modern new](/guide/basic/command-preview#modern-new)来完成。
 
 在模块工程方案中，对于测试用例或者说编写测试的文件有如下约定：
 
@@ -38,7 +36,7 @@ modern test --updateSnapshot
 /obj/eden-cn/uhbfnupenuhf/test-result.png
 模块工程方案对测试提供了以下配置：
 
-- [`testing`](/zh/api/config-test)
+- [`testing`](/api/config/testing)
 
 可以在 `modern.config.(j|t)s` 中增加它。
 
@@ -100,10 +98,12 @@ npm run test
 
 ### 组件
 
-对于组件，Modern.js 的 [Runtime API](xxx) 提供了用于测试 UI 组件的功能，其功能由 `@modern-js/runtime/testing` 提供。
+{/* 链接待补充 */}
+
+对于组件，Modern.js 的 Runtime API 提供了用于测试 UI 组件的功能，其功能由 `@modern-js/runtime/testing` 提供。
 
 :::tip
-如果需要使用 Runtime API，那么可以通过 [微生成器](/zh/guide/command-preview) 开启。
+如果需要使用 Runtime API，那么可以通过 [微生成器](/guide/basic/command-preview) 开启。
 :::
 
 <CH.Spotlight>

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

@@ -12,16 +12,20 @@ sidebar_position: 4
 
 因此通过这些能力，**微生成器可以为项目开启额外的特性功能**。
 
-可以通过 [`modern new`](/zh/guide/command-preview) 启动微生成器。目前模块工程方案支持的微生成器功能有：
+可以通过 [`modern new`](/guide/basic/command-preview) 启动微生成器。目前模块工程方案支持的微生成器功能有：
+
+## Test 测试
+
+当我们想要对一些模块进行测试的时候，可以启用 test 测试功能。启动该功能后，**会在项目目录下创建 `tests` 目录以及相关文件，在 package.json 中新增 `"@modern-js/plugin-testing"` 依赖**。
 
 ## Storybook 调试
 
-当我们想要对组件或者普通模块进行调试的时候，可以启用 **Storybook 调试功能**。启动该功能后，**会在项目目录下创建 `stories` 目录以及相关文件，在 package.json 中新增 `"@modern-js/plugin-storybook"` 依赖**。
+当我们想要对组件或者普通模块进行调试的时候，可以启用 Storybook 调试功能。启动该功能后，**会在项目目录下创建 `stories` 目录以及相关文件，在 package.json 中新增 `"@modern-js/plugin-storybook"` 依赖**。
 
 关于如何启动 Storybook 以及如何使用 Storybook，可以查看下面的链接：
 
-- [`modern dev`](/zh/guide/command-preview#modern-dev)
-- [使用 Storybook](/zh/guide/using-storybook)
+- [`modern dev`](/guide/basic/command-preview#modern-dev)
+- [使用 Storybook](/guide/basic/using-storybook)
 
 ## Tailwind CSS 支持
 
@@ -29,10 +33,10 @@ sidebar_position: 4
 
 关于如何在模块工程里使用 Tailwind CSS，可以查看：
 
-- [使用 Tailwind CSS](xxx)
+- [使用 Tailwind CSS](https://modernjs.dev/docs/apis/module/config/tools/tailwindcss)
 
 ## 启动 Modern.js Runtime API
 
-**Modern.js 提供了 [Runtime API](xxx) 能力，这些 API 只能在 Modern.js 的应用项目环境中使用**。如果你需要开发一个 Modern.js 应用环境中使用的组件，那么你可以开启该特性，微生成器会增加 `"@modern-js/runtime"`依赖。
+**Modern.js 提供了 [Runtime API](https://modernjs.dev/docs/apis/module/runtime/) 能力，这些 API 只能在 Modern.js 的应用项目环境中使用**。如果你需要开发一个 Modern.js 应用环境中使用的组件，那么你可以开启该特性，微生成器会增加 `"@modern-js/runtime"`依赖。
 
 另外，Storybook 调试工具也会通过检测项目的依赖确定项目是否需要使用 Runtime API，并且提供与 Modern.js 应用项目一样的 Runtime API 运行环境。