@modern-js/module-tools-docs 2.29.0 → 2.31.0

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.18.0**。我们推荐使用 Node.js 16 的 LTS 版本。
+想要实际体验 Module Tools？首先需要安装 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.18.0**。我们推荐使用 Node.js 18 的 LTS 版本。
 
 ### 创建新项目
 
@@ -70,6 +70,25 @@ export default defineConfig({
 
 如果你的项目存在 `src/index.(js|jsx)` 文件或者同时存在 `src/index.(ts|tsx)` 和 `tsconfig.json` 文件，那么恭喜你可以运行直接运行 `npm run build` 来使用 Module Tools 构建你的项目了。
 
+### 核心 npm 包
+
+`@modern-js/module-tools` 是 Module Tools 的核心 npm 包，主要提供以下能力：
+
+- 提供 `modern dev`, `modern build` 等常用的 CLI 命令。
+- 集成 Modern.js Core，提供配置解析、插件加载等能力。
+- 集成 esbuild 和 SWC，提供构建能力。
+- 集成一些最为常用的插件，比如 `plugin-lint`、`plugin-changeset` 等。
+
+`@modern-js/module-tools` 是基于 Modern.js 的插件体系实现的，本质上是一个插件，因此你需要在配置文件的 `plugins` 字段中注册 `moduleTools`：
+
+```ts title="modern.config.ts"
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+
+export default defineConfig({
+  plugins: [moduleTools()],
+});
+```
+
 ### 查看官方示例
 
 **如果你想要看看使用了模块工程方案的完整项目，可以执行以下命令**：

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

@@ -8,9 +8,9 @@ sidebar_position: 1
 
 我们可以通过下面的例子来快速了解如何编写一个 Module Tools 插件：
 
-<CH.Spotlight>
+1. 首先我们在初始化的项目下创建 `./plugins/example.ts` 文件。
 
-```md ./project
+```md title="./project"
 ./
 ├── plugins
 │ └── example.ts
@@ -18,17 +18,7 @@ sidebar_position: 1
 └── modern.config.ts
 ```
 
----
-
-首先我们在初始化的项目下创建 `./plugins/example.ts` 文件。
-
-```md ./project
-
-```
-
----
-
-接着在 `example.ts` 文件中增加插件的代码。
+2. 接着在 `example.ts` 文件中增加插件的代码。
 
 ```ts
 import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';
@@ -42,36 +32,30 @@ export const ExamplePlugin = (): CliPlugin<ModuleTools> => {
         // use hooks
         afterBuild() {
           console.info('build over');
-        }
+        },
       };
     },
   };
 };
 ```
 
----
-
-然后我们通过 [`plugins`](/api/config/plugins) API，将刚刚写好的插件进行注册。
+3. 然后我们通过 [`plugins`](/api/config/plugins) API，将刚刚写好的插件进行注册。
 
-```ts ./modern.config.ts
+```ts title="modern.config.ts"
 import { examplePlugin } from './plugins/example';
 export default defineConfig({
   plugins: [examplePlugin()],
 });
 ```
 
----
-
-最后运行 `modern build`，就可以看到。
+4. 最后运行 `modern build`，就可以看到：
 
-```bash terminal
+```bash title="terminal"
 this is example plugin
 Build succeed: 510.684ms
 build over
 ```
 
-</CH.Spotlight>
-
 通过上面这个例子，我们了解到了下面几件事：
 
 - 推荐的插件目录结构

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

@@ -11,9 +11,7 @@ Module-tools 插件是一个对象，对象包含以下属性：
 
 例如在下面的插件代码示例中，在项目开始执行构建任务之前会触发 `beforeBuild` 函数的执行，并打印 `build start` 的 log 内容。
 
-<CH.Code>
-
-```ts ./plugins/demo.tsx
+```ts title="./plugins/demo.tsx"
 import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';
 
 const myPlugin: CliPlugin<ModuleTools> = {
@@ -30,17 +28,13 @@ const myPlugin: CliPlugin<ModuleTools> = {
 };
 ```
 
----
-
-```ts ./modern.config.ts
+```ts title="modern.config.ts"
 import { myPlugin } from './plugins/demo';
 export default {
   plugins: [myPlugin()],
 };
 ```
 
-</CH.Code>
-
 ## 插件类型定义
 
 使用 TypeScript 时，可以引入内置的 `CliPlugin` 和 `ModuleTools` 类型，为插件提供正确的类型推导：

package/docs/zh/plugins/official-list/plugin-import.mdx

@@ -93,81 +93,36 @@ export default defineConfig({
 
 简单的函数逻辑其实可以通过模版语言来代替，因此 `customName`，`customStyleName` 等这些配置除了可以传入函数，也可以传入字符串作为模版来代替函数，提高性能。
 
-<CH.Spotlight>
+我们以这段代码作为示例：
 
 ```ts
 import { MyButton as Btn } from 'foo';
 ```
 
----
-
-我们以这段代码进行说明。
+添加以下配置：
 
 ```ts
-import { MyButton as Btn } from 'foo';
-```
-
----
-
-添加右侧的配置：
-
-```ts
-import { modulePluginImport } from '@modern-js/plugin-module-import';
-import { moduleTools, defineConfig } from '@modern-js/module-tools';
-
-export default defineConfig({
-  plugins: [
-    moduleTools(),
-    modulePluginImport({
-      pluginImport: [
-        {
-          libraryName: 'foo',
-          customName: 'foo/es/{{ member }}',
-        },
-      ],
-    }),
-  ],
-});
-```
-
----
-
-其中的 `{{ member }}` 会被替换为相应的引入成员
-
-```ts focus=8:8
-import { modulePluginImport } from '@modern-js/plugin-module-import';
-import { moduleTools, defineConfig } from '@modern-js/module-tools';
-
-export default defineConfig({
-  plugins: [
-    moduleTools(),
-    modulePluginImport({
-      pluginImport: [
-        {
-          libraryName: 'foo',
-          customName: 'foo/es/{{ member }}',
-        },
-      ],
-    }),
+modulePluginImport({
+  pluginImport: [
+    {
+      libraryName: 'foo',
+      customName: 'foo/es/{{ member }}',
+    },
   ],
 });
 ```
 
----
-
-转换后:
+其中的 `{{ member }}` 会被替换为相应的引入成员，转换后:
 
 ```ts
 import Btn from 'foo/es/MyButton';
 ```
 
-</CH.Spotlight>
-
 可以看出配置 `customName: "foo/es/{{ member }}"` 的效果等同于配置 `` customName: (member) => `foo/es/${member}`  `` ，但是不会有 Node-API 的调用开销。
 
 这里使用到的模版是 [handlebars](https://handlebarsjs.com)，模版配置中还内置了一些有用的辅助工具，还是以上面的导入语句为例，配置成：
 
-```ts focus=8:8
+```ts
 import { modulePluginImport } from '@modern-js/plugin-module-import';
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 

package/docs/zh/plugins/official-list/plugin-node-polyfill.md

@@ -52,7 +52,7 @@ type NodePolyfillOptions = {
 
 排除要注入的 Node Polyfill。
 
-``` ts focus=7:9
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
 
@@ -70,7 +70,7 @@ export default defineConfig({
 
 覆盖内置的 Node Polyfill。
 
-``` ts focus=7:9
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
 

package/modern.config.ts

@@ -1,9 +1,7 @@
 import path from 'path';
 import { docTools, defineConfig, NavItem } from '@modern-js/doc-tools';
-import { remarkCodeHike } from '@code-hike/mdx';
 import { pluginAutoSidebar } from '@modern-js/doc-plugin-auto-sidebar';
 
-const theme = require('shiki/themes/nord.json');
 const { version } = require('./package.json');
 
 function getI18nHelper(lang: 'zh' | 'en') {
@@ -71,16 +69,7 @@ export default defineConfig({
     ],
     markdown: {
       checkDeadLinks: true,
-      remarkPlugins: [
-        [
-          remarkCodeHike,
-          {
-            theme,
-            autoImport: true,
-            showCopyButton: true,
-          },
-        ],
-      ],
+      experimentalMdxRs: true,
     },
     themeConfig: {
       footer: {

package/package.json

@@ -9,15 +9,13 @@
     "directory": "packages/document/module-doc"
   },
   "license": "MIT",
-  "version": "2.29.0",
+  "version": "2.31.0",
   "main": "index.js",
   "dependencies": {
-    "@code-hike/mdx": "^0.7.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "shiki": "^0.11.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.29.0",
-    "@modern-js/doc-tools": "2.29.0"
+    "@modern-js/doc-tools": "2.31.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.31.0"
   },
   "scripts": {
     "dev": "modern dev",

package/theme/index.ts

@@ -1,4 +1,2 @@
-import './index.css';
-
 export * from '@modern-js/doc-tools/theme';
 export { default } from '@modern-js/doc-tools/theme';

package/theme/index.css

@@ -1,9 +0,0 @@
-@import '@code-hike/mdx/dist/index.css';
-
-.ch-scrollycoding .header-anchor {
-  display: none;
-}
-
-.ch-spotlight .header-anchor {
-  display: none;
-}