@modern-js/module-tools-docs 2.11.0 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @modern-js/module-tools-docs
 
+## 2.13.0
+
+### Patch Changes
+
+- 7fa815b: doc: add content about dev config
+  doc: 添加关于 dev 配置的内容
+  - @modern-js/doc-tools@2.13.0
+  - @modern-js/doc-plugin-auto-sidebar@2.13.0
+
+## 2.12.0
+
+### Patch Changes
+
+- a90a6a2: feat(plugin-module-node-polyfill, module-docs): add Node Polyfill feature
+  feat(plugin-module-node-polyfill, module-docs): 添加 Node Polyfill 功能。
+- Updated dependencies [d50aaf7]
+  - @modern-js/doc-tools@2.12.0
+  - @modern-js/doc-plugin-auto-sidebar@2.12.0
+
 ## 2.11.0
 
 ### Minor Changes

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

@@ -110,11 +110,12 @@ The following usage is not currently supported:
 ```js index.ts
 import { ReactComponent } from './logo.svg';
 ```
+
 :::
 
 When enabled, the type of svg used can be modified by adding a type definition to the `modern-app-env.d.ts` file:
 
-``` ts modern-app-env.d.ts focus=1:3
+```ts modern-app-env.d.ts focus=1:3
 declare module '*.svg' {
   const src: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
   export default src;
@@ -144,6 +145,30 @@ Automatically externalize project dependencies and peerDependencies and not pack
 - type: `boolean | Object`
 - default: `true`
 
+When we want to turn off the default handling behavior for third-party dependencies, we can do so by:
+
+```ts
+export default defineConfig({
+  buildConfig: {
+    autoExternal: false,
+  },
+});
+```
+
+This way the dependencies under `"dependencies"` and `"peerDependencies"` will be packaged. If you want to turn off the processing of only one of these dependencies, you can use the
+`buildConfig.autoExternal` in the form of an object.
+
+```ts
+export default defineConfig({
+  buildConfig: {
+    autoExternal: {
+      dependencies: false,
+      peerDependencies: false,
+    },
+  },
+});
+```
+
 ### dependencies
 
 Whether or not the dep dependencies of the external project are needed
@@ -216,7 +241,7 @@ The dts file generates the relevant configuration, by default it generates.
 - type: `false | Object`
 - default:
 
-``` js
+```js
 {
   abortOnError: true,
   distPath: './',
@@ -333,6 +358,27 @@ Generates code for the node environment by default, you can also specify `browse
 - type: `'browser' | 'node'`
 - default: `node`
 
+## redirect
+
+In `buildType: 'bundleless'` build mode, the reference path is redirected to ensure that it points to the correct product, e.g:
+
+- `import '. /index.less'` will be rewritten to `import '. /index.css'`
+- `import icon from '. /close.svg'` would be rewritten as `import icon from '... /asset/close.svg'` to `import icon from '. /asset/close.svg'` (depending on the situation)
+
+In some scenarios, you may not need these functions, then you can turn it off with this configuration, and its reference path will not be changed after turning it off.
+
+```ts
+export default {
+  buildConfig: {
+    redirect: {
+      alias: false, // Turn off modifying alias paths
+      style: false, // Turn off modifying the path to the style file
+      asset: false, // Turn off modifying the path to the resource file
+    },
+  },
+};
+```
+
 ## sideEffects
 
 Module sideEffects
@@ -340,7 +386,7 @@ Module sideEffects
 - Type: `RegExg[] | (filePath: string, isExternal: boolean) => boolean | boolean`
 - Default value: `undefined`
 
-Normally, we configure the module's side effects via the sideEffects field in package.json, but in some cases, such as when we reference a three-party package style file
+Normally, we configure the module's side effects via the sideEffects field in package.json, but in some cases, The package.json of a three-party package is unreliable.Such as when we reference a three-party package style file
 
 ```js
 import 'other-package/dist/index.css';
@@ -354,7 +400,13 @@ But the package.json of this three-party package does not have the style file co
 }
 ```
 
-This is the time to use this configuration item, which supports regular and functional forms
+At the same time you set [style.object](#inject) to `true` and you will see a warning message like this in the console
+
+```bash
+[LIBUILD:ESBUILD_WARN] Ignoring this import because "other-package/dist/index.css" was marked as having no side effects
+```
+
+At this point, you can use this configuration item to manually configure the module's `"sideEffects"` to support regular and functional forms.
 
 ```js modern.config.ts
 import { defineConfig } from '@modern-js/module-tools';

package/docs/en/api/config/dev.md

@@ -0,0 +1,85 @@
+---
+sidebar_position: 3
+---
+
+# Dev Config
+
+This section describes all configuration of Module Tools related to debugging tools.
+
+``` ts
+export default {
+  dev: {
+    storybook: {/* Storybook Config */},
+  },
+}
+```
+
+## storybook
+
+**Requirements**:
+
+- Turn on Storybook debugging or install the `@modern-js/plugin-storybook` plugin.
+- Register the `@modern-js/plugin-storybook` plugin。
+
+> For more information on how to enable Storybook debugging, please refer to：[【Storybook】](guide/basic/use-micro-generator#storybook)
+
+
+
+### storybook.webpack
+
+- **Type**: `Object` | `Function` | `undefined`
+
+- **Default**: `undefined`
+
+``` ts
+export default {
+  dev: {
+    storybook: {
+      webpack(config) {
+        return config;
+      },
+    }
+  }
+}
+```
+
+You can modify the webpack configuration of the Storybook Preview-iframe via `dev.storybook.webpack`. The usage can be found in the [`tools.webpack`](https://modernjs.dev/builder/api/config-tools.html#tools.webpack) configuration of Modern.js Builder.
+
+![Storybook](https://storybook.js.org/71522ac365feaf3338d7c242e53378f6/manager-preview.png)
+
+:::tip
+For the webpack configuration of the Storybook Manager app section, you can configure it by adding the `./config/storybook/main.js` file to configure it.
+
+``` js
+// ./config/storybook/main.js
+
+module.exports = {
+  // it controls the Storybook manager app
+  managerWebpack: async (config, options) => {
+    // update config here
+    return config;
+  },
+};
+```
+:::
+
+### storybook.webpackChain
+
+- **Type**: `Function` | `undefined`
+
+- **Default**: `undefined`
+
+``` ts
+export default {
+  dev: {
+    storybook: {
+      webpackChain(chain) {
+        return chain;
+      },
+    }
+  }
+}
+```
+
+You can modify the webpack configuration of the Storybook Preview-iframe via `dev.storybook.webpackChain`. You can refer to Modern.js Builder's [`tools.webpackChain`](https://modernjs.dev/builder/api/config-tools.html#tools.webpackchain) configuration for how to use it.
+

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

@@ -17,7 +17,7 @@ By default, module projects are processed for the following static resources:
 For the handling of static files, the module project currently supports the following functions.
 
 - Set the static resource path to `. /assets`.
-- For files over **10kb** they are inlined into the code.
+- Files less than **10kb** will be inlined into the code.
 
 Let us look at the following example:
 

package/docs/en/guide/advance/external-dependency.mdx

@@ -19,11 +19,11 @@ In addition to `"dependencies"`, [`"peerDependencies"`](/en/guide/basic/before-g
 
 ## Default handling of third-party dependencies
 
-In module projects, **by default, third-party dependencies under `"dependencies"` and `"peerDependencies"` are not packaged**. This is because when the npm package is released, the `"dependencies"` for the npm package will be installed when the npm package is installed.
+By default, third-party dependencies under `"dependencies"` and `"peerDependencies"` are not packaged in the module project\*\*.
 
-- By not packaging `"dependencies"`, you can reduce the size of the package product.
-- If you need to package, move `"dependencies"` to `"peerDependencies"`, which is equivalent to a **prebundle** of dependencies to reduce the size of the dependency installation.
+This is because when the npm package is installed, its `"dependencies"` will also be installed. By not packaging `"dependencies"`, you can reduce the size of the package product.
 
+If you need to package some dependencies, it is recommended to move them from `"dependencies"` to `"devDependencies"`, which is equivalent to **prebundle** the dependencies and reduces the size of the dependency installation.
 
 <CH.Spotlight>
 
@@ -79,88 +79,10 @@ If you want to modify the default processing, you can use the following API.
 
 - [`buildConfig.autoExternal`](/api/config/build-config#autoexternal)
 
-### Turn off default behavior
+## Exclude specified third-party dependencies
 
-When we want to turn off the default handling behavior for third-party dependencies, we can do so by:
-
-```ts
-export default defineConfig({
-  buildConfig: {
-    autoExternal: false,
-  },
-});
-```
-
-This way the dependencies under `"dependencies"` and `"peerDependencies"` will be packaged. If you want to turn off the processing of only one of these dependencies, you can use the
-`buildConfig.autoExternal` in the form of an object.
-
-```ts
-export default defineConfig({
-  buildConfig: {
-    autoExternal: {
-      dependencies: false,
-      peerDependencies: false,
-    },
-  },
-});
-```
-
-## Packaging third-party dependencies
-
-However there are cases where you want to package these third-party dependencies into the product. The benefits of packaging third-party dependencies into the product are:**Less time spent downloading third-party dependencies**. This way of handling third-party dependencies is generally more common in developing command-line tools, which can improve the loading speed of command-line tools and give users a better experience.
-
-So how do you enable the packaging of third-party dependencies in the module project?
-
-**When we want to package certain dependencies, we generally declare them in `"devDependencies"` in package.json**. In this case, the dependencies declared in `"devDependencies"` are **allowed** to be packaged in the product during the build process.
-
-<CH.Spotlight>
-
-```json ./v1/package.json
-{
-  "devDependencies": {
-    "react": "^17"
-  }
-}
-```
-
----
-
-If the project needs to package `react` dependencies.
-
-```json ./v1/package.json
-```
-
----
-
-When a `react` dependency is used in the source code.
-
-```tsx src/index.ts
-import React from 'react';
-console.info(React);
-```
-
----
-
-The `react` code will be packaged into the product at this point.
-
-```js dist/index.js
-// ...
-var import_react = __toESM(require_react());
-function src_default() {
-  console.info(import_react.default);
-}
-```
-
-</CH.Spotlight>
-
-However, in a real build scenario, you may encounter a third-party dependency that cannot be handled, so you can use the following API to **external** them.
-
-- [`buildConfig.externals`](/en/api/config/build-config#externals)
-
-### Exclude specified third-party dependencies
-
-We mentioned above the use of the `buildConfig.autoExternal` API, while `buildConfig.externals` can also control which third-party dependencies to handle. So we can combine these two
-APIs to handle the project's dependencies in a more granular way.
+We mentioned above the use of the `buildConfig.autoExternal` API, and [`buildConfig.externals`](/en/api/config/build-config#externals) can control which third-party dependencies to handle
+the project's dependencies in a more granular way.
 
 For example, when we need to leave only certain dependencies unpacked, we can configure it as follows.
 

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

@@ -30,6 +30,10 @@ They have their own benefits.
 - Bundle can reduce the size of build products and also pre-package dependencies to reduce the size of installed dependencies. Packaging libraries in advance can speed up application project builds.
 - Bundleless maintains the original file structure and is more conducive to debugging and tree shaking.
 
+:::warning
+Bundleless is a single file compilation mode, so for type references and exports you need to add the `type` field, e.g. `import type { A } from '. /types`
+:::
+
 In `buildConfig` you can specify whether the current build task is Bundle or Bundleless by using [`buildConfig.buildType`](/en/api/config/build-config#buildtype).
 
 ### Relationship between `input` and `sourceDir`

package/docs/en/guide/basic/before-getting-started.md

@@ -166,8 +166,7 @@ The Module Tools configuration file - `modern.config.(j|t)s` - is provided in th
 
 By default, the contents of the generated configuration file are as follows.
 
-```typescript
-// modern.config.ts
+```ts title="modern.config.ts"
 import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -178,8 +177,7 @@ export default defineConfig({
 
 **We recommend using the `defineConfig` function**, but it is not mandatory to use it. So you can also return an object directly in the config file: the
 
-``` ts
-// modern.config.ts
+``` ts title="modern.config.ts"
 import moduleTools from '@modern-js/module-tools';
 
 export default {

package/docs/en/guide/basic/modify-output-product.md

@@ -9,7 +9,7 @@ sidebar_position: 3
 
 When the `modern build` command is used in an initialized project, the products are generated according to the default configuration supported by Module Tools. The default supported configurations are specified as follows.
 
-```typescript
+```ts title="modern.config.ts"
 import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -58,7 +58,7 @@ For example, if the output product is based on the preset string `"npm-library"`
 
 For example, to achieve the same effect as the preset string ``npm-library-es5"` using the form of a preset function, you can do the following.
 
-```typescript
+```ts title="modern.config.ts"
 import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -131,7 +131,7 @@ In addition to the above categories, frequently asked questions and best practic
 
 `buildConfig` is one of the methods used to modify the product, **only `buildConfig` will take effect when configured in conjunction with `buildPreset`**. So if configured as follows.
 
-```typescript
+```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({

package/docs/en/guide/basic/test-your-project.mdx

@@ -47,7 +47,7 @@ For common modules, we can use the test function as follows:
 
 <CH.Spotlight>
 
-```typescript ./src/index.ts
+```ts ./src/index.ts
 export default function () {
   return 'hello world';
 }
@@ -57,7 +57,7 @@ export default function () {
 
 First is the code of the module.
 
-```typescript ./src/index.ts
+```ts ./src/index.ts
 export default function () {
   return 'hello world';
 }
@@ -69,7 +69,7 @@ Then in the test file, we can do this.
 
 Where `@` points to the source directory, defined in `tests/tsconfig.json` in the initialization project.
 
-```typescript ./tests/index.test.ts
+```ts ./tests/index.test.ts
 import main from '@/index';
 
 describe('default cases', () => {

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

@@ -63,7 +63,7 @@ values are real paths.
 
 The source code of the `foo` project.
 
-```typescript src/index.ts
+```ts src/index.ts
 export const content = 'hello world';
 ```
 

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

@@ -4,5 +4,4 @@
 
 * [@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.

package/docs/en/plugins/official-list/plugin-node-polyfill.mdx

@@ -0,0 +1,162 @@
+# Node Polyfill Plugin
+
+:::tip About Node Polyfill
+Normally, we don't need to use Node libs on the browser side. However, it is possible to use some Node libs when the code will run on both the Node side and the browser side, and Node Polyfill provides browser versions of polyfills for these Node libs.
+:::
+
+By using the Node Polyfill plugin, Node core libs polyfills are automatically injected into the browser-side, allowing you to use these modules on the browser side with confidence.
+
+## Quick Start
+
+### Install
+
+```bash
+# npm
+npm install @modern-js/plugin-module-node-polyfill -D
+
+# yarn
+yarn add @modern-js/plugin-module-node-polyfill -D
+
+# pnpm
+pnpm add @modern-js/plugin-module-node-polyfill -D
+```
+
+### Register
+
+In Module Tools, you can register plugins in the following way:
+
+```ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginNodePolyfill(),
+  ],
+});
+```
+
+## Configurations
+
+* **Type**:
+
+```ts
+type NodePolyfillOptions = {
+  exclude?: string[];
+  overrides?: Record<NodePolyfillKey, string>;
+}
+```
+
+### exclude
+
+Exclude the Node Polyfill to be injected.
+
+``` ts focus=7:9
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginNodePolyfill({
+      exclude: ['console'],
+    }),
+  ],
+});
+```
+
+### overrides
+
+Override the built-in Node Polyfill.
+
+``` ts focus=7:9
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginNodePolyfill({
+      overrides: {
+        fs: path.join(__dirname, './custom-fs.js'),
+      }
+    }),
+  ],
+});
+```
+
+
+## Node Polyfills
+
+### Globals
+
+- `Buffer`
+- `process`
+- `console`
+
+When the above global variables are used directly in code, the corresponding polyfill will be injected.
+
+```ts
+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`
+
+When the above module is referenced in code via import / require syntax, the corresponding polyfill will be injected.
+
+```ts
+import { Buffer } from 'buffer';
+
+const bufferData = Buffer.from('xxxx');
+```
+
+### Fallbacks
+
+- `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.
+
+```ts
+import fs from 'fs';
+
+console.log(fs); // -> {}
+```

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

@@ -124,7 +124,7 @@ import { ReactComponent } from './logo.svg';
 
 当开启功能后，可以通过在 `modern-app-env.d.ts` 文件中增加类型定义，修改使用 SVG 的类型：
 
-``` ts modern-app-env.d.ts focus=1:3
+```ts modern-app-env.d.ts focus=1:3
 declare module '*.svg' {
   const src: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
   export default src;
@@ -154,6 +154,30 @@ declare module '*.svg' {
 - 类型： `boolean | Object`
 - 默认值： `true`
 
+当我们希望关闭对于第三方依赖的默认处理行为时候，可以通过以下方式来实现：
+
+```ts modern.config.ts
+export default defineConfig({
+  buildConfig: {
+    autoExternal: false,
+  },
+});
+```
+
+这样对于 `"dependencies"` 和 `"peerDependencies"` 下面的依赖都会进行打包处理。如果只想要关闭其中某个下面的依赖处理，则可以使用
+`buildConfig.autoExternal` 的对象形式：
+
+```ts modern.config.ts
+export default defineConfig({
+  buildConfig: {
+    autoExternal: {
+      dependencies: false,
+      peerDependencies: false,
+    },
+  },
+});
+```
+
 ### dependencies
 
 是否需要外置项目的 `"dependencies"` 依赖。
@@ -258,7 +282,7 @@ export default defineConfig({
 - 类型： `false | Object`
 - 默认值：
 
-``` js
+```js
 {
   abortOnError: true,
   distPath: './',
@@ -272,7 +296,7 @@ export default defineConfig({
 在出现类型错误的时候，是否允许构建成功。**默认情况下，在出现类型错误的时候会导致构建失败**。
 
 :::warning
-当关闭该配置后，无法保证类型文件能正常生成，且不保证内容正确。在 `buildType: 'bundle'` 或者 Bundle 构建模式下，类型文件一定不会生成。
+当关闭该配置后，无法保证类型文件能正常生成，且不保证内容正确。在 `buildType: 'bundle'`，即打包模式下，类型文件一定不会生成。
 :::
 
 - 类型：`boolean`
@@ -299,7 +323,6 @@ TypeScript 配置文件的路径。
 - 类型： `string`
 - 默认值： `./tsconfig.json`
 
-
 ## externals
 
 配置外部依赖，不会被打包到最终的 bundle 中。
@@ -380,6 +403,27 @@ export default defineConfig({
 - 类型： `'browser' | 'node'`
 - 默认值： `node`
 
+## redirect
+
+在 `buildType: 'bundleless'` 构建模式下，会对引用路径进行重定向，确保指向了正确的产物，例如：
+
+- `import './index.less'` 会被改写成 `import './index.css'`
+- `import icon from './close.svg'` 会被改写成 `import icon from '../asset/close.svg'`（依实际情况而定）
+
+在某些场景下，你可能不需要这些功能，那么可以通过此配置关闭它，关闭后，其引用路径将不会发生改变。
+
+```ts
+export default {
+  buildConfig: {
+    redirect: {
+      alias: false, // 关闭对别名路径的修改
+      style: false, // 关闭对样式文件路径的修改
+      asset: false, // 关闭对资源文件路径的修改
+    },
+  },
+};
+```
+
 ## sideEffects
 
 配置模块的副作用
@@ -387,7 +431,8 @@ export default defineConfig({
 - 类型： `RegExg[] | (filePath: string, isExternal: boolean) => boolean | boolean`
 - 默认值： `undefined`
 
-通常情况下，我们通过 package.json 的 `"sideEffects"` 字段来配置模块的副作用，但是在某些情况下，例如我们引用了一个三方包的样式文件。
+通常情况下，我们通过 package.json 的 `"sideEffects"` 字段来配置模块的副作用，但是在某些情况下，三方包的 package.json 是不可靠的。
+例如我们引用了一个三方包的样式文件。
 
 ```js
 import 'other-package/dist/index.css';
@@ -401,7 +446,13 @@ import 'other-package/dist/index.css';
 }
 ```
 
-这时候就可以使用这个配置项，支持正则和函数形式。
+同时你又设置了[style.inject](#inject)为 `true`，在控制台可以看到类似的警告信息：
+
+```bash
+[LIBUILD:ESBUILD_WARN] Ignoring this import because "other-package/dist/index.css" was marked as having no side effects
+```
+
+这时候就可以使用这个配置项，手动配置模块的`"sideEffects"`，配置支持正则和函数形式。
 
 ```js modern.config.ts
 import { defineConfig } from '@modern-js/module-tools';
@@ -610,7 +661,7 @@ function styleInject(css, ref) {
 var style_inject_es_default = styleInject;
 
 // src/index.scss
-var css_248z = ".body {\n  color: black;\n}";
+var css_248z = '.body {\n  color: black;\n}';
 style_inject_es_default(css_248z);
 ```
 

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

@@ -0,0 +1,85 @@
+---
+sidebar_position: 3
+---
+
+# Dev Config
+
+本章节描述了 Module Tools 关于调试工具相关的所有配置。
+
+``` ts
+export default {
+  dev: {
+    storybook: {/* Storybook Config */},
+  },
+}
+```
+
+## storybook
+
+**首先需要确保**：
+
+- 开启 Storybook 调试功能或者安装 `@modern-js/plugin-storybook` 插件。
+- 注册 `@modern-js/plugin-storybook` 插件。
+
+> 关于如何开启 Storybook 调试功能，可以参考：[【Storybook 调试】](guide/basic/use-micro-generator#storybook-调试)
+
+
+
+### storybook.webpack
+
+- 类型：`Object` | `Function` | `undefined`
+
+- 默认值：`undefined`
+
+``` ts
+export default {
+  dev: {
+    storybook: {
+      webpack(config) {
+        return config;
+      },
+    }
+  }
+}
+```
+
+你可以通过 `dev.storybook.webpack` 来修改 Storybook Preview-iframe 的 webpack 配置。使用方式可以参考 Modern.js Builder 的 [`tools.webpack`](https://modernjs.dev/builder/api/config-tools.html#tools.webpack) 配置。
+
+![Storybook](https://storybook.js.org/71522ac365feaf3338d7c242e53378f6/manager-preview.png)
+
+:::tip
+对于 Storybook Manager app 部分的 webpack 配置，可以通过增加 `./config/storybook/main.js` 文件进行配置。
+
+``` js
+// ./config/storybook/main.js
+
+module.exports = {
+  // it controls the Storybook manager app
+  managerWebpack: async (config, options) => {
+    // update config here
+    return config;
+  },
+};
+```
+:::
+
+
+### storybook.webpackChain
+
+- 类型：`Function` | `undefined`
+
+- 默认值：`undefined`
+
+``` ts
+export default {
+  dev: {
+    storybook: {
+      webpackChain(chain) {
+        return chain;
+      },
+    }
+  }
+}
+```
+
+你可以通过 `dev.storybook.webpackChain` 来修改 Storybook Preview-iframe 的 webpack 配置。使用方式可以参考 Modern.js Builder 的 [`tools.webpackChain`](https://modernjs.dev/builder/api/config-tools.html#tools.webpackchain) 配置。

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

@@ -17,7 +17,7 @@ sidebar_position: 7
 对于静态文件的处理，模块工程目前默认支持的功能有：
 
 - 设置静态资源路径为 `./assets`。
-- 对于超过 **10kb** 的文件会内联到代码中。
+- 对于不超过 **10kb** 的文件会内联到代码中。
 
 让我们看下面的例子：
 

package/docs/zh/guide/advance/external-dependency.mdx

@@ -19,10 +19,11 @@ sidebar_position: 4
 
 ## 第三方依赖的默认处理
 
-在模块工程里，**默认情况下不会对 `"dependencies"` 以及 `"peerDependencies"` 下的第三方依赖进行打包处理**。这是因为 npm 包发布出去以后，安装 npm 包时，npm 包的 `"dependencies"` 也会被安装。
+在模块工程里，**默认情况下不会对 `"dependencies"` 以及 `"peerDependencies"` 下的第三方依赖进行打包处理**。
 
-- 不打包 `"dependencies"`，可以减小包产物的体积。
-- 如果需要打包，请将 `"dependencies"` 挪到 `"peerDependencies"` ，相当于对依赖进行 **prebundle** ，减小依赖安装的体积。
+这是因为在安装 npm 包时，其 `"dependencies"` 也会被安装。不打包 `"dependencies"`，可以减小包产物的体积。
+
+如果需要打包某些依赖，建议将它们从 `"dependencies"` 挪到 `"devDependencies"` ，这相当于对依赖进行 **prebundle** ，可以减小依赖安装的体积。
 
 <CH.Spotlight>
 
@@ -74,93 +75,13 @@ console.info(React);
 
 </CH.Spotlight>
 
-
 如果想要修改默认的处理方式，可以通过下面的 API 进行修改：
 
 - [`buildConfig.autoExternal`](/api/config/build-config#autoexternal)
 
-### 关闭默认行为
-
-当我们希望关闭对于第三方依赖的默认处理行为时候，可以通过以下方式来实现：
-
-```ts
-export default defineConfig({
-  buildConfig: {
-    autoExternal: false,
-  },
-});
-```
-
-这样对于 `"dependencies"` 和 `"peerDependencies"` 下面的依赖都会进行打包处理。如果只想要关闭其中某个下面的依赖处理，则可以使用
-`buildConfig.autoExternal` 的对象形式：
-
-```ts
-export default defineConfig({
-  buildConfig: {
-    autoExternal: {
-      dependencies: false,
-      peerDependencies: false,
-    },
-  },
-});
-```
-
-## 打包第三方依赖
-
-不过也有一些情况希望将这些第三方依赖打包到产物。将第三方依赖打包到产物的好处是：**减少下载第三方依赖所花费的时间**。这种处理第三方依赖的方式一般在开发命令行工具中比较常见，这可以提升命令行工具的加载速度，给使用者带来更好的使用体验。
-
-那么如何在模块工程中开启对于第三方依赖的打包处理呢？
-
-**当希望打包某些依赖的时候，一般来说会将这些依赖声明在 package.json 的 `"devDependencies"` 中**。此时在构建过程中，会**允许**声明在 `"devDependencies"` 中的依赖打包到产物中。
-
-<CH.Spotlight>
-
-```json ./v1/package.json
-{
-  "devDependencies": {
-    "react": "^17"
-  }
-}
-```
-
----
-
-如果项目需要打包 `react` 依赖。
-
-```json ./v1/package.json
-```
-
----
-
-当源码中使用了 `react` 依赖。
-
-```tsx src/index.ts
-import React from 'react';
-console.info(React);
-```
-
----
-
-此时产物中会将 `react` 代码打包到产物中。
-
-```js dist/index.js
-// ...
-var import_react = __toESM(require_react());
-function src_default() {
-  console.info(import_react.default);
-}
-```
-
-</CH.Spotlight>
-
-不过在实际的开发场景中，可能会遇到某个第三方依赖无法处理的情况，此时可以使用以下 API 对它们进行 **external** 处理。
-
-- [`buildConfig.externals`](/api/config/build-config#externals)
-
-### 排除指定第三方依赖
+## 排除指定第三方依赖
 
-在上面我们提到了 `buildConfig.autoExternal` API 的用途，同时 `buildConfig.externals` 也可以控制哪些第三方依赖要进行处理。因此我们可以组合这两个
-API 对项目的依赖进行更细微的处理。
+在上面我们提到了 `buildConfig.autoExternal` API 的用途，同时 [`buildConfig.externals`](/api/config/build-config#externals) 可以实现对三方依赖更细微的处理。
 
 例如当我们需要仅对某些依赖不进行打包处理的时候，可以按照如下方式进行配置：
 

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

@@ -30,6 +30,10 @@ sidebar_position: 1
 - Bundle 可以减少构建产物的体积，也可以对依赖预打包，减小安装依赖的体积。提前对库进行打包，可以加快应用项目构建的速度。
 - Bundleless 则是可以保持原有的文件结构，更有利于调试和 tree shaking。
 
+:::warning
+Bundleless 是单文件编译模式，因此对于类型的引用和导出你需要加上 `type` 字段， 例如 `import type { A } from './types`
+:::
+
 在 `buildConfig` 中可以通过 [`buildConfig.buildType`](/api/config/build-config#buildtype) 来指定当前构建任务是 Bundle 还是 Bundleless。
 
 ### `input` 与 `sourceDir` 的关系

package/docs/zh/guide/basic/before-getting-started.md

@@ -166,8 +166,7 @@ npm install -g pnpm
 
 默认情况下，生成的配置文件的内容如下：
 
-```typescript
-// modern.config.ts
+```ts title="modern.config.ts"
 import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -178,8 +177,7 @@ export default defineConfig({
 
 **我们推荐使用 `defineConfig` 函数**，不过并不强制使用它。因此你也可以在配置文件中直接返回一个对象：
 
-```ts
-// modern.config.ts
+```ts title="modern.config.ts"
 import moduleTools from '@modern-js/module-tools';
 
 export default {

package/docs/zh/guide/basic/modify-output-product.md

@@ -8,7 +8,7 @@ sidebar_position: 3
 
 当在初始化的项目里使用 `modern build` 命令的时候，会根据 Module Tools 默认支持的配置生成相应的产物。默认支持的配置具体如下：
 
-```typescript
+```ts title="modern.config.ts"
 import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -57,7 +57,7 @@ export default defineConfig({
 
 例如，如果使用预设函数的形式达到预设字符串 `"npm-library-es5"` 同样的效果，可以按照如下的方式：
 
-```typescript
+```ts title="modern.config.ts"
 import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -129,7 +129,7 @@ export default defineConfig({
 
 `buildConfig` 是用于修改产物的方式之一，**当与 `buildPreset` 配置同时存在的时候，只有 `buildConfig` 才会生效**。因此如果按照如下方式配置：
 
-```typescript
+```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({

package/docs/zh/guide/basic/test-your-project.mdx

@@ -61,7 +61,7 @@ modern test --updateSnapshot
 
 <CH.Spotlight>
 
-```typescript ./src/index.ts
+```ts ./src/index.ts
 export default function () {
   return 'hello world';
 }
@@ -71,7 +71,7 @@ export default function () {
 
 首先是模块的代码。
 
-```typescript ./src/index.ts
+```ts ./src/index.ts
 export default function () {
   return 'hello world';
 }
@@ -83,7 +83,7 @@ export default function () {
 
 其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 的 `paths` 中定义了。
 
-```typescript ./tests/index.test.ts
+```ts ./tests/index.test.ts
 import main from '@/index';
 
 describe('默认值 cases', () => {

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

@@ -63,7 +63,7 @@ sidebar_position: 5
 
 `foo` 项目的源码。
 
-```typescript src/index.ts
+```ts src/index.ts
 export const content = 'hello world';
 ```
 

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

@@ -4,3 +4,4 @@
 
 * [@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。

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

@@ -0,0 +1,162 @@
+# Node Polyfill 插件
+
+:::tip Node Polyfill 介绍
+通常情况下，我们不会在浏览器端使用 Node 模块。但在当前代码需要同时在 Node 端和浏览器端运行时，用到一些 Node 模块是有可能的。Node Polyfill 为这些 Node 模块提供了浏览器版本的 polyfills。
+:::
+
+通过使用 Node Polyfill 插件，会自动注入 Node 核心模块在浏览器端的 polyfills，让你可以在浏览器端放心使用这些模块。
+
+## 快速开始
+
+### 安装
+
+```bash
+# npm
+npm install @modern-js/plugin-module-node-polyfill -D
+
+# yarn
+yarn add @modern-js/plugin-module-node-polyfill -D
+
+# pnpm
+pnpm add @modern-js/plugin-module-node-polyfill -D
+```
+
+### 注册插件
+
+在 Module Tools 中，你可以按照如下方式注册插件：
+
+```ts
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginNodePolyfill(),
+  ],
+});
+```
+
+## 配置
+
+* 类型：
+
+```ts
+type NodePolyfillOptions = {
+  exclude?: string[];
+  overrides?: Record<NodePolyfillKey, string>;
+}
+```
+
+### exclude
+
+排除要注入的 Node Polyfill。
+
+``` ts focus=7:9
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginNodePolyfill({
+      exclude: ['console'],
+    }),
+  ],
+});
+```
+
+### overrides
+
+覆盖内置的 Node Polyfill。
+
+``` ts focus=7:9
+import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginNodePolyfill({
+      overrides: {
+        fs: path.join(__dirname, './custom-fs.js'),
+      }
+    }),
+  ],
+});
+```
+
+
+## Node Polyfills
+
+### Globals
+
+- `Buffer`
+- `process`
+- `console`
+
+当你在代码中使用以上全局变量时，对应 polyfill 会被自动注入。
+
+```ts
+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`
+
+当你通过 `require` 或 `import` 等语法在代码中引用以上模块时，对应 polyfill 会被注入。
+
+```ts
+import { Buffer } from 'buffer';
+
+const bufferData = Buffer.from('xxxx');
+```
+
+### Fallbacks
+
+- `child_process`
+- `cluster`
+- `dgram`
+- `dns`
+- `fs`
+- `module`
+- `net`
+- `readline`
+- `repl`
+- `tls`
+
+目前浏览器端没有以上模块的 polyfill，因此当你引用以上模块时，会自动 fallback 为一个空对象。
+
+```ts
+import fs from 'fs';
+
+console.log(fs); // -> {}
+```

package/package.json

@@ -5,15 +5,15 @@
   "bugs": "https://github.com/web-infra-dev/modern.js/issues",
   "repository": "web-infra-dev/modern.js",
   "license": "MIT",
-  "version": "2.11.0",
+  "version": "2.13.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.11.0",
-    "@modern-js/doc-tools": "2.11.0"
+    "@modern-js/doc-plugin-auto-sidebar": "2.13.0",
+    "@modern-js/doc-tools": "2.13.0"
   },
   "scripts": {
     "dev": "modern dev",