@modern-js/module-tools-docs 2.0.2 → 2.2.0

package/docs/zh/api/config/build-config.md

@@ -8,7 +8,7 @@ sidebar_position: 1
 
 ## alias
 
-- 类型：`Record<string, string | string[]> | Function`
+- 类型：`Record<string, string> | Function`
 - 默认值：`{'@': 'src',}`
 
 :::tip
@@ -104,7 +104,8 @@ export default defineConfig({
 - 默认值： `false`
 
 :::tip
-开启svgr后，仍然使用default export导出svg，所以你只能导入默认值。
+开启 svgr 后，仍然使用 default export 导出 svg，所以你只能导入默认值。
+
 ```js index.ts
 // true
 import logo from './logo.svg';
@@ -112,6 +113,7 @@ import logo from './logo.svg';
 // false
 import { ReactComponent } from './logo.svg';
 ```
+
 :::
 
 #### include
@@ -229,7 +231,8 @@ export default defineConfig({
 
 - 全局常量使用大写
 - 自定义全局常量前缀后缀，确保独一无二
-  :::
+
+:::
 
 ## dts
 
@@ -297,6 +300,13 @@ export default defineConfig({
 - 类型： `automatic | classic`
 - 默认值： `automatic`
 
+## metafile
+
+esbuild 以 JSON 格式生成有关构建的一些元数据，可以通过例如 [bundle-buddy](https://bundle-buddy.com/esbuild) 的工具可视化
+
+- type: `boolean`
+- default: `false`
+
 ## minify
 
 使用 esbuild 或者 terser 压缩代码，也可以传入 [terserOptions](https://github.com/terser/terser#minify-options)。
@@ -519,7 +529,7 @@ export default defineConfig({
 根据文件名自动启用 CSS Modules。
 
 - 类型： `boolean | RegExp`
-- 默认值： `true `
+- 默认值： `true`
 
 `true` : 为以 `.module.css` `.module.less` `.module.scss` `.module.sass` 文件名结尾的样式文件启用 CSS Modules。
 
@@ -600,7 +610,7 @@ const tailwind = {
 指定构建的目标环境
 
 - 类型： `'es5' | 'es6' | 'es2015' | 'es2016' | 'es2017' | 'es2018' | 'es2019' | 'es2020' | 'es2021' | 'es2022' | 'esnext'`
-- 默认值： `'es2015'`
+- 默认值： `'es6'`
 
 ## umdGlobals
 
@@ -643,11 +653,13 @@ export default defineConfig({
 ```
 
 此时 UMD 产物会去挂载到 `global.myLib` 上。
+
 :::tip
 
 - 需要遵守 UMD 规范，UMD 产物的模块名不能和全局变量名冲突
 - 模块名不能含有 `-`，`@`，`/` 等特殊字符
-  :::
+
+:::
 
 同时函数形式可以接收一个参数，为当前打包文件的输出路径
 

package/docs/zh/api/config/build-preset.md

@@ -31,7 +31,8 @@ export default defineConfig({
 - [npm](https://www.npmjs.com)
 - [yarn](https://yarnpkg.com/)
 - [pnpm](https://pnpm.io/)
-  :::
+
+:::
 
 ```json package.json
 {
@@ -199,7 +200,7 @@ export const buildConfig = [
 
 当想要使用支持其他 ECMAScript 版本的 `buildPreset` 预设的时候，可以直接在 `'npm-library'`、`'npm-library-with-umd'`、`'npm-component'`、`'npm-component-with-umd'` 这些预设值后面增加想要支持的版本。
 
-例如希望 `'npm-library'` 预设支持 `es2017`，则可以按照如下方式配置：
+例如希望 `'npm-library'` 预设支持 `'es2017'`，则可以按照如下方式配置：
 
 ```js modern.config.ts
 import { defineConfig } from '@modern-js/module-tools';

package/docs/zh/api/config/design-system.md

@@ -6,7 +6,7 @@ sidebar_position: 3
 
 本章描述了有关 designSystem 相关的配置
 
-:::tips
+:::tip
 需要先通过 `pnpm run new` 启用 Tailwind CSS 功能。
 :::
 
@@ -646,7 +646,7 @@ const designSystem = {
 };
 ```
 
-:::tips
+:::tip
 更多关于[TailwindCSS 配置](https://tailwindcss.com/docs/configuration#theme)
 :::
 

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

@@ -9,9 +9,9 @@ sidebar_position: 4
 - type：`Array<ModuleToolsPlugin>`
 
 ```js modern.config.ts
-import { ExamplePlugin } from './plugins/example';
+import { examplePlugin } from './plugins/example';
 export default defineConfig({
-  plugins: [ExamplePlugin()],
+  plugins: [examplePlugin()],
 });
 ```
 

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

@@ -4,8 +4,9 @@ sidebar_position: 5
 
 # Testing
 
-本章描述了测试相关的配置
-:::tips
+本章描述了测试相关的配置。
+
+:::tip
 需要先通过 `pnpm run new` 启用 单元测试 功能。
 :::
 

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

@@ -18,7 +18,6 @@ sidebar_position: 7
 
 - 设置静态资源路径为 `./assets`。
 - 对于超过 **10kb** 的文件会内联到代码中。
-- 对于 `.svg` 后缀的文件使用 [SVGR](https://react-svgr.com/)。
 
 让我们看下面的例子：
 
@@ -143,7 +142,3 @@ export default defineConfig({
 ```
 
 </CH.Spotlight>
-
-## SVGR
-
-WIP

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

@@ -164,7 +164,7 @@ console.info(React);
 
 此时我们会看到这样的产物代码。
 
-```js dist/index.js focus=7:12
+```js dist/index.js focus=12:18
 (function (global, factory) {
   if (typeof module === 'object' && typeof module.exports === 'object')
     factory();
@@ -203,7 +203,7 @@ export default () => {
 
 **默认情况下，以源码文件名称作为该模块在浏览器里全局变量的名称**。对于上面的例子，其产物内容如下：
 
-```js ./dist/index.js focus=6:6
+```js ./dist/index.js focus=9:9
 (function (global, factory) {
   if (typeof module === 'object' && typeof module.exports === 'object')
     factory(exports);
@@ -233,7 +233,7 @@ export default defineConfig({
 
 此时构建产物的内容为：
 
-```js ./dist/index.js focus=6:6
+```js ./dist/index.js focus=9:9
 (function (global, factory) {
   if (typeof module === 'object' && typeof module.exports === 'object')
     factory(exports);

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

@@ -10,7 +10,8 @@ sidebar_position: 1
 如果你还不清楚 `buildConfig` 是什么，建议花一些时间通过下面的链接了解一下：
 
 - 【[修改输出产物](/guide/basic/modify-output-product)】
-  :::
+
+:::
 
 而在本章里我们将要深入理解某些构建配置的使用以及了解执行 `modern build` 命令的时候发生了什么。
 
@@ -34,7 +35,7 @@ sidebar_position: 1
 - 当 `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({
@@ -79,7 +80,7 @@ export default defineConfig({
 
 默认情况下类型生成功能是开启的，如果需要关闭的话，可以按照如下配置：
 
-```ts ./modern.config.ts
+```js modern.config.ts
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -106,7 +107,7 @@ export default defineConfig({
 
 在 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({
@@ -169,7 +170,7 @@ export default defineConfig({
 
 #### 环境变量替换
 
-```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

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

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
 
@@ -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

@@ -55,6 +55,7 @@ Options:
 
 目前可以开启的功能有：
 
+- Test 测试
 - Storybook 调试
 - Tailwind CSS 支持
 - Modern.js Runtime API
@@ -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](/api/config/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](/api/config/build-config) 查看。在 `preset` 对象下不仅包含了 `NPM_LIBRARY`，还包含了其他类似的常量。
+> 关于 `preset.NPM_LIBRARY` 具体对应的值，可以通过 [BuildPreset API](/api/config/build-preset) 查看。在 `preset` 对象下不仅包含了 `NPM_LIBRARY`，还包含了其他类似的常量。
 
 那么这里的 `buildConfig` 对象是什么呢？之前提到的构建产物特点又是根据什么呢？
 
@@ -116,7 +112,7 @@ export default defineConfig({
   - 指定 umd 产物外部导入的全局变量：对应的 API 是 [`buildConfig.umdGlobals`](/api/config/build-config#umdglobals)。
   - 指定 umd 产物的模块名：对应的 API 是 [`buildConfig.umdModuleName`](/api/config/build-config#umdmodulename)。
 
-除了以上分类以外，关于这些 API 的常见问题和最佳实践可以通过下面的链接来了解，敬请期待。
+除了以上分类以外，关于这些 API 的常见问题和最佳实践可以通过下面的链接来了解
 
 - [什么是 `bundle` 和 `bundleless`?](/guide/advance/in-depth-about-build#bundle-和-bundleless)
 - [`input` 与 `sourceDir` 的关系](/guide/advance/in-depth-about-build#input-与-sourcedir-的关系)。
@@ -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/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)来完成。
 
 在模块工程方案中，对于测试用例或者说编写测试的文件有如下约定：
 

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

@@ -14,9 +14,13 @@ sidebar_position: 4
 
 可以通过 [`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，可以查看下面的链接：
 

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

@@ -19,7 +19,7 @@ sidebar_position: 5
 
 因此它是一个复杂且功能强大的工具。
 
-模块工程解决方案集成了 Storybook，因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下：
+模块工程解决方案集成了 Storybook ,因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下：
 
 ## 调试代码
 
@@ -72,17 +72,18 @@ export const content = 'hello world';
 确保在 `stories/tsconfig.json` 中设置了指向项目根目录的 `paths` 配置。
 `paths` 的 `key` 与项目名称相同。
 
-```json stories/tsconfig.json focus=7:9
+```json stories/tsconfig.json focus=5:7
 {
   "extends": "../tsconfig.json",
-  "include": ["./"],
   "compilerOptions": {
-    "jsx": "preserve",
-    "baseUrl": ".",
+    "baseUrl": "../",
     "paths": {
-      "foo": ["../"]
+      "foo": ["."]
     }
-  }
+  },
+  "include": [
+    "**/*"
+  ]
 }
 ```
 
@@ -151,8 +152,6 @@ export default {
 
 ## 配置 Storybook
 
-### 配置文件
-
 Storybook 官方通过一个名为 `.storybook` 的文件夹来进行项目配置，其中包含各种配置文件。**在模块工程方案中，可以在项目的 `config/storybook` 目录下增加 Storybook 配置文件。**
 
 关于 Storybook 各种配置文件的使用方式，可以查看下面的链接：
@@ -166,17 +165,8 @@ Storybook 官方通过一个名为 `.storybook` 的文件夹来进行项目配
 
 在未来我们会考虑这些配置是否可以允许修改，不过目前为了减少不可预知的问题暂时限制使用这些配置。
 
-### `dev.storybook`
-
-除了配置文件以外，模块工程方案还在 `modern.config.(j|t)s` 项目配置文件里提供了 `dev.storybook` 配置项。
-
-目前可以通过该配置对 Storybook 的 webpack 配置进行修改。
-
-{/* 链接待补充 */}
-
-- `dev.storybook.webpack`
 
-### 构建 Storybook 产物
+## 构建 Storybook 产物
 
 除了可以对组件或者普通的模块进行 Storybook 调试，还可以通过下面的命令来执行 Storybook 的构建任务。
 

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

@@ -6,7 +6,7 @@ sidebar_position: 3
 
 ## 三分钟快速上手
 
-想要实际体验 Module Tools？首先需要安装 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.17.6**。
+想要实际体验 Module Tools？首先需要安装 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.18.0**。
 
 然后在你的项目里安装以下依赖：
 

package/docs/zh/plugins/guide/getting-started.mdx

@@ -54,9 +54,9 @@ export const ExamplePlugin = (): CliPlugin<ModuleTools> => {
 然后我们通过 [`plugins`](/api/config/plugins) API，将刚刚写好的插件进行注册。
 
 ```ts ./modern.config.ts
-import { ExamplePlugin } from './plugins/example';
+import { examplePlugin } from './plugins/example';
 export default defineConfig({
-  plugins: [ExamplePlugin()],
+  plugins: [examplePlugin()],
 });
 ```
 

package/docs/zh/plugins/guide/plugin-object.mdx

@@ -16,7 +16,7 @@ Module-tools 插件是一个对象，对象包含以下属性：
 ```ts ./plugins/demo.tsx
 import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';
 
-const MyPlugin: CliPlugin<ModuleTools> = {
+const myPlugin: CliPlugin<ModuleTools> = {
   name: 'my-plugin',
 
   setup() {
@@ -33,9 +33,9 @@ const MyPlugin: CliPlugin<ModuleTools> = {
 ---
 
 ```ts ./modern.config.ts
-import { MyPlugin } from './plugins/demo';
+import { myPlugin } from './plugins/demo';
 export default {
-  plugins: [MyPlugin()],
+  plugins: [myPlugin()],
 };
 ```
 
@@ -48,7 +48,7 @@ export default {
 ```ts
 import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';
 
-const MyPlugin: CliPlugin<ModuleTools> = {
+const myPlugin: CliPlugin<ModuleTools> = {
   name: 'my-plugin',
 
   setup() {
@@ -75,7 +75,7 @@ type MyPluginOptions = {
   foo: string;
 };
 
-const MyPlugin = (options: MyPluginOptions): CliPlugin<ModuleTools> => ({
+const myPlugin = (options: MyPluginOptions): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {