@modern-js/module-tools-docs 2.2.0 → 2.2.1-beta.1

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

@@ -16,12 +16,42 @@ sidebar_position: 4
 
 ## Test 测试
 
-当我们想要对一些模块进行测试的时候，可以启用 test 测试功能。启动该功能后，**会在项目目录下创建 `tests` 目录以及相关文件，在 package.json 中新增 `"@modern-js/plugin-testing"` 依赖**。
+当我们想要对一些模块进行测试的时候，可以启用测试功能。启动该功能后，**会在项目目录下创建 `tests` 目录以及相关文件，在 package.json 中新增 `"@modern-js/plugin-testing"` 依赖**。
+
+:::tip
+在成功开启后，会提示需要手动在配置中增加如下类似的代码。
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import testPlugin from '@modern-js/plugin-testing';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    testPlugin(),
+  ],
+});
+```
+:::
 
 ## Storybook 调试
 
 当我们想要对组件或者普通模块进行调试的时候，可以启用 Storybook 调试功能。启动该功能后，**会在项目目录下创建 `stories` 目录以及相关文件，在 package.json 中新增 `"@modern-js/plugin-storybook"` 依赖**。
 
+:::tip
+在成功开启后，会提示需要手动在配置中增加如下类似的代码。
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import storybookPlugin from '@modern-js/plugin-storybook';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    storybookPlugin(),
+  ],
+});
+```
+:::
+
 关于如何启动 Storybook 以及如何使用 Storybook，可以查看下面的链接：
 
 - [`modern dev`](/guide/basic/command-preview#modern-dev)
@@ -35,8 +65,38 @@ sidebar_position: 4
 
 - [使用 Tailwind CSS](https://modernjs.dev/docs/apis/module/config/tools/tailwindcss)
 
+:::tip
+在成功开启后，会提示需要手动在配置中增加如下类似的代码。
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import tailwindPlugin from '@modern-js/plugin-tailwindcss';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    tailwindPlugin(),
+  ],
+});
+```
+:::
+
 ## 启动 Modern.js Runtime API
 
 **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 运行环境。
+
+:::tip
+在成功开启后，会提示需要手动在配置中增加如下类似的代码。
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import runtime from '@modern-js/runtime/cli';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    runtime(),
+  ],
+});
+```
+:::

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

@@ -19,16 +19,16 @@ sidebar_position: 5
 
 因此它是一个复杂且功能强大的工具。
 
-模块工程解决方案集成了 Storybook ,因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下：
+模块工程解决方案集成了 Storybook，因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下。
 
 ## 调试代码
 
-在调试代码过程中需要引入组件代码，目前可以通过两种方式引入组件代码：
+在调试代码过程中需要引入项目代码，目前可以通过两种方式引入项目代码：
 
-- 引用组件产物
-- 引用组件源码
+- 引用项目产物
+- 引用项目源码
 
-我们更推荐使用第一种“**引用组件产物**”的方式。因为它几乎接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。
+我们更推荐使用第一种“**引用项目产物**”的方式。因为它更接近真实的使用场景，不仅可以对组件功能进行调试，同时也对构建产物的正确性进行了验证。
 
 接下来我们分别讲一下这两种方式具体如何使用。
 
@@ -49,7 +49,7 @@ sidebar_position: 5
 ---
 
 确保 `package.json` 的 `main` 和 `types`
-的值为真实的路径。
+的值为正确的产物路径。
 
 ```json package.json
 {
@@ -70,7 +70,7 @@ export const content = 'hello world';
 ---
 
 确保在 `stories/tsconfig.json` 中设置了指向项目根目录的 `paths` 配置。
-`paths` 的 `key` 与项目名称相同。
+`paths` 的 `key` 与项目名称相同，这样在编译过程中以及在代码中不会出现问题。
 
 ```json stories/tsconfig.json focus=5:7
 {
@@ -78,7 +78,8 @@ export const content = 'hello world';
   "compilerOptions": {
     "baseUrl": "../",
     "paths": {
-      "foo": ["."]
+      "foo": ["."],
+      "foo/*": ["./*"]
     }
   },
   "include": [
@@ -105,7 +106,8 @@ export default {
 
 </CH.Spotlight>
 
-如果在开发过程中，遇到无法实时获得类型定义的情况，此时：
+:::info
+在开发过程中，可能会遇到无法实时获得类型定义的情况。因为只有当保存代码后，产物目录下的类型文件才会更新。此时：
 
 对于 `pnpm` 的项目，可以按照下面的内容对 `package.json` 进行修改：
 
@@ -123,11 +125,12 @@ export default {
 > 关于 pnpm 的 `publishConfig` 的使用，可以阅读下面这个[链接](https://pnpm.io/package_json#publishconfig)。
 
 而对于 npm 和 Yarn 的项目，则只能通过手动的方式在**开发阶段**和**发布阶段**对 `package.json` 的 `types` 的值进行修改。
+:::
 
 那么为什么可以直接引用产物呢？
 
 1. 在执行 `modern dev storybook` 命令之前，会自动执行 `modern build` 命令，保证项目构建产物的存在。
-2. 在 Storybook 内部增加了以项目名称作为别名的处理，保证能够**根据 `package.json` 解析出项目的产物路径**。
+2. 在 Storybook 内部增加了针对 `tsconfig.json` 文件或者以项目名称作为别名的处理，保证能够**根据 `package.json` 解析出项目的产物路径**。
 
 ### 引用组件源码
 

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

@@ -6,22 +6,30 @@ sidebar_position: 3
 
 ## 三分钟快速上手
 
-想要实际体验 Module Tools？首先需要安装 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.18.0**。
+想要实际体验 Module Tools？首先需要安装 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.18.0**。我们推荐使用 Node.js 16 的 LTS 版本。
 
 然后在你的项目里安装以下依赖：
 
-- `@modern-js/module-tools`
-- `@modern-js/plugin-testing`
-
-> 如果是一个 TypeScript 项目，则需要增加 `"typescript"` 依赖。
+- `"@modern-js/module-tools"`
+- `"typescript"`（如果不是 TypeScript 项目，则省略）
 
 ```bash
-npm install -D @modern-js/module-tools @modern-js/plugin-testing
+npm install -D @modern-js/module-tools typescript
 ```
 
 > 对于使用 pnpm 或者 Yarn 包管理器的项目，只需要替换 npm 就可以了。**推荐使用 pnpm**。
 
-接着在项目的 `package.json` 文件里增加命令 `"build": "modern build"`：
+接着在项目的根目录下创建 `modern.config.(t|j)s` 文件：
+
+``` ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+
+export default defineConfig({
+    plugins: [moduleTools()],
+})
+```
+
+最后在项目的 `package.json` 文件里增加命令 `"build": "modern build"`：
 
 ```json
 {
@@ -33,11 +41,11 @@ npm install -D @modern-js/module-tools @modern-js/plugin-testing
 
 如果你的项目存在 `src/index.(js|jsx)` 文件或者同时存在 `src/index.(ts|tsx)` 和 `tsconfig.json` 文件，那么恭喜你可以运行直接运行 `npm run build` 来使用 Module Tools 构建你的项目了。
 
-**如果你想要看看使用了模块工程方案的真实项目，可以执行以下命令**：
+**如果你想要看看使用了模块工程方案的完整项目，可以执行以下命令**：
 
 ```bash
 git clone https://github.com/modern-js-dev/module-tools-examples
-cd module-tools-example
+cd module-tools-example/base
 
 ## 执行构建：
 pnpm build
@@ -52,8 +60,6 @@ pnpm dev storybook
 pnpm test
 ```
 
-> 上面的链接对应的内容待补充
-
 **如果你想要创建一个完整的模块工程项目，可以执行以下命令：**
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modern-js/module-tools-docs",
-  "version": "2.2.0",
+  "version": "2.2.1-beta.1",
   "description": "docs",
   "main": "index.js",
   "keywords": [],
@@ -11,8 +11,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "shiki": "^0.11.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.2.0",
-    "@modern-js/doc-tools": "2.2.0"
+    "@modern-js/doc-tools": "2.2.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.2.0"
   },
   "scripts": {
     "dev": "modern dev",