@modern-js/module-tools-docs 2.21.1 → 2.22.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @modern-js/module-tools-docs
 
+## 2.22.0
+
+### Minor Changes
+
+- c890980: feat: add swc transform content and fix build logic when disable swc-transform
+  feat: 添加 swc transform 相关文档内容,并且修复禁用 swc-transform 时候的构建逻辑
+
+### Patch Changes
+
+- 3c3d1e2: docs: update project creation and new command text.
+
+  docs: 更新生成器创建项目和 new 命令文案。
+
+- Updated dependencies [b8553a3]
+  - @modern-js/doc-tools@2.22.0
+  - @modern-js/doc-plugin-auto-sidebar@2.22.0
+
 ## 2.21.1
 
 ### Patch Changes

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

@@ -322,7 +322,7 @@ We have done many extensions based on the original esbuild build. Therefore, whe
 
 :::
 
-<!-- ## externalHelpers
+## externalHelpers
 
 By default, the output JS code may depend on helper functions to support the target environment or output format, and these helper functions will be inlined in the file that requires it.
 
@@ -364,7 +364,7 @@ import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 export var yourCode = function() {
   // use _async_to_generator
 }
-``` -->
+```
 
 ## externals
 
@@ -521,12 +521,12 @@ Whether to generate sourceMap or not
 - Type: `boolean | 'inline' | 'external'`
 - Default: `false`
 
-<!-- ## sourceType
+## sourceType
 
 Sets the format of the source code. By default, the source code will be treated as EsModule. When the source code is using CommonJS, you need to set `commonjs`.
 
 - **Type**: `commonjs` | `module`
-- **Default**: `module` -->
+- **Default**: `module`
 
 ## splitting
 

package/docs/en/api/config/build-preset.mdx

@@ -21,7 +21,7 @@ export default defineConfig({
 });
 ```
 
-### ``npm-library'`
+### `'npm-library'`
 
 Library generic schema used under class [NPM](https://www.npmjs.com/) package manager, contains `esm` and `cjs` Bundle products, and includes a type file.
 
@@ -68,7 +68,7 @@ export const buildConfig = [
 ];
 ```
 
-### `npm-library-with-umd'`
+### `'npm-library-with-umd'`
 
 Used under class [NPM](https://www.npmjs.com/) package manager, and Library supports a similar pattern to [unpkg](https://unpkg.com/). Additional `umd` products are provided on top of the pre-defined `npm-library`.
 

package/docs/en/api/index.md

@@ -1,5 +1,6 @@
 ---
 overview: true
 sidebar_label: Overview
+sidebar_position: 1
 ---
 # Overview

package/docs/en/guide/best-practices/components.mdx

@@ -9,10 +9,10 @@ This chapter will describe how to develop component projects using the module en
 ```bash Interactive questions
 npx @modern-js/create@latest components-project
 
-? Please select the solution you want to create: Npm Module
-? Package Name: components-demo
-? Development Language: TS
-? Package Manager: pnpm
+? Please select the type of project you want to create: Npm Module
+? Please fill in the project name: components-demo
+? Please select the programming language: TS
+? Please select the package manager: pnpm
 ```
 
 ---
@@ -22,10 +22,10 @@ It is recommended to use the `@modern-js/create` command to initialize an npm pr
 ```bash Interactive questions
 npx @modern-js/create@latest components-project
 
-? Please select the solution you want to create: Npm Module
-? Package Name: components-demo
-? Development Language: TS
-? Package Manager: pnpm
+? Please select the type of project you want to create: Npm Module
+? Please fill in the project name: components-demo
+? Please select the programming language: TS
+? Please select the package manager: pnpm
 ```
 
 ---
@@ -67,8 +67,8 @@ export default () => {
 ```bash Terminal
 pnpm run new
 
-? Action Enable features
-? Enable features Enable Visual Testing (Storybook)
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Visual Testing (Storybook)
 ```
 
 ---
@@ -78,8 +78,8 @@ Execute the `new` command in the project root directory to enable the Storybook
 ```bash Terminal
 pnpm run new
 
-? Action Enable features
-? Enable features Enable Visual Testing (Storybook)
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Visual Testing (Storybook)
 ```
 
 ---
@@ -356,8 +356,8 @@ By default, this feature is not enabled in the module project, you need to enabl
 ```bash Terminal
 pnpm run new
 
-? Action Enable features
-? Enable features Enable Visual Testing (Storybook)
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Visual Testing (Storybook)
 ```
 
 ---
@@ -367,8 +367,8 @@ The Tailwind CSS feature can be enabled by executing the `new` command in the pr
 ```bash Terminal
 pnpm run new
 
-? Action Enable features
-? Enable features Enable Tailwind CSS
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Tailwind CSS
 ```
 
 ---

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

@@ -26,7 +26,7 @@ Next, in the issue interaction, follow the options below.
 ```bash
 ? Please select the type of project you want to create: Npm Module
 ? Please fill in the project name: library
-? Please select the development language: TS
+? Please select the programming language: TS
 ? Please select the package manager: pnpm
 ```
 

package/docs/en/plugins/official-list/overview.md

@@ -5,3 +5,5 @@
 * [@modern-js/plugin-module-import](./plugin-import.md)：Use SWC to provide the same ability as [`babel-plugin-import`](https://github.com/umijs/babel-plugin-import).
 * [@modern-js/plugin-module-banner](./plugin-banner.md)：Add custom content, such as copyright information, to the top and bottom of each JS and CSS file.
 * [@modern-js/plugin-module-node-polyfill](./plugin-node-polyfill.mdx)： Inject Polyfills of Node core modules in the browser side.
+* [@modern-js/plugin-module-polyfill](./plugin-polyfill.md)：Inject polyfill for unsupported features used in your code.
+* [@modern-js/plugin-module-babel](./plugin-babel.md)：Use babel to transform your code.

package/docs/en/plugins/official-list/plugin-babel.md

@@ -0,0 +1,56 @@
+# Babel Plugin
+
+:::tip
+Normally, we don't need to use Babel to transform our code, this plugin is only used as a downgrade.
+:::
+
+## Quick start
+
+### Install
+
+```bash
+# npm
+npm install @modern-js/plugin-module-babel -D
+
+# yarn
+yarn add @modern-js/plugin-module-babel -D
+
+# pnpm
+pnpm add @modern-js/plugin-module-babel -D
+```
+
+### Register
+
+You can install the plugin with the following command:
+
+```ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginBabel } from '@modern-js/plugin-module-babel';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginBabel(),
+  ],
+});
+```
+
+## Config
+
+See [babel options](https://babeljs.io/docs/options).
+
+Here is an example with `@babel/preset-env` configured
+
+```ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginBabel } from '@modern-js/plugin-module-babel';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginBabel({
+      presets: [['@babel/preset-env']],
+    }),
+  ],
+});
+```

package/docs/en/plugins/official-list/plugin-banner.md

@@ -17,19 +17,18 @@ yarn add @modern-js/plugin-module-banner -D
 pnpm add @modern-js/plugin-module-banner -D
 ```
 
-
 ### Register
 
 You can install the plugin with the following command:
 
 ```ts
-import moduleTools, defineConfig from '@modern-js/module-tools';
-import pluginBanner from '@modern-js/plugin-module-banner';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginBanner } from '@modern-js/plugin-module-banner';
 
 export default defineConfig({
   plugins: [
     moduleTools(),
-    pluginBanner({
+    modulePluginBanner({
       banner: {
         js: '//comment',
         css: '/*comment*/',
@@ -48,7 +47,9 @@ Note: CSS comments do not support the `//comment` syntax. Refer to [【CSS Comme
 ### Add copyright information at the top of a JS file
 
 ```ts
-import pluginBanner from '@modern-js/plugin-module-banner';
+import { modulePluginBanner } from '@modern-js/plugin-module-banner';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+
 
 const copyRight = `/*
  © Copyright 2020 xxx.com or one of its affiliates.
@@ -62,7 +63,8 @@ const copyRight = `/*
 
 export default defineConfig({
   plugins: [
-    pluginBanner({
+    moduleTools(),
+    modulePluginBanner({
       banner: {
         js: copyRight,
       },
@@ -73,7 +75,7 @@ export default defineConfig({
 
 ## Configuration
 
-* **Type:**
+* **Type**
 
 ```ts
 type BannerOptions = {

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

@@ -2,11 +2,9 @@
 
 Using [SWC](https://swc.rs/) provides the same ability and configuration as [`babel-plugin-import`](https://github.com/umijs/babel-plugin-import).
 
-{/*
 :::tip
-[As of @modern-js/module-tools version 2.16.0, this plugin functionality is built into module-tools and is provided by [`transformImport`](api/config/build-config.html#transformimport).]: #
+Since @modern-js/module-tools version >= 2.16.0, this plugin functionality is built into module-tools and is provided by [`transformImport`](api/config/build-config.html#transformimport).
 :::
-*/}
 
 ## Quick Start
 
@@ -28,13 +26,13 @@ pnpm add @modern-js/plugin-module-import -D
 In Module Tools, you can register plugins in the following way:
 
 ```ts
-import moduleTools, defineConfig from '@modern-js/module-tools';
-import moduleImport from '@modern-js/plugin-module-import';
+import moduleTools, { defineConfig  } from '@modern-js/module-tools';
+import { modulePluginImport } from '@modern-js/plugin-module-import';
 
 export default defineConfig({
   plugins: [
     moduleTools(),
-    moduleImport({
+    modulePluginImport({
       pluginImport: [{
         libraryName: 'antd',
         style: true,
@@ -65,11 +63,13 @@ The elements of the array are configuration objects for `babel-plugin-import`, w
 **Example:**
 
 ```ts
-import moduleImport from '@modern-js/plugin-module-import';
+import { modulePluginImport } from '@modern-js/plugin-module-import';
+import moduleTools, { defineConfig  } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
-    moduleImport({
+    moduleTools(),
+    modulePluginImport({
       pluginImport: [
         // babel-plugin-import`s options config
         {
@@ -108,13 +108,14 @@ import { MyButton as Btn } from 'foo';
 
 Add the following configuration on the right-hand side:
 
-
 ```ts
-import moduleImport from '@modern-js/plugin-module-import';
+import { modulePluginImport } from '@modern-js/plugin-module-import';
+import moduleTools, { defineConfig  } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
-    moduleImport({
+    moduleTools(),
+    modulePluginImport({
       pluginImport: [{
         libraryName: 'foo',
         customName: 'foo/es/{{ member }}'
@@ -129,11 +130,11 @@ export default defineConfig({
 The `{{ member }}` in it will be replaced with the corresponding import member.
 
 ```ts focus=8:8
-import moduleImport from '@modern-js/plugin-module-import';
+import { modulePluginImport } from '@modern-js/plugin-module-import';
 
 export default defineConfig({
   plugins: [
-    moduleImport({
+    modulePluginImport({
       pluginImport: [{
         libraryName: 'foo',
         customName: 'foo/es/{{ member }}'
@@ -143,7 +144,6 @@ export default defineConfig({
 });
 ```
 
-
 ---
 After transformation:
 
@@ -153,18 +153,18 @@ import Btn from 'foo/es/MyButton';
 
 </CH.Spotlight>
 
-
 Template `customName: 'foo/es/{{ member }}'` is the same as `` customName: (member) => `foo/es/${member}` ``, but template value has no performance overhead of Node-API.
 
 The template used here is [handlebars](https://handlebarsjs.com). There are some useful builtin tools, Take the above import statement as an example:
 
-
 ```ts focus=8:8
-import moduleImport from '@modern-js/plugin-module-import';
+import { modulePluginImport } from '@modern-js/plugin-module-import';
+import moduleTools, { defineConfig  } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
-    moduleImport({
+    moduleTools(),
+    modulePluginImport({
       pluginImport: [{
         libraryName: 'foo',
         customName: 'foo/es/{{ kebabCase member }}',

package/docs/en/plugins/official-list/{plugin-node-polyfill.mdx → plugin-node-polyfill.md}

@@ -86,14 +86,13 @@ export default defineConfig({
 });
 ```
 
-
 ## Node Polyfills
 
 ### Globals
 
-- `Buffer`
-- `process`
-- `console`
+* `Buffer`
+* `process`
+* `console`
 
 When the above global variables are used directly in code, the corresponding polyfill will be injected.
 
@@ -103,34 +102,34 @@ const bufferData = Buffer.from('xxxx');
 
 ### Modules
 
-- `assert`
-- `buffer`
-- `console`
-- `constants`
-- `crypto`
-- `domain`
-- `events`
-- `http`
-- `https`
-- `os`
-- `path`
-- `punycode`
-- `process`
-- `querystring`
-- `stream`
-- `_stream_duplex`
-- `_stream_passthrough`
-- `_stream_readable`
-- `_stream_transform`
-- `_stream_writable`
-- `string_decoder`
-- `sys`
-- `timers`
-- `tty`
-- `url`
-- `util`
-- `vm`
-- `zlib`
+* `assert`
+* `buffer`
+* `console`
+* `constants`
+* `crypto`
+* `domain`
+* `events`
+* `http`
+* `https`
+* `os`
+* `path`
+* `punycode`
+* `process`
+* `querystring`
+* `stream`
+* `_stream_duplex`
+* `_stream_passthrough`
+* `_stream_readable`
+* `_stream_transform`
+* `_stream_writable`
+* `string_decoder`
+* `sys`
+* `timers`
+* `tty`
+* `url`
+* `util`
+* `vm`
+* `zlib`
 
 When the above module is referenced in code via import / require syntax, the corresponding polyfill will be injected.
 
@@ -142,16 +141,16 @@ const bufferData = Buffer.from('xxxx');
 
 ### Fallbacks
 
-- `child_process`
-- `cluster`
-- `dgram`
-- `dns`
-- `fs`
-- `module`
-- `net`
-- `readline`
-- `repl`
-- `tls`
+* `child_process`
+* `cluster`
+* `dgram`
+* `dns`
+* `fs`
+* `module`
+* `net`
+* `readline`
+* `repl`
+* `tls`
 
 Currently there is no polyfill for the above modules on the browser side, so when you import the above modules, it will automatically fallback to an empty object.
 

package/docs/en/plugins/official-list/plugin-polyfill.md

@@ -0,0 +1,69 @@
+# Polyfill Plugin
+
+:::tip
+Normally, we don't need to inject polyfill for npm packages, this step should be done on the web application framework side, but in some scenarios we need to inject polyfill in order to make our library run directly in low version browsers.
+
+Note that this plugin does not transform your code syntax, it only injects polyfill for unsupported functions used in your code, importing them as normal functions instead of polluting the global. You need to install the `core-js-pure` dependency.
+
+:::
+
+## Quick start
+
+### Install
+
+```bash
+# npm
+npm install @modern-js/plugin-module-polyfill -D
+
+# yarn
+yarn add @modern-js/plugin-module-polyfill -D
+
+# pnpm
+pnpm add @modern-js/plugin-module-polyfill -D
+```
+
+### Register
+
+In Module Tools, you can register plugins in the following way:
+
+```ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginPolyfill } from '@modern-js/plugin-module-polyfill';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginPolyfill(),
+  ],
+});
+```
+
+## Config
+
+* **Type**
+
+```ts
+type options = {
+  targets?: Record<string, string> | string;
+}
+```
+
+### targets
+
+See [babel target](https://babeljs.io/docs/options#targets).
+
+This is a example.
+
+```ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginPolyfill } from '@modern-js/plugin-module-polyfill';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginPolyfill({
+      targets: "> 0.25%, not dead"
+    }),
+  ],
+});
+```

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

@@ -363,7 +363,7 @@ export default defineConfig({
 
 :::
 
-<!-- ## externalHelpers
+## externalHelpers
 
 默认情况下，输出的 JS 代码可能会依赖一些辅助函数来支持目标环境或者输出格式，这些辅助函数会被内联在需要它的文件中。
 
@@ -406,7 +406,7 @@ import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 export var yourCode = function() {
   // use _async_to_generator
 }
-``` -->
+```
 
 
 ## externals
@@ -569,12 +569,12 @@ export default defineConfig({
 - 类型： `boolean | 'inline' | 'external'`
 - 默认值： `false`
 
-<!-- ## sourceType
+## sourceType
 
 设置源码的格式。默认情况下，会将源码作为 EsModule 进行处理。当源码使用的是 CommonJS 的时候，需要设置 `commonjs`。
 
 - 类型：`commonjs` | `module`
-- 默认值：`module` -->
+- 默认值：`module`
 
 ## splitting
 
@@ -861,7 +861,7 @@ const tailwind = {
 - 类型： `'es5' | 'es6' | 'es2015' | 'es2016' | 'es2017' | 'es2018' | 'es2019' | 'es2020' | 'es2021' | 'es2022' | 'esnext'`
 - 默认值： `'es6'`
 
-<!-- ## transformImport
+## transformImport
 
 提供与 babel-plugin-import 等价的能力和配置，基于 SWC 实现。
 
@@ -893,7 +893,7 @@ export default defineConfig({
 
 ### 注意事项
 
-参考[【Import 插件——注意事项】](plugins/official-list/plugin-import.html#注意事项) -->
+参考[【Import 插件——注意事项】](plugins/official-list/plugin-import.html#注意事项)
 
 
 ## umdGlobals

package/docs/zh/api/index.md

@@ -4,4 +4,4 @@ sidebar_label: 概览
 sidebar_position: 1
 ---
 
-# index
+# 概览

package/docs/zh/guide/best-practices/components.mdx

@@ -72,7 +72,7 @@ export default () => {
 pnpm run new
 
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「Storybook」
+? 请选择功能名称 启用「Storybook」
 ```
 
 ---
@@ -83,7 +83,7 @@ pnpm run new
 pnpm run new
 
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「Storybook」
+? 请选择功能名称 启用「Storybook」
 ```
 
 ---
@@ -361,7 +361,7 @@ body {
 pnpm run new
 
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「Storybook」
+? 请选择功能名称 启用「Storybook」
 ```
 
 ---
@@ -372,7 +372,7 @@ pnpm run new
 pnpm run new
 
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用 Tailwind CSS 支持
+? 请选择功能名称 启用 「Tailwind CSS」 支持
 ```
 
 ---

package/docs/zh/plugins/official-list/overview.md

@@ -5,3 +5,5 @@
 * [@modern-js/plugin-module-import](./plugin-import.md)：使用 SWC 提供与 `babel-plugin-import` 一样的能力。
 * [@modern-js/plugin-module-banner](./plugin-banner.md)：为每个 JS 和 CSS 文件的顶部和底部添加自定义内容，例如版权信息。
 * [@modern-js/plugin-module-node-polyfill](./plugin-node-polyfill.mdx)：会自动注入 Node 核心模块在浏览器端的 polyfills。
+* [@modern-js/plugin-module-polyfill](./plugin-polyfill.md)：为你的代码中使用到的不支持的功能注入 polyfill。
+* [@modern-js/plugin-module-babel](./plugin-babel.md)：使用 babel 转换你的代码。

package/docs/zh/plugins/official-list/plugin-babel.md

@@ -0,0 +1,56 @@
+# Babel 插件
+
+:::tip
+通常情况下，我们无需使用 Babel 转换我们的代码，此插件仅作为一种降级方式。
+:::
+
+## 快速开始
+
+### 安装
+
+```bash
+# npm
+npm install @modern-js/plugin-module-babel -D
+
+# yarn
+yarn add @modern-js/plugin-module-babel -D
+
+# pnpm
+pnpm add @modern-js/plugin-module-babel -D
+```
+
+### 注册插件
+
+在 Module Tools 中，你可以按照如下方式注册插件：
+
+```ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginBabel } from '@modern-js/plugin-module-babel';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginBabel(),
+  ],
+});
+```
+
+## 配置
+
+See [babel options](https://babeljs.io/docs/options)
+
+下面是一个配置了`@babel/preset-env`的例子：
+
+```ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginBabel } from '@modern-js/plugin-module-babel';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginBabel({
+      presets: [['@babel/preset-env']],
+    }),
+  ],
+});
+```

package/docs/zh/plugins/official-list/plugin-banner.md

@@ -17,19 +17,18 @@ yarn add @modern-js/plugin-module-banner -D
 pnpm add @modern-js/plugin-module-banner -D
 ```
 
-
 ### 注册插件
 
 在 Module Tools 中，你可以按照如下方式注册插件：
 
 ```ts
-import moduleTools, defineConfig from '@modern-js/module-tools';
-import pluginBanner from '@modern-js/plugin-module-banner';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginBanner } from '@modern-js/plugin-module-banner';
 
 export default defineConfig({
   plugins: [
     moduleTools(),
-    pluginBanner({
+    modulePluginBanner({
       banner: {
         js: '//comment',
         css: '/*comment*/',
@@ -48,7 +47,8 @@ export default defineConfig({
 ### 在 JS 文件顶部增加版权信息
 
 ```ts
-import pluginBanner from '@modern-js/plugin-module-banner';
+import { modulePluginBanner } from '@modern-js/plugin-module-banner';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 const copyRight = `/*
  © Copyright 2020 xxx.com or one of its affiliates.
@@ -62,7 +62,8 @@ const copyRight = `/*
 
 export default defineConfig({
   plugins: [
-    pluginBanner({
+    moduleTools(),
+    modulePluginBanner({
       banner: {
         js: copyRight,
       },
@@ -73,7 +74,7 @@ export default defineConfig({
 
 ## 配置
 
-* 类型：
+* **类型：**
 
 ```ts
 type BannerOptions = {

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

@@ -2,12 +2,10 @@
 
 提供与 [babel-plugin-import](https://github.com/umijs/babel-plugin-import) 等价的能力和配置，基于 [SWC](https://swc.rs/) 实现。
 
-{/*
 :::tip
 从 @modern-js/module-tools 2.16.0 版本开始，该插件功能内置在 module-tools 中，由 [`transformImport`](api/config/build-config.html#transformimport)
 配置提供。
 :::
-*/}
 
 ## 快速开始
 
@@ -29,13 +27,13 @@ pnpm add @modern-js/plugin-module-import -D
 在 Module Tools 中，你可以按照如下方式注册插件：
 
 ```ts
-import moduleTools, defineConfig from '@modern-js/module-tools';
-import moduleImport from '@modern-js/plugin-module-import';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginImport } from '@modern-js/plugin-module-import';
 
 export default defineConfig({
   plugins: [
     moduleTools(),
-    moduleImport({
+    modulePluginImport({
       pluginImport: [{
         libraryName: 'antd',
         style: true,
@@ -49,7 +47,7 @@ export default defineConfig({
 
 ## 配置
 
-* 类型：
+* **类型：**
 
 ```ts
 type Options = {
@@ -66,11 +64,13 @@ type Options = {
 使用示例：
 
 ```ts
-import moduleImport from '@modern-js/plugin-module-import';
+import { modulePluginImport } from '@modern-js/plugin-module-import';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
-    moduleImport({
+    moduleTools(),
+    modulePluginImport({
       pluginImport: [
         // babel-plugin-import 的 options 配置
         {
@@ -109,13 +109,14 @@ import { MyButton as Btn } from 'foo';
 
 添加右侧的配置：
 
-
 ```ts
-import moduleImport from '@modern-js/plugin-module-import';
+import { modulePluginImport } from '@modern-js/plugin-module-import';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
-    moduleImport({
+    moduleTools(),
+    modulePluginImport({
       pluginImport: [{
         libraryName: 'foo',
         customName: 'foo/es/{{ member }}'
@@ -130,11 +131,13 @@ export default defineConfig({
 其中的 `{{ member }}` 会被替换为相应的引入成员
 
 ```ts focus=8:8
-import moduleImport from '@modern-js/plugin-module-import';
+import { modulePluginImport } from '@modern-js/plugin-module-import';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
-    moduleImport({
+    moduleTools(),
+    modulePluginImport({
       pluginImport: [{
         libraryName: 'foo',
         customName: 'foo/es/{{ member }}'
@@ -144,7 +147,6 @@ export default defineConfig({
 });
 ```
 
-
 ---
 转换后:
 
@@ -154,17 +156,18 @@ 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
-import moduleImport from '@modern-js/plugin-module-import';
+import { modulePluginImport } from '@modern-js/plugin-module-import';
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
-    moduleImport({
+    moduleTools(),
+    modulePluginImport({
       pluginImport: [{
         libraryName: 'foo',
         customName: 'foo/es/{{ kebabCase member }}',

package/docs/zh/plugins/official-list/{plugin-node-polyfill.mdx → plugin-node-polyfill.md}

@@ -39,7 +39,7 @@ export default defineConfig({
 
 ## 配置
 
-* 类型：
+* **类型：**
 
 ```ts
 type NodePolyfillOptions = {
@@ -86,14 +86,13 @@ export default defineConfig({
 });
 ```
 
-
 ## Node Polyfills
 
 ### Globals
 
-- `Buffer`
-- `process`
-- `console`
+* `Buffer`
+* `process`
+* `console`
 
 当你在代码中使用以上全局变量时，对应 polyfill 会被自动注入。
 
@@ -103,34 +102,34 @@ const bufferData = Buffer.from('xxxx');
 
 ### Modules
 
-- `assert`
-- `buffer`
-- `console`
-- `constants`
-- `crypto`
-- `domain`
-- `events`
-- `http`
-- `https`
-- `os`
-- `path`
-- `punycode`
-- `process`
-- `querystring`
-- `stream`
-- `_stream_duplex`
-- `_stream_passthrough`
-- `_stream_readable`
-- `_stream_transform`
-- `_stream_writable`
-- `string_decoder`
-- `sys`
-- `timers`
-- `tty`
-- `url`
-- `util`
-- `vm`
-- `zlib`
+* `assert`
+* `buffer`
+* `console`
+* `constants`
+* `crypto`
+* `domain`
+* `events`
+* `http`
+* `https`
+* `os`
+* `path`
+* `punycode`
+* `process`
+* `querystring`
+* `stream`
+* `_stream_duplex`
+* `_stream_passthrough`
+* `_stream_readable`
+* `_stream_transform`
+* `_stream_writable`
+* `string_decoder`
+* `sys`
+* `timers`
+* `tty`
+* `url`
+* `util`
+* `vm`
+* `zlib`
 
 当你通过 `require` 或 `import` 等语法在代码中引用以上模块时，对应 polyfill 会被注入。
 
@@ -142,16 +141,16 @@ const bufferData = Buffer.from('xxxx');
 
 ### Fallbacks
 
-- `child_process`
-- `cluster`
-- `dgram`
-- `dns`
-- `fs`
-- `module`
-- `net`
-- `readline`
-- `repl`
-- `tls`
+* `child_process`
+* `cluster`
+* `dgram`
+* `dns`
+* `fs`
+* `module`
+* `net`
+* `readline`
+* `repl`
+* `tls`
 
 目前浏览器端没有以上模块的 polyfill，因此当你引用以上模块时，会自动 fallback 为一个空对象。
 

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

@@ -0,0 +1,69 @@
+# Polyfill 插件
+
+:::tip
+通常情况下，我们不需要为 npm 包注入 polyfill，这一步应该在 Web 应用的框架侧完成，但是在某些场景，为了让我们的库能够直接运行在低版本浏览器里，我们需要注入 polyfill。
+
+请注意，此插件并不会转化你的代码语法，只会为你的代码中使用到的不支持的功能注入 polyfill，把它们作为普通函数导入而不是污染全局。你需要安装 `core-js-pure` 依赖
+
+:::
+
+## 快速开始
+
+### 安装
+
+```bash
+# npm
+npm install @modern-js/plugin-module-polyfill -D
+
+# yarn
+yarn add @modern-js/plugin-module-polyfill -D
+
+# pnpm
+pnpm add @modern-js/plugin-module-polyfill -D
+```
+
+### 注册插件
+
+在 Module Tools 中，你可以按照如下方式注册插件：
+
+```ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginPolyfill } from '@modern-js/plugin-module-polyfill';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginPolyfill(),
+  ],
+});
+```
+
+## 配置
+
+* **类型：**
+
+```ts
+type options = {
+  targets?: Record<string, string> | string;
+}
+```
+
+### targets
+
+See [babel target](https://babeljs.io/docs/options#targets).
+
+This is a example.
+
+```ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginPolyfill } from '@modern-js/plugin-module-polyfill';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginPolyfill({
+      targets: "> 0.25%, not dead"
+    }),
+  ],
+});
+```

package/package.json

@@ -9,15 +9,15 @@
     "directory": "packages/document/module-doc"
   },
   "license": "MIT",
-  "version": "2.21.1",
+  "version": "2.22.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.21.1",
-    "@modern-js/doc-tools": "2.21.1"
+    "@modern-js/doc-plugin-auto-sidebar": "2.22.0",
+    "@modern-js/doc-tools": "2.22.0"
   },
   "scripts": {
     "dev": "modern dev",