@modern-js/module-tools-docs 2.19.0 → 2.20.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @modern-js/module-tools-docs
 
+## 2.20.0
+
+### Patch Changes
+
+- Updated dependencies [6b9d90a]
+  - @modern-js/doc-tools@2.20.0
+  - @modern-js/doc-plugin-auto-sidebar@2.20.0
+
+## 2.19.1
+
+### Patch Changes
+
+- @modern-js/doc-tools@2.19.1
+- @modern-js/doc-plugin-auto-sidebar@2.19.1
+
 ## 2.19.0
 
 ### Patch Changes

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

@@ -8,8 +8,8 @@ This section describes all the configuration of Module Tools for building
 
 ## alias
 
-- type: `Record<string, string> | Function`
-- default: `{'@': 'src',}`
+- Type: `Record<string, string> | Function`
+- Default: `{'@': 'src',}`
 
 :::tip
 For TypeScript projects, you only need to configure [compilerOptions.paths](https://www.typescriptlang.org/tsconfig#paths) in `tsconfig.json`, Module Tools will automatically recognize the alias in `tsconfig.json`, so there is no need to configure the `alias` field additionally.
@@ -59,22 +59,22 @@ export default {
 
 Static resource output path, will be based on [outDir](/api/config/build-config#outDir)
 
-- type: `string`
-- default: `assets`
+- Type: `string`
+- Default: `assets`
 
 ### limit
 
 Threshold for automatically inlining static resources when building, resources less than 10 KB will be automatically inlined into the bundle product
 
-- type: `number`
-- default: `10 * 1024`
+- Type: `number`
+- Default: `10 * 1024`
 
 ### publicPath
 
 The CDN prefix given to unlinked resources when packaging
 
-- type: `string`
-- default: `undefined`
+- Type: `string`
+- Default: `undefined`
 
 ```js modern.config.ts
 export default {
@@ -92,8 +92,8 @@ At this point, all static resources will be prefixed with `https://xxx/`
 
 Packaged to handle svg as a React component, options reference [svgr](https://react-svgr.com/docs/options/), plus support for two configuration items `include` and `exclude` to match the svg file to be handled
 
-- type: `boolean | Object`
-- default: `false`
+- Type: `boolean | Object`
+- Default: `false`
 
 When svgr feature is enabled, you can use svg as a component using the default export.
 
@@ -128,22 +128,22 @@ declare module '*.svg' {
 
 Set the matching svg file
 
-- type: `string | RegExp | (string | RegExp)[]`
-- default: `/\.svg$/`
+- Type: `string | RegExp | (string | RegExp)[]`
+- Default: `/\.svg$/`
 
 #### exclude
 
 Set unmatched svg files
 
-- type: `string | RegExp | (string | RegExp)[]`
-- default: `undefined`
+- Type: `string | RegExp | (string | RegExp)[]`
+- Default: `undefined`
 
 ## autoExternal
 
 Automatically externalize project dependencies and peerDependencies and not package them into the final bundle
 
-- type: `boolean | Object`
-- default: `true`
+- Type: `boolean | Object`
+- Default: `true`
 
 When we want to turn off the default handling behavior for third-party dependencies, we can do so by:
 
@@ -173,29 +173,29 @@ export default defineConfig({
 
 Whether or not the dep dependencies of the external project are needed
 
-- type: `boolean`
-- default: `true`
+- Type: `boolean`
+- Default: `true`
 
 ### peerDependencies
 
 Whether to require peerDep dependencies for external projects
 
-- type: `boolean`
-- default: `true`
+- Type: `boolean`
+- Default: `true`
 
 ## buildType
 
 The build type, `bundle` will package your code, `bundleless` will only do the code conversion
 
-- type: `'bundle' | 'bundleless'`
-- default: `bundle`
+- Type: `'bundle' | 'bundleless'`
+- Default: `bundle`
 
 ## copy
 
 Copies the specified file or directory into the build output directory
 
-- type: `Array`
-- default: `[]`
+- Type: `Array`
+- Default: `[]`
 
 ```js
 export default {
@@ -211,8 +211,8 @@ Reference for array settings: [copy-webpack-plugin patterns](https://github.com/
 
 Define global variables that will be injected into the code
 
-- type: `Record<string, string>`
-- default: `{}`
+- Type: `Record<string, string>`
+- Default: `{}`
 
 Since the `define` function is implemented by global text replacement, you need to ensure that the global variable values are strings. A safer approach is to convert the value of each global variable to a string, using `JSON.stringify`, as follows.
 
@@ -236,7 +236,7 @@ To prevent excessive global replacement substitution, it is recommended that the
 
 <!-- ## disableSwcTransform
 
-Starting with version 2.16.0, SWC Transform is enabled by default for code transformation. If you want to disable this feature, you can use this configuration. Only Esbuild Transform is used in this case.
+Starting with version 2.16.0, SWC Transform is enabled by default for code transformation. If you want to disable this feature, you can use this configuration. Only esbuild Transform is used in this case.
 
 The use of SWC Transform can reduce the impact of auxiliary functions on the volume of the constructed product.
 
@@ -247,8 +247,8 @@ The use of SWC Transform can reduce the impact of auxiliary functions on the vol
 
 The dts file generates the relevant configuration, by default it generates.
 
-- type: `false | Object`
-- default:
+- Type: `false | Object`
+- Default:
 
 ```js
 {
@@ -267,29 +267,29 @@ Whether to allow the build to succeed in case of a type error. By default, this
 When this configuration is turned on, there is no guarantee that the type files will be generated properly and accurately. In `buildType: 'bundle'` or Bundle build mode, the type file must not be generated.
 :::
 
-- type: `boolean`
-- default: `true`
+- Type: `boolean`
+- Default: `true`
 
 ### distPath
 
 The output path of the dts file, based on [outDir](/api/config/build-config#outDir)
 
-- type: `string`
-- default: `. /types`
+- Type: `string`
+- Default: `. /types`
 
 ### only
 
 Generate only dts files, not js files
 
-- type: `boolean`
-- default: `false`
+- Type: `boolean`
+- Default: `false`
 
 ### tsconfigPath
 
 Path to the tsconfig file
 
-- type: `string`
-- default: `. /tsconfig.json`
+- Type: `string`
+- Default: `. /tsconfig.json`
 
 ## esbuildOptions
 
@@ -370,22 +370,22 @@ export var yourCode = function() {
 
 Configure external dependencies that will not be packaged into the final bundle
 
-- type: `(string | RegExp)[]`
-- default: `[]`
+- Type: `(string | RegExp)[]`
+- Default: `[]`
 
 ## format
 
 The format of the js product output, where `iife` and `umd` can only take effect when `buildType` is `bundle`
 
-- type: `'esm' | 'cjs' | 'iife' | 'umd'`
-- default: `cjs`
+- Type: `'esm' | 'cjs' | 'iife' | 'umd'`
+- Default: `cjs`
 
 ## input
 
 Specify the entry file for the build, in the form of an array that can specify the directory
 
-- type: `string[] | Record<string, string>`
-- default: `['src/index.ts']` in `bundle` mode, `['src']` in `bundleless` mode
+- Type: `string[] | Record<string, string>`
+- Default: `['src/index.ts']` in `bundle` mode, `['src']` in `bundleless` mode
 
 ```js modern.config.ts
 export default {
@@ -399,22 +399,22 @@ export default {
 
 Specify the compilation method of jsx, default support React17, automatically inject jsx runtime code
 
-- type: `automatic | classic`
-- default: `automatic`
+- Type: `automatic | classic`
+- Default: `automatic`
 
 ## metafile
 
 esbuild to produce some metadata about the build in JSON format, which can be visualized by tools such as [bundle-buddy](https://bundle-buddy.com/esbuild)
 
-- type: `boolean`
-- default: `false`
+- Type: `boolean`
+- Default: `false`
 
 ## minify
 
 Use esbuild or terser to compress code, also pass [terserOptions](https://github.com/terser/terser#minify-options)
 
-- type: `'terser' | 'esbuild' | false | Object`
-- default: `false`
+- Type: `'terser' | 'esbuild' | false | Object`
+- Default: `false`
 
 ```js modern.config.ts
 export default {
@@ -432,15 +432,15 @@ export default {
 
 Specifies the output directory of the build
 
-- type: `string`
-- default: `dist`
+- Type: `string`
+- Default: `dist`
 
 ## platform
 
 Generates code for the node environment by default, you can also specify `browser` which will generate code for the browser environment
 
-- type: `'browser' | 'node'`
-- default: `node`
+- Type: `'browser' | 'node'`
+- Default: `node`
 
 ## redirect
 
@@ -468,7 +468,7 @@ export default {
 Module sideEffects
 
 - Type: `RegExg[] | (filePath: string, isExternal: boolean) => boolean | boolean`
-- Default value: `undefined`
+- Default: `undefined`
 
 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
 
@@ -511,15 +511,15 @@ After adding this configuration, the sideEffects field in package.json will no l
 
 Specify the source directory of the build, default is `src`, which is used to generate the corresponding product directory based on the source directory structure when building `bundleless`.
 
-- type: `string`
-- default: `src`
+- Type: `string`
+- Default: `src`
 
 ## sourceMap
 
 Whether to generate sourceMap or not
 
-- type: `boolean | 'inline' | 'external'`
-- default: `false`
+- Type: `boolean | 'inline' | 'external'`
+- Default: `false`
 
 <!-- ## sourceType
 
@@ -532,8 +532,8 @@ Sets the format of the source code. By default, the source code will be treated
 
 Whether to enable code splitting
 
-- type: `boolean`
-- default: `false`
+- Type: `boolean`
+- Default: `false`
 
 ## style
 
@@ -547,15 +547,15 @@ less-related configuration
 
 Refer to [less](https://less.bootcss.com/usage/#less-options) for detailed configuration
 
-- type: `Object`
-- default: `{ javascriptEnabled: true }`
+- Type: `Object`
+- Default: `{ javascriptEnabled: true }`
 
 #### additionalData
 
 Add `Less` code to the beginning of the entry file.
 
-- type: `string`
-- default: `undefined`
+- Type: `string`
+- Default: `undefined`
 
 ```js modern.config.ts
 export default {
@@ -573,8 +573,8 @@ export default {
 
 Configure the implementation library used by `Less`, if not specified, the built-in version used is `4.1.3`
 
-- type: `string | Object`
-- default: `undefined`
+- Type: `string | Object`
+- Default: `undefined`
 
 Specify the implementation library for `Less` when the `Object` type is specified
 
@@ -612,15 +612,15 @@ sass-related configuration
 
 Refer to [node-sass](https://github.com/sass/node-sass#options) for detailed configuration
 
-- type: `Object`
-- default: `{}`
+- Type: `Object`
+- Default: `{}`
 
 #### additionalData
 
 Add `Sass` code to the beginning of the entry file.
 
-- type: `string | Function`
-- default: `undefined`
+- Type: `string | Function`
+- Default: `undefined`
 
 ```js modern.config.ts
 export default {
@@ -639,8 +639,8 @@ export default {
 
 Configure the implementation library used by `Sass`, the built-in version used is `1.5.4` if not specified
 
-- type: `string | Object`
-- default: `undefined`
+- Type: `string | Object`
+- Default: `undefined`
 
 Specify the implementation library for `Sass` when the `Object` type is specified
 
@@ -681,8 +681,8 @@ See [postcss](https://github.com/postcss/postcss#options) for detailed configura
 
 Configure whether to insert style into js in packaged mode
 
-- type: `boolean`
-- default: `false`
+- Type: `boolean`
+- Default: `false`
 
 After opening inject, you will see an extra piece of style code in the js file. For example, if you write `import '. /index.scss'`，you will see the following code.
 
@@ -698,7 +698,7 @@ var css_248z = '.body {\n color: black;\n}';
 style_inject_es_default(css_248z);
 ```
 
-:::tip {title="Note"}
+:::tip
 
 With `inject` turned on, you need to pay attention to the following points.
 
@@ -717,8 +717,8 @@ This can be fixed by configuring [sideEffects](#sideeffects) in this case.
 
 Enable CSS Modules automatically based on the filename.
 
-- type: `boolean | RegExp`
-- default: `true`
+- Type: `boolean | RegExp`
+- Default: `true`
 
 `true` : Enables CSS Modules for style files ending with `.module.css` `.module.less` `.module.scss` `.module.sass` filenames
 
@@ -730,8 +730,8 @@ Enable CSS Modules automatically based on the filename.
 
 CSS Modules configuration
 
-- type: `Object`
-- default: `{}`
+- Type: `Object`
+- Default: `{}`
 
 A common configuration is `localsConvention`, which changes the class name generation rules for css modules
 
@@ -763,8 +763,8 @@ For detailed configuration see [postcss-modules](https://github.com/madyankin/po
 
 tailwindcss related configuration
 
-- type: `Object | Function`
-- default: `see configuration details below`
+- Type: `Object | Function`
+- Default: `see configuration details below`
 
 <details>
   <summary>Tailwind CSS configuration details</summary>
@@ -796,8 +796,8 @@ The rest of the usage is the same as Tailwind CSS: [Quick Portal](https://tailwi
 
 Specify the target environment for the build
 
-- type: `'es5' | 'es6' | 'es2015' | 'es2016' | 'es2017' | 'es2018' | 'es2019' | 'es2020' | 'es2021' | 'es2022' | 'esnext'`
-- default: `'es6'`
+- Type: `'es5' | 'es6' | 'es2015' | 'es2016' | 'es2017' | 'es2018' | 'es2019' | 'es2020' | 'es2021' | 'es2022' | 'esnext'`
+- Default: `'es6'`
 
 <!-- ## transformImport
 
@@ -837,8 +837,8 @@ Reference the [Import Plugin - Notes](plugins/official-list/plugin-import.html#N
 
 Specify global variables for external import of umd products
 
-- type: `Record<string, string>`
-- default: `{}`
+- Type: `Record<string, string>`
+- Default: `{}`
 
 ```js modern.config.ts
 export default {
@@ -857,8 +857,8 @@ At this point, `react` and `react-dom` will be seen as global variables imported
 
 Specifies the module name of the umd product
 
-- type: `string` | `Function`
-- default: `name => name`
+- Type: `string` | `Function`
+- Default: `name => name`
 
 ```js
 export default {

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

@@ -6,8 +6,8 @@ sidebar_position: 2
 
 A build preset string or preset function. Provides out-of-the-box build configuration
 
-- type: `string | Function`
-- default: `undefined`
+- Type: `string | Function`
+- Default: `undefined`
 
 ## string
 

package/docs/en/api/config/design-system.md

@@ -10,8 +10,8 @@ This chapter describes the configuration related to designSystem
 The Tailwind CSS feature needs to be enabled first via `pnpm run new`.
 :::
 
-- type: `Object`
-- default: `see configuration details below`.
+- Type: `Object`
+- Default: `see configuration details below`.
 
 <details>
   <summary>designSystem configuration details</summary>

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

@@ -4,9 +4,9 @@ sidebar_position: 4
 
 # Plugins
 
-This chapter describes the configuration of the registered module-tools plugin.
+This chapter describes the configuration of the registered Module Tools plugin.
 
-- type: `Array<ModuleToolsPlugin>`
+- Type: `Array<ModuleToolsPlugin>`
 
 ```js modern.config.ts
 import { examplePlugin } from '. /plugins/example';

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

@@ -13,7 +13,7 @@ You need to enable the unit testing feature with `pnpm run new` first.
 ## jest
 
 - Type: `Object | Function`
-- Default value: `{}`
+- Default: `{}`
 
 The configuration corresponding to [Jest](https://jestjs.io/docs/configuration), when of type `Object`, can be configured with all the underlying configurations supported by Jest .
 
@@ -48,8 +48,8 @@ export default defineConfig({
 
 ## transformer
 
-- type: `'babel-jest' | 'ts-jest'`
-- Default value: `'babel-jest'`
+- Type: `'babel-jest' | 'ts-jest'`
+- Default: `'babel-jest'`
 
 Configure the compilation tool for the source code when executing tests: [babel-jest](https://www.npmjs.com/package/babel-jest) or [ts-jest](https://github.com/kulshekhar/ts-jest). The default is `babel-jest`.
 

package/docs/en/api/plugin-api/plugin-hooks.md

@@ -335,7 +335,7 @@ export interface DevToolData {
 }
 ```
 
-<!-- :::tip{title='About disableRunBuild configuration'}
+<!-- :::tip About disableRunBuild configuration
 When dev a project, it may be possible to set `disableRunBuild: true` to disable build tasks for source execution (in listening mode) if you only need to dev code functionality.
 
 The currently supported Storybook dev supports using source code products as dev objects, so `disableRunBuild: false` in the Storybook plugin.

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

@@ -4,13 +4,10 @@ sidebar_position: 1
 
 # In-depth understanding of build
 
-In the [Basic Usage] section, we already knew that you can modify the output product of a project through the `buildConfig` configuration. `buildConfig` not only describes some of the features of the product, but also provides some functionality for building the product.
-
-:::tip{title=notes}
-If you are not sure what `buildConfig` is, it is recommended to take some time to understand it by following this link.
-
-- [[modify-output-product](/en/guide/basic/modify-output-product)]
+In the "Basic Usage" section, we already knew that you can modify the output product of a project through the `buildConfig` configuration. `buildConfig` not only describes some of the features of the product, but also provides some functionality for building the product.
 
+:::tip
+If you are not familiar with `buildConfig`, please read [modify-output-product](/en/guide/basic/modify-output-product).
 :::
 
 In this chapter we'll dive into the use of certain build configurations and understand what happens when the `modern build` command is executed.
@@ -43,7 +40,7 @@ In `buildConfig` you can specify whether the current build task is Bundle or Bun
 - When `buildType: 'bundle'`, `input` defaults to `src/index.(j|t)sx?`
 - When `buildType: 'bundleless'`, `input` defaults to `['src']`
 
-:::warning{title=notes}
+:::warning
 It is recommended that you do not specify multiple source file directories during a Bundleless build, as unintended results may occur. Bundleless builds with multiple source directories are currently in an unstable stage.
 :::
 

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

@@ -6,7 +6,7 @@ sidebar_position: 1
 
 ## Environment preparation
 
-In order to use the Modern.js module engineering solution, you first need [NodeJS](https://nodejs.org/zh/) engine, we recommend the latest [LTS version](https://github.com/nodejs/Release), and make sure the Node version is **>=14.18.0**. because non-stable NodeJS releases frequently have bugs. You might consider installing via [nvm-windows](https://github.com/coreybutler/nvm-windows) and [nvm](https://github.com/nvm-sh/nvm) (Mac/linux), so you can easily switch to different NodeJS versions that might be required for different projects that you work on.
+In order to use the Modern.js module engineering solution, you first need [NodeJS](https://nodejs.org/zh/) engine, we recommend the latest [LTS version](https://github.com/nodejs/Release), and make sure the Node version is **>=14.18.0**. because non-stable NodeJS releases frequently have bugs. You might consider installing via [nvm-windows](https://github.com/coreybutler/nvm-windows) and [nvm](https://github.com/nvm-sh/nvm) (Mac / Linux), so you can easily switch to different NodeJS versions that might be required for different projects that you work on.
 
 ## Getting Started with npm
 

package/docs/en/guide/basic/command-preview.md

@@ -32,7 +32,7 @@ When you want to start a project build, you can execute the `modern build` comma
 
 In addition to the above, module projects also support `platform` build mode, which can be used to perform build tasks for other tools. For example, it is currently officially supported to start a Storybook build task to generate Storybook products by executing the `modern build --platform` or `modern build --platform storybook` commands after installing the `@modern-js/plugin-storybook` plugin.
 
-:::tip{title=Note}
+:::tip
 When executing a Storybook build, if you need to read the build product of the project. Then **don't forget to execute the `modern build` command to ensure the existence of the project's build product before executing the `modern build --platform` command to start the Storybook build**.
 :::
 
@@ -108,7 +108,7 @@ Run [ESLint](https://eslint.org/) to check the syntax of the code. Usually, we o
 
 - The `-no-fix` argument turns off the ability to automatically fix lint error code.
 
-## `-modern change`
+## `modern change`
 
 ```bash
 Usage: modern change [options]
@@ -185,7 +185,7 @@ Options:
 
 Automatically generate [Release Note](https://en.wikipedia.org/wiki/Release_notes) based on the changeset information of the current repository.
 
-:::tip{title=Note}
+:::tip
 needs to be executed before the `bump` command.
 :::
 

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

@@ -1,9 +1,8 @@
 ---
 sidebar_position: 3
 ---
-# modify-output-product
 
-## Modify the output product
+# Modify the output product
 
 ## Default output products
 

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

@@ -17,9 +17,9 @@ First of all, if you haven't read the following, take a few minutes to understan
 - Share how the UI actually works
 - Automate UI workflows
 
-So it is a complex and powerful tool.
+So Storybook is a complex and powerful tool.
 
-The modular engineering solution is integrated with Storybook, so you can pretty much follow the official Storybook documentation. However, there are still a few things to keep in mind, which are explained below.
+Module Tools is integrated with Storybook, so you can pretty much follow the official Storybook documentation. However, there are still a few things to keep in mind, which are explained below.
 
 ## Debugging code
 
@@ -164,10 +164,10 @@ export default {
 };
 ```
 
-:::tip{title='why is the source code approach not recommended'}
+:::tip Why is the source code approach not recommended
 Not only is it impossible to verify that the component product is correct using the component source code, **but also some of the configurations supported by the module project for building the product cannot be fully translated into Storybook internal configuration**. If some of the configurations cannot be converted to each other, there will be unintended results during Storybook debugging.
 
-Module Tools is based on Esbuild, while Storybook is based on Webpack, and Esbuild's configuration is not fully compatible with Webpack.
+Module Tools is based on esbuild, while Storybook is based on Webpack, and esbuild's configuration is not fully compatible with Webpack.
 :::
 
 ## Configure Storybook

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

@@ -2,12 +2,12 @@
 
 This chapter will describe how to develop component projects using the module engineering solution.
 
-# # Initialize the project
+## Initialize the project
 
 <CH.Spotlight>
 
 ```bash Interactive questions
-npx @modern-js/create components-project
+npx @modern-js/create@latest components-project
 
 ? Please select the solution you want to create: Npm Module
 ? Package Name: components-demo
@@ -20,7 +20,7 @@ npx @modern-js/create components-project
 It is recommended to use the `@modern-js/create` command to initialize an npm project.
 
 ```bash Interactive questions
-npx @modern-js/create components-project
+npx @modern-js/create@latest components-project
 
 ? Please select the solution you want to create: Npm Module
 ? Package Name: components-demo
@@ -271,7 +271,7 @@ e b {
 
 Module projects support development styles using Less.
 
-> Currently supported version is 4.1.3
+> The current built-in Less version is v4.1.3
 
 <CH.Spotlight>
 
@@ -310,7 +310,7 @@ div {
 
 Module projects support developing styles using Scss/Sass.
 
-> Currently supported version is 1.54.4
+> The current built-in Sass version is v1.54.4
 
 <CH.Spotlight>
 

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

@@ -8,6 +8,36 @@ sidebar_position: 3
 
 Want to experience Module Tools in action? The only prerequisite you need is [Node.js LTS](https://github.com/nodejs/Release) and make sure your Node version is **>= 14.18.0**.We recommend using the LTS version of Node.js 16.
 
+### Create new project
+
+
+**If you want to create a complete module project, you can execute the following command:**
+
+```bash
+npx @modern-js/create your-project-dir-name
+```
+
+:::info
+Execute `npx @modern-js/create -h` for more command line arguments
+:::
+
+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 package manager: pnpm
+```
+
+> The project name is the value of the `"name"` field in `package.json`.
+
+Then the process of initializing the project will start. After the project directory and files are generated and the dependencies are installed, a complete module project is created.
+
+We can start the project build directly with the `pnpm build` command, and start the build in watching mode with the `pnpm build --watch` command.
+
+### Add to an existing project
+
 From your shell, install the following dependencies in your project.
 
 - `@modern-js/module-tools`
@@ -43,6 +73,8 @@ Finally, add the command `"build": "modern build"` to the project's `package.jso
 
 If your project has a `src/index.(js|jsx)` file or both `src/index.(ts|tsx)` and `tsconfig.json` files, then congratulations you can run the `npm run build` command directly to build your project with Module Tools.
 
+### View official example
+
 **If you want to see the complete project using the modular engineering scheme, you can execute the following command**.
 
 ```bash
@@ -62,31 +94,6 @@ pnpm dev storybook
 pnpm test
 ```
 
-**If you want to create a complete module project, you can execute the following command:**
-
-```bash
-npx @modern-js/create your-project-dir-name
-```
-
-:::info
-Execute `npx @modern-js/create -h` for more command line arguments
-:::
-
-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 package manager: pnpm
-```
-
-> The project name is the value of the `"name"` field in `package.json`.
-
-Then the process of initializing the project will start. After the project directory and files are generated and the dependencies are installed, a complete module project is created.
-
-We can start the project build directly with the `pnpm build` command, and start the build in watching mode with the `pnpm build --watch` command.
-
 ## Let's get started
 
 Choose your tutorial scenario...

package/docs/en/index.md

@@ -14,8 +14,8 @@ hero:
       link: /en/guide/intro/getting-started
 
 features:
-  - title: 'Esbuild: The High Performance JS Bundler'
-    details: Built on Esbuild, the build is extremely fast and gives you the ultimate development experience.
+  - title: 'esbuild: The High Performance JS Bundler'
+    details: Built on esbuild, the build is extremely fast and gives you the ultimate development experience.
     icon: 🚀
   - title: 'Two build modes'
     details: Both bundle and bundleless build modes are supported.

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

@@ -6,7 +6,7 @@ sidebar_position: 1
 
 Module engineering solution not only provides a rich set of features, but also supports extending the capabilities of the current project by way of plugins.
 
-We can quickly see how to write a module-tools plugin by using the following example.
+We can quickly see how to write a Module Tools plugin by using the following example.
 
 <CH.Spotlight>
 

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

@@ -4,10 +4,10 @@ sidebar_position: 2
 
 # Plugin Object
 
-The module-tools plugin is an object, and the object contains the following properties.
+The Module Tools plugin is an object, and the object contains the following properties.
 
 - `name`: The name of the plugin, a unique identifier.
-- `setup`: plugin initialization function, which will be executed only once. setup function can return a [Hooks object](), and module-tools will execute the function corresponding to the Hook defined on the Hooks object at a specific time.
+- `setup`: plugin initialization function, which will be executed only once. setup function can return a [Hooks object](), and Module Tools will execute the function corresponding to the Hook defined on the Hooks object at a specific time.
 
 For example, in the following plugin code example, the `beforeBuild` function is triggered before the project starts the build task and the `build start` log is printed.
 

package/docs/en/plugins/guide/setup-function.mdx

@@ -106,7 +106,7 @@ export default (): CliPlugin<ModuleTools> => ({
 
 ## Life cycle hooks
 
-We know that the `setup` function returns a Hooks object, which can also be understood as an object with module-tools lifecycle hooks.
+We know that the `setup` function returns a Hooks object, which can also be understood as an object with Module Tools lifecycle hooks.
 
 Currently there are two main types of hooks.
 

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

@@ -277,7 +277,7 @@ export default defineConfig({
 
 <!-- ## disableSwcTransform
 
-从 2.16.0 版本开始，默认开启 SWC Transform 进行代码转换。如果想要关闭该功能，可以使用该配置。此时仅使用 Esbuild Transform。
+从 2.16.0 版本开始，默认开启 SWC Transform 进行代码转换。如果想要关闭该功能，可以使用该配置。此时仅使用 esbuild Transform。
 
 使用 SWC Transform 可以减小辅助函数对构建产物体积的影响。
 
@@ -451,8 +451,8 @@ export default defineConfig({
 
 esbuild 以 JSON 格式生成有关构建的一些元数据，可以通过例如 [bundle-buddy](https://bundle-buddy.com/esbuild) 的工具可视化
 
-- type: `boolean`
-- default: `false`
+- 类型：`boolean`
+- 默认值：`false`
 
 ## minify
 
@@ -758,7 +758,7 @@ var css_248z = '.body {\n  color: black;\n}';
 style_inject_es_default(css_248z);
 ```
 
-:::tip {title="注意"}
+:::tip
 
 开启了 `inject` 后，你需要注意以下几点：
 

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

@@ -6,8 +6,8 @@ sidebar_position: 2
 
 构建的预设字符串或者预设函数。提供开箱即用的构建配置。
 
-- type: `string | Function`
-- default: `undefined`
+- 类型：`string | Function`
+- 默认值: `undefined`
 
 ## string
 

package/docs/zh/api/config/design-system.md

@@ -10,8 +10,8 @@ sidebar_position: 3
 需要先通过 `pnpm run new` 启用 Tailwind CSS 功能。
 :::
 
-- type: `Object`
-- default: `见下方配置详情`。
+- 类型：`Object`
+- 默认值: `见下方配置详情`。
 
 <details>
   <summary>designSystem 配置详情</summary>

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

@@ -4,9 +4,9 @@ sidebar_position: 4
 
 # Plugins
 
-本章介绍注册 module-tools 插件的配置。
+本章介绍注册 Module Tools 插件的配置。
 
-- type：`Array<ModuleToolsPlugin>`
+- 类型：`Array<ModuleToolsPlugin>`
 
 ```js modern.config.ts
 import { examplePlugin } from './plugins/example';

package/docs/zh/api/plugin-api/plugin-hooks.md

@@ -1,6 +1,6 @@
 # Plugin Hooks
 
-本章介绍关于 module-tools 支持的生命周期钩子。
+本章介绍关于 Module Tools 支持的生命周期钩子。
 
 目前主要包含两类生命周期钩子：
 
@@ -337,7 +337,7 @@ export interface DevToolData {
 }
 ```
 
-<!-- :::tip{title='关于 disableRunBuild 配置'}
+<!-- :::tip 关于 disableRunBuild 配置
 在调试项目的时候，如果仅需要对代码功能进行调试的话，也许可以设置 `disableRunBuild: true` 来关闭对于源码执行（监听模式下的）构建任务。
 
 目前支持的 Storybook 调试支持将源码产物作为调试对象，因此在 Storybook 插件中 `disableRunBuild: false`。

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

@@ -4,13 +4,10 @@ sidebar_position: 1
 
 # 深入理解构建
 
-在【基础使用】的部分，我们已经知道可以通过 `buildConfig` 配置对项目的输出产物进行修改。`buildConfig` 不仅描述了产物的一些特性，同时还为构建产物提供了一些功能。
-
-:::tip{title=注意}
-如果你还不清楚 `buildConfig` 是什么，建议花一些时间通过下面的链接了解一下：
-
-- 【[修改输出产物](/guide/basic/modify-output-product)】
+在 "基础使用" 的部分，我们已经知道可以通过 `buildConfig` 配置对项目的输出产物进行修改。`buildConfig` 不仅描述了产物的一些特性，同时还为构建产物提供了一些功能。
 
+:::tip
+如果你还不了解 `buildConfig` 的作用，请先阅读 [修改输出产物](/guide/basic/modify-output-product)。
 :::
 
 而在本章里我们将要深入理解某些构建配置的使用以及了解执行 `modern build` 命令的时候发生了什么。
@@ -43,7 +40,7 @@ Bundleless 是单文件编译模式，因此对于类型的引用和导出你需
 - 当 `buildType: 'bundle'` 的时候，`input` 默认值为 `src/index.(j|t)sx?`
 - 当 `buildType: 'bundleless'` 的时候，`input` 默认值为 `['src']`
 
-:::warning {title=注意}
+:::warning
 建议不要在 Bundleless 构建过程中指定多个源码文件目录，这可能会导致产物里的相对路径不正确。
 :::
 

package/docs/zh/guide/advance/theme-config.mdx

@@ -45,7 +45,7 @@ export default {
 
 我们可以在代码中有两种使用 tailwindcss 的方式。
 
-#### HTML 类名。
+#### HTML 类名
 
 ```tsx ./src/index.tsx
 import 'tailwindcss/utilities.css';

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

@@ -6,7 +6,7 @@ sidebar_position: 1
 
 ## 环境准备
 
-为了使用 Modern.js 模块工程解决方案，首先需要 [NodeJS](https://nodejs.org/zh/)，我们推荐最新的[长期维护版本](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.18.0**。因为非稳定的 NodeJS 时常有一些 Bug，你可以使用 [nvm-windows](https://github.com/coreybutler/nvm-windows) 和 [nvm](https://github.com/nvm-sh/nvm)（Mac/linux）安装，这样你就可以方便地切换到不同的 NodeJS 版本，这些版本可能会用于不同的项目。
+为了使用 Modern.js 模块工程解决方案，首先需要 [NodeJS](https://nodejs.org/zh/)，我们推荐最新的[长期维护版本](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.18.0**。因为非稳定的 NodeJS 时常有一些 Bug，你可以使用 [nvm-windows](https://github.com/coreybutler/nvm-windows) 和 [nvm](https://github.com/nvm-sh/nvm)（Mac / Linux）安装，这样你就可以方便地切换到不同的 NodeJS 版本，这些版本可能会用于不同的项目。
 
 ## 初识 npm
 

package/docs/zh/guide/basic/command-preview.md

@@ -32,7 +32,7 @@ Options:
 
 除了以上，模块工程还支持 `platform` 构建模式，可以用于执行其他工具的构建任务。例如，目前官方支持在安装了 `@modern-js/plugin-storybook` 插件后，可以通过执行 `modern build --platform` 或者 `modern build --platform storybook` 命令启动 Storybook 构建任务生成 Storybook 产物。
 
-:::tip{title=注意}
+:::tip
 在执行 Storybook 构建的时候，如果需要读取项目的构建产物。那么**在执行 `modern build --platform` 命令启动 Storybook 构建之前，不要忘记先执行 `modern build` 命令确保项目构建产物的存在**。
 :::
 
@@ -185,7 +185,7 @@ Options:
 
 根据当前仓库的 changeset 信息自动生成 [Release Note](https://en.wikipedia.org/wiki/Release_notes)。
 
-:::tip{title=注意}
+:::tip
 需要在 `bump` 命令之前执行。
 :::
 

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

@@ -9,7 +9,7 @@ sidebar_position: 5
 - [使用微生成器开启 Storybook 调试](/guide/basic/use-micro-generator#storybook-调试)
 - [`modern dev`](/guide/basic/command-preview#modern-dev)
 
-[Storybook](https://storybook.js.org/) 是一个专门用于组件调试的工具，围绕着组件开发提供了：
+[Storybook](https://storybook.js.org/) 是一个专门用于组件调试的工具，它围绕着组件开发提供了：
 
 - 丰富多样的调试能力
 - 可与一些测试工具结合使用
@@ -17,9 +17,9 @@ sidebar_position: 5
 - 可分享能力
 - 工作流程自动化
 
-因此它是一个复杂且功能强大的工具。
+因此 Storybook 是一个复杂且功能强大的工具。
 
-模块工程解决方案集成了 Storybook，因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下。
+Module Tools 集成了 Storybook，因此你几乎可以按照 Storybook 官方文档的内容进行使用。不过依然有一些地方需要注意，接下来讲解一下。
 
 ## 调试代码
 
@@ -169,11 +169,11 @@ export default {
 ```
 
 
-:::tip{title='为什么不推荐使用源码的方式?'}
+:::tip 为什么不推荐使用源码的方式?
 不仅仅是因为使用组件源码无法验证组件产物是否正确，**同时模块工程对于构建产物支持的一些配置无法完全转换为 Storybook
 内部的配置**。如果某些配置无法进行相互转换的话，就会在 Storybook 调试过程中出现不符合预期的结果。
 
-Module Tools 是基于 Esbuild 实现的，而 Storybook 是基于 Webpack 实现的。Esbuild 的配置无法与 Webpack 完全兼容。
+Module Tools 是基于 esbuild 实现的，而 Storybook 是基于 Webpack 实现的。esbuild 的配置无法与 Webpack 完全兼容。
 :::
 
 ## 配置 Storybook

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

@@ -11,7 +11,7 @@ sidebar_position: 1
 <CH.Spotlight>
 
 ```bash 交互式问题
-npx @modern-js/create components-project
+npx @modern-js/create@latest components-project
 
 ? 请选择你想创建的工程类型：Npm 模块
 ? 请填写项目名称：components-demo
@@ -24,7 +24,7 @@ npx @modern-js/create components-project
 推荐使用 `@modern-js/create` 命令来初始化一个 npm 项目。
 
 ```bash 交互式问题
-npx @modern-js/create components-project
+npx @modern-js/create@latest components-project
 
 ? 请选择你想创建的工程类型：Npm 模块
 ? 请填写项目名称：components-demo
@@ -275,7 +275,7 @@ e b {
 
 模块工程支持使用 Less 开发样式。
 
-> 目前支持的版本为 4.1.3
+> 目前内置的 Less 版本为 v4.1.3
 
 <CH.Spotlight>
 
@@ -314,7 +314,7 @@ div {
 
 模块工程支持使用 Scss/Sass 开发样式。
 
-> 目前支持的版本为 1.54.4
+> 目前内置的 Sass 版本为 v1.54.4
 
 <CH.Spotlight>
 

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

@@ -8,7 +8,36 @@ sidebar_position: 3
 
 想要实际体验 Module Tools？首先需要安装 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 **14.18.0**。我们推荐使用 Node.js 16 的 LTS 版本。
 
-然后在你的项目里安装以下依赖：
+### 创建新项目
+
+**如果你想要创建一个完整的模块工程项目，可以执行以下命令：**
+
+```bash
+npx @modern-js/create your-project-dir-name
+```
+
+:::info
+执行 `npx @modern-js/create -h` 查看更多命令行参数
+:::
+
+接着在问题交互中，按照如下选择：
+
+```bash
+? 请选择你想创建的工程类型：Npm 模块
+? 请填写项目名称：library
+? 请选择开发语言：TS
+? 请选择包管理工具：pnpm
+```
+
+> 项目名称为 `package.json` 中的 `"name"` 字段值。
+
+接着就会开始初始化项目的流程。在项目目录和文件生成以及依赖安装完毕后，此时就创建了一个完整的模块工程项目。
+
+我们可以直接执行 `pnpm build` 命令启动项目的构建，执行 `pnpm build --watch` 命令开启构建的观察模式。
+
+### 接入已有项目
+
+在你的项目里安装以下依赖：
 
 - `"@modern-js/module-tools"`
 - `"typescript"`（如果不是 TypeScript 项目，则省略）
@@ -21,12 +50,12 @@ npm install -D @modern-js/module-tools typescript
 
 接着在项目的根目录下创建 `modern.config.(t|j)s` 文件：
 
-``` ts
+```ts
 import moduleTools, { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
-    plugins: [moduleTools()],
-})
+  plugins: [moduleTools()],
+});
 ```
 
 最后在项目的 `package.json` 文件里增加命令 `"build": "modern build"`：
@@ -41,6 +70,8 @@ export default defineConfig({
 
 如果你的项目存在 `src/index.(js|jsx)` 文件或者同时存在 `src/index.(ts|tsx)` 和 `tsconfig.json` 文件，那么恭喜你可以运行直接运行 `npm run build` 来使用 Module Tools 构建你的项目了。
 
+### 查看官方示例
+
 **如果你想要看看使用了模块工程方案的完整项目，可以执行以下命令**：
 
 ```bash
@@ -60,31 +91,6 @@ pnpm dev storybook
 pnpm test
 ```
 
-**如果你想要创建一个完整的模块工程项目，可以执行以下命令：**
-
-```bash
-npx @modern-js/create your-project-dir-name
-```
-
-:::info
-执行 `npx @modern-js/create -h` 查看更多命令行参数
-:::
-
-接着在问题交互中，按照如下选择：
-
-```bash
-? 请选择你想创建的工程类型：Npm 模块
-? 请填写项目名称：library
-? 请选择开发语言：TS
-? 请选择包管理工具：pnpm
-```
-
-> 项目名称为 `package.json` 中的 `"name"` 字段值。
-
-接着就会开始初始化项目的流程。在项目目录和文件生成以及依赖安装完毕后，此时就创建了一个完整的模块工程项目。
-
-我们可以直接执行 `pnpm build` 命令启动项目的构建，执行 `pnpm build --watch` 命令开启构建的观察模式。
-
 ## 让我们开始吧
 
 选择适合你的教程：

package/docs/zh/guide/intro/welcome.md

@@ -15,4 +15,4 @@ Module Tools 是 Modern.js 的模块工程解决方案，同时也是核心依
 - **集成 Jest 的测试能力**：在需要对模块测试的时候，可以使用 Module Tools 的 `modern test` 命令。Module Tools 不仅集成了 [Jest](https://jestjs.io/)，同时也提供了配置 [Jest](https://jestjs.io/docs/configuration) 的 API。
 - **基于 Changesets 实现的版本管理**：当需要对项目记录变更内容的时候，可以使用 `modern change` 命令生成包含变更内容的 Markdown 文件；当需要对项目进行版本升级的时候，可以使用 `modern bump` 命令通过 Markdown 文件分析并升级版本；当需要发布项目的时候，可以使用 `modern release` 命令对项目进行发布。Module Tools 基于 [Changesets](https://github.com/changesets/changesets) 实现了这些命令。
 - **可扩展性的插件机制**：想要为项目集成其他的调试工具？又或者是想要在构建过程中做一些额外处理？Module Tools 提供了插件机制和插件钩子，插件钩子覆盖了 `dev` 命令和 `build` 命令两个流程。你可以通过它们为项目进行能力的扩展。
-- **还有更多**：Module Tools 在未来还会不断的在构建、调试功能上进行优化。如果在模块项目构建上存在需要解决的重要问题，又或者是某个主流的模块项目调试工具、模式出现的时候，那么它们很可能成为 Module Tools 将要支持功能。
+- **还有更多**：Module Tools 在未来还会不断地在构建、调试功能上进行优化。如果在模块项目构建上存在需要解决的重要问题，又或者是某个主流的模块项目调试工具、模式出现的时候，那么它们很可能成为 Module Tools 将要支持功能。

package/docs/zh/index.md

@@ -14,8 +14,8 @@ hero:
       link: /guide/intro/getting-started
 
 features:
-  - title: 'Esbuild: 高性能的 JS Bundler'
-    details: 基于 Esbuild 构建，构建速度极快，带给你极致的开发体验。
+  - title: 'esbuild: 高性能的 JS Bundler'
+    details: 基于 esbuild 构建，构建速度极快，带给你极致的开发体验。
     icon: 🚀
   - title: '双构建模式'
     details: 支持 Bundle 和 Bundleless 两种构建模式。

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

@@ -6,7 +6,7 @@ sidebar_position: 1
 
 模块工程解决方案不仅提供了丰富的功能，同时也支持通过插件的方式为当前项目扩展能力。
 
-我们可以通过下面的例子来快速了解如果编写一个 module-tools 插件：
+我们可以通过下面的例子来快速了解如何编写一个 Module Tools 插件：
 
 <CH.Spotlight>
 

package/docs/zh/plugins/guide/setup-function.mdx

@@ -106,7 +106,7 @@ export default (): CliPlugin<ModuleTools> => ({
 
 ## 生命周期钩子
 
-我们知道 `setup` 函数会返回一个 Hooks 对象，所谓 Hooks 对象也可以理解是具有 module-tools 生命周期钩子的对象。
+我们知道 `setup` 函数会返回一个 Hooks 对象，所谓 Hooks 对象也可以理解是具有 Module Tools 生命周期钩子的对象。
 
 目前主要包含两类钩子：
 

package/modern.config.ts

@@ -42,7 +42,7 @@ function getNavbar(lang: 'zh' | 'en'): NavItem[] {
         },
         {
           text: getText('贡献指南', 'Contributing'),
-          link: 'https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md',
+          link: 'https://modernjs.dev/en/community/contributing-guide.html',
         },
       ],
     },

package/package.json

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