docs(module-tools): add tip how to use hook to register module plugin (…

…#4761)
web-infra-dev · Oct 10, 2023 · 2e6bcac · 2e6bcac
1 parent 5c89910
commit 2e6bcac
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 0 deletions.
diff --git a/packages/document/module-doc/docs/en/plugins/official-list/plugin-babel.mdx b/packages/document/module-doc/docs/en/plugins/official-list/plugin-babel.mdx
@@ -25,6 +25,31 @@ export default defineConfig({
 });
 ```
 
+You can also configure the registration via hooks, for example,
+if you need to bundle two files A and B at the same time and only need to use babel when bundle A:
+
+```ts
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { getBabelHook } from '@modern-js/plugin-module-babel';
+
+const babelHook = getBabelHook({
+  // babel options
+});
+
+export default defineConfig({
+  plugins: [moduleTools()],
+  buildConfig: [
+    {
+      hooks: [babelHook],
+      input: ['src/a.ts'],
+    },
+    {
+      input: ['src/b.ts'],
+    },
+  ],
+});
+```
+
 ## Config
 
 See [babel options](https://babeljs.io/docs/options).

diff --git a/packages/document/module-doc/docs/en/plugins/official-list/plugin-polyfill.mdx b/packages/document/module-doc/docs/en/plugins/official-list/plugin-polyfill.mdx
@@ -28,6 +28,29 @@ export default defineConfig({
 });
 ```
 
+You can also configure registration via hooks, for example,
+if you have multiple build configurations at the same time and only need to inject the polyfill when bundle:
+
+```ts
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { getPolyfillHook } from '@modern-js/plugin-module-polyfill';
+
+const polyfillHook = getPolyfillHook();
+
+export default defineConfig({
+  plugins: [moduleTools()],
+  buildConfig: [
+    {
+      buildType: 'bundle',
+      hooks: [polyfillHook],
+    },
+    {
+      buildType: 'bundleless',
+    },
+  ],
+});
+```
+
 ## Config
 
 - **Type**

diff --git a/packages/document/module-doc/docs/zh/plugins/official-list/plugin-babel.mdx b/packages/document/module-doc/docs/zh/plugins/official-list/plugin-babel.mdx
@@ -25,6 +25,30 @@ export default defineConfig({
 });
 ```
 
+你也可以通过 hooks 配置注册，例如你同时需要打包 A，B 两个文件，并只需要在打包 A 时使用 babel：
+
+```ts
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { getBabelHook } from '@modern-js/plugin-module-babel';
+
+const babelHook = getBabelHook({
+  // babel options
+});
+
+export default defineConfig({
+  plugins: [moduleTools()],
+  buildConfig: [
+    {
+      hooks: [babelHook],
+      input: ['src/a.ts'],
+    },
+    {
+      input: ['src/b.ts'],
+    },
+  ],
+});
+```
+
 ## 配置
 
 See [Babel options](https://babeljs.io/docs/options)

diff --git a/packages/document/module-doc/docs/zh/plugins/official-list/plugin-polyfill.mdx b/packages/document/module-doc/docs/zh/plugins/official-list/plugin-polyfill.mdx
@@ -28,6 +28,28 @@ export default defineConfig({
 });
 ```
 
+你也可以通过 hooks 配置注册，例如你同时具有多份构建配置，并只需要在 bundle 构建时注入 polyfill：
+
+```ts
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { getPolyfillHook } from '@modern-js/plugin-module-polyfill';
+
+const polyfillHook = getPolyfillHook();
+
+export default defineConfig({
+  plugins: [moduleTools()],
+  buildConfig: [
+    {
+      buildType: 'bundle',
+      hooks: [polyfillHook],
+    },
+    {
+      buildType: 'bundleless',
+    },
+  ],
+});
+```
+
 ## 配置
 
 - **类型：**