@modern-js/module-tools-docs 2.24.1 → 2.25.1

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

@@ -22,7 +22,7 @@ The following Hooks are triggered in order when the `build` command is executed.
 Triggered before the execution of the overall build process.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -59,7 +59,7 @@ type Return = BuildConfig;
 Based on the build configuration, Module Tools will split the overall build into multiple sub-build tasks. The Hook will be triggered before each build subtask.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -81,7 +81,7 @@ Parameters and return value types.
 Triggered after the end of each build subtask.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -109,7 +109,7 @@ export interface BuildTaskResult {
 Triggered after the end of the overall build process.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -152,7 +152,7 @@ Hooks are triggered in the following order after executing `build --platform`.
 Gets information about the tasks that need to be run when executing the `build --platform` command.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -188,7 +188,7 @@ export interface RegisterBuildPlatformResult {
 Triggers all registered build tasks when the `build --platform` command is executed. `beforeBuildPlatform` will be triggered before the execution of the overall build task.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -218,7 +218,7 @@ export interface RegisterBuildPlatformResult {
 When the `build --platform` command is executed, all registered build tasks will be triggered. `buildPlatform` will be triggered before each build task is executed.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -244,7 +244,7 @@ export interface Options {
 When the `build --platform` command is executed, all registered build tasks will be triggered. `afterBuildPlatform` will be triggered after the overall platform build task is finished.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -292,7 +292,7 @@ Register dev tool related data. Mainly contains.
 * The function to execute the dev task.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -346,7 +346,7 @@ The currently supported Storybook dev supports using source code products as dev
 Triggered before the dev task is executed after all dev tool metadata has been collected.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -395,7 +395,7 @@ const question = [
 `afterDevMenu` Triggered after selecting dev list/menu options.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -442,7 +442,7 @@ export interface DevToolData {
 Triggered before the dev task is executed.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {
@@ -477,7 +477,7 @@ export interface DevToolData {
 Triggered when the dev task process is interrupted.
 
 ``` ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup() {

package/docs/en/guide/advance/build-umd.mdx

@@ -22,7 +22,7 @@ export default defineConfig({
 
 ## Third-party dependency handling for umd products
 
-In the [[How to handle third-party dependencies]](/en/guide/advance/external-dependency) chapter, we know that we can control whether or not the project packages third-party dependencies via the [`autoExternals`](/en/api/config/build-config#autoexternal) and [`externals`](/en/api/config/build-config#externals) APIs.
+In the ["How to handle third-party dependencies"](/en/guide/advance/external-dependency) chapter, we know that we can control whether or not the project packages third-party dependencies via the [`autoExternals`](/en/api/config/build-config#autoexternal) and [`externals`](/en/api/config/build-config#externals) APIs.
 So when building umd products, we can also use it like this:
 
 <CH.Spotlight>

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

@@ -26,7 +26,7 @@ If you need to extend the dev command, or rather provide your own Module Tools d
 In general, the code to implement a debugging tool that does nothing and the associated configuration is as follows.
 
 ``` ts do-nothing.ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'do-nothing',
   setup() {
     return {

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

@@ -167,7 +167,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.
 
 ```ts title="modern.config.ts"
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [moduleTools()],
@@ -178,7 +178,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 title="modern.config.ts"
-import moduleTools from '@modern-js/module-tools';
+import { moduleTools } from '@modern-js/module-tools';
 
 export default {
   plugins: [moduleTools()],

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

@@ -2,9 +2,9 @@
 sidebar_position: 2
 ---
 
-# Command Preview
+# CLI Commands
 
-Commands available for module engineering projects.
+CLI Commands available for Module Tools projects are as follows:
 
 ## `modern build`
 

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

@@ -6,13 +6,17 @@ sidebar_position: 3
 
 ## Default output products
 
-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.
+When you use the `modern build` command in an initialized project, Module Tools will generate corresponding build products based on the current configuration.
+
+The default configuration is as follows:
 
 ```ts title="modern.config.ts"
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
+  // Register the CLI tool of Module Tools
   plugins: [moduleTools()],
+  // Specify the build preset configuration
   buildPreset: 'npm-library',
 });
 ```
@@ -58,7 +62,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.
 
 ```ts title="modern.config.ts"
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [moduleTools()],
@@ -70,11 +74,19 @@ export default defineConfig({
 });
 ```
 
-In the above code implementation, `preset.NPM_LIBRARY` corresponds to the preset string `"npm-library"`, which represents the equivalent of `"npm-library"` for multiple sets of build-related configurations. We traverse the `NPM_LIBRARY` array, which contains multiple `buildConfig` objects, using the `map` method. We made a shallow copy of the original `buildConfig` object and modified the value of the `target` after the shallow copy, specifying it as `es5`.
+In the above code implementation, `preset.NPM_LIBRARY` corresponds to the preset string `"npm-library"`, representing multiple build-related configurations equivalent to `"npm-library"`.
+
+We use the `map` method to iterate over the `NPM_LIBRARY` array, which contains multiple `buildConfig` objects. We perform a shallow copy of the original `buildConfig` object and modify the value of the `target` property in the shallow copy to be `es5`.
 
+If you want to know the specific contents included in `preset.NPM_LIBRARY`, you can refer to the [BuildPreset API](/api/config/build-preset).
+
+In addition, under the `preset` object, it not only includes `NPM_LIBRARY`, but also other similar constants.
 
 > NPM_LIBRARY`, you can check it with [BuildPreset API](/api/config/build-preset). The`preset`object contains not only`NPM_LIBRARY`, but also other similar constants.
-> We can not only use `preset.NPM_LIBRARY` to get the build configuration corresponding to `"npm-library"`, but also `preset['npm-library']` in this way.
+
+:::tip
+We can not only use `preset.NPM_LIBRARY`to get the build configuration corresponding to`"npm-library"`, but also `preset['npm-library']` in this way.
+:::
 
 So what is the `buildConfig` object here? What is the basis for the build product feature mentioned before?
 
@@ -82,7 +94,7 @@ Let's explain next.
 
 ## Build configuration (object)
 
-**`buildConfig` is a configuration object that describes how to compile and generate build products**. What was mentioned at the beginning about "_features of build products_" are actually properties supported by `buildConfig`. The currently supported properties cover the needs of most module type projects when building products. `buildConfig` not only contains some properties that products have, but also contains some features needed to build products. The following is a brief list from a classification point of view.
+**`buildConfig` is a configuration option that describes how to compile and generate build products**. What was mentioned at the beginning about "_features of build products_" are actually properties supported by `buildConfig`. The currently supported properties cover the needs of most module type projects when building products. `buildConfig` not only contains some properties that products have, but also contains some features needed to build products. The following is a brief list from a classification point of view.
 
 **The basic attributes of a build product include:**
 

package/docs/en/guide/basic/use-micro-generator.md

@@ -22,13 +22,13 @@ When we want to test some modules, we can enable the test feature. When this fea
 :::tip
 After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
 ``` ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
-import testPlugin from '@modern-js/plugin-testing';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { testingPlugin } from '@modern-js/plugin-testing';
 
 export default defineConfig({
   plugins: [
     moduleTools(),
-    testPlugin(),
+    testingPlugin(),
   ],
 });
 ```
@@ -41,8 +41,8 @@ The **Storybook feature** can be enabled when we want to debug a component or a
 :::tip
 After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
 ``` ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
-import storybookPlugin from '@modern-js/plugin-storybook';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { storybookPlugin } from '@modern-js/plugin-storybook';
 
 export default defineConfig({
   plugins: [
@@ -71,8 +71,8 @@ For more information on how to use Tailwind CSS in your module projects, check o
 :::tip
 After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
 ``` ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
-import tailwindPlugin from '@modern-js/plugin-tailwindcss';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
 
 export default defineConfig({
   plugins: [
@@ -94,7 +94,7 @@ Also, the Storybook debugging tool will determine if the project needs to use th
 :::tip
 After successfully enabling it, you will be prompted to manually add a code similar to the one below to the configuration.
 ``` ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import runtime from '@modern-js/runtime/cli';
 
 export default defineConfig({

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

@@ -605,7 +605,7 @@ When adding styles using HTML class names, by default Tailwind will not only add
 
 For the following code, there is a big difference between the bundle and bundleless modes of building products.
 
-> The so-called bundle and bundleless can be found in [[Bundle and Bundleless]](/en/guide/advance/in-depth-about-build#bundle- and-bundleless)
+> The so-called bundle and bundleless can be found in ["Bundle and Bundleless"](/en/guide/advance/in-depth-about-build#bundle- and-bundleless)
 
 ```tsx ./src/index.tsx
 import 'tailwindcss/utilities.css';
@@ -782,8 +782,8 @@ If you have special needs for the build product directory structure, you can use
 
 ## Testing components
 
-For more information on how to test components, please refer to [[Test project]](/en/guide/basic/test-your-project).
+For more information on how to test components, please refer to ["Test project"](/en/guide/basic/test-your-project).
 
 ## Releasing components
 
-It is recommended to use module project to provide version publishing function, you can refer to [[Versioning and publishing]](/en/guide/basic/publish-your-project).
+It is recommended to use module project to provide version publishing function, you can refer to ["Versioning and publishing"](/en/guide/basic/publish-your-project).

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

@@ -54,7 +54,7 @@ npm install -D @modern-js/module-tools typescript
 Next, create the `modern.config.(t|j)s` file in the root of the project.
 
 ``` ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
     plugins: [moduleTools()],

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

@@ -4,14 +4,14 @@ sidebar_position: 3
 
 # Setup function
 
-In the [[Plugin object]](/plugins/guide/plugin-object) section we know that the plug-in object contains a `setup` function that not only contains an `api` object parameter, but also returns a Hooks object.
+In the ["Plugin object"](/plugins/guide/plugin-object) section we know that the plug-in object contains a `setup` function that not only contains an `api` object parameter, but also returns a Hooks object.
 
 ## Plugin API objects
 
 The `setup` function of the plugin will provide an `api` object parameter, and you can call some of the methods provided on this object to get information about the configuration, project context, etc.
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   setup(api) {
@@ -79,7 +79,7 @@ Used to get the executors of Hooks and trigger the execution of a specific Hook.
 ```ts
 import type { CliPlugin } from '@modern-js/core';
 
-export default (): CliPlugin => ({
+export const myPlugin = (): CliPlugin => ({
   name: 'my-plugin',
 
   async setup(api) {
@@ -95,7 +95,7 @@ export default (): CliPlugin => ({
 The setup of a CLI plugin can be an asynchronous function that performs asynchronous logic during the initialization process.
 
 ```ts
-export default (): CliPlugin<ModuleTools> => ({
+export const myPlugin = (): CliPlugin<ModuleTools> => ({
   name: 'my-plugin',
 
   async setup(api) {

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

@@ -24,7 +24,7 @@ pnpm add @modern-js/plugin-module-babel -D
 You can install the plugin with the following command:
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginBabel } from '@modern-js/plugin-module-babel';
 
 export default defineConfig({
@@ -42,7 +42,7 @@ 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 { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginBabel } from '@modern-js/plugin-module-babel';
 
 export default defineConfig({

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

@@ -22,7 +22,7 @@ pnpm add @modern-js/plugin-module-banner -D
 You can install the plugin with the following command:
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginBanner } from '@modern-js/plugin-module-banner';
 
 export default defineConfig({
@@ -39,7 +39,7 @@ export default defineConfig({
 ```
 
 :::tip
-Note: CSS comments do not support the `//comment` syntax. Refer to [【CSS Comments】](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments)
+Note: CSS comments do not support the `//comment` syntax. Refer to ["CSS Comments"](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments)
 :::
 
 ## Example
@@ -48,7 +48,7 @@ Note: CSS comments do not support the `//comment` syntax. Refer to [【CSS Comme
 
 ```ts
 import { modulePluginBanner } from '@modern-js/plugin-module-banner';
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 
 const copyRight = `/*

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

@@ -3,7 +3,7 @@
 Using [SWC](https://swc.rs/) provides the same ability and configuration as [`babel-plugin-import`](https://github.com/umijs/babel-plugin-import).
 
 :::tip
-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).
+Since `@modern-js/module-tools` version >= v2.16.0, this plugin functionality is built into Module Tools and is provided by [`transformImport`](api/config/build-config.html#transformimport).
 :::
 
 ## Quick Start
@@ -26,17 +26,19 @@ 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 { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginImport } from '@modern-js/plugin-module-import';
 
 export default defineConfig({
   plugins: [
     moduleTools(),
     modulePluginImport({
-      pluginImport: [{
-        libraryName: 'antd',
-        style: true,
-      }],
+      pluginImport: [
+        {
+          libraryName: 'antd',
+          style: true,
+        },
+      ],
     }),
   ],
 });
@@ -46,17 +48,17 @@ This way we can use the ability of automatic import in Module Tools.
 
 ## Configurations
 
-* **Type**:
+- **Type**:
 
 ```ts
 type Options = {
   pluginImport?: ImportItem[];
-}
+};
 ```
 
 ### pluginImport
 
-* **Type**: `Array`
+- **Type**: `object[]`
 
 The elements of the array are configuration objects for `babel-plugin-import`, which can be referred to [options](https://github.com/umijs/babel-plugin-import#options)。
 
@@ -64,7 +66,7 @@ The elements of the array are configuration objects for `babel-plugin-import`, w
 
 ```ts
 import { modulePluginImport } from '@modern-js/plugin-module-import';
-import moduleTools, { defineConfig  } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
@@ -75,7 +77,7 @@ export default defineConfig({
         {
           libraryName: 'foo',
           style: true,
-        }
+        },
       ],
     }),
   ],
@@ -110,16 +112,18 @@ Add the following configuration on the right-hand side:
 
 ```ts
 import { modulePluginImport } from '@modern-js/plugin-module-import';
-import moduleTools, { defineConfig  } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
     moduleTools(),
     modulePluginImport({
-      pluginImport: [{
-        libraryName: 'foo',
-        customName: 'foo/es/{{ member }}'
-      }],
+      pluginImport: [
+        {
+          libraryName: 'foo',
+          customName: 'foo/es/{{ member }}',
+        },
+      ],
     }),
   ],
 });
@@ -135,16 +139,19 @@ import { modulePluginImport } from '@modern-js/plugin-module-import';
 export default defineConfig({
   plugins: [
     modulePluginImport({
-      pluginImport: [{
-        libraryName: 'foo',
-        customName: 'foo/es/{{ member }}'
-      }],
+      pluginImport: [
+        {
+          libraryName: 'foo',
+          customName: 'foo/es/{{ member }}',
+        },
+      ],
     }),
   ],
 });
 ```
 
 ---
+
 After transformation:
 
 ```ts
@@ -159,16 +166,18 @@ The template used here is [handlebars](https://handlebarsjs.com). There are some
 
 ```ts focus=8:8
 import { modulePluginImport } from '@modern-js/plugin-module-import';
-import moduleTools, { defineConfig  } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   plugins: [
     moduleTools(),
     modulePluginImport({
-      pluginImport: [{
-        libraryName: 'foo',
-        customName: 'foo/es/{{ kebabCase member }}',
-      }],
+      pluginImport: [
+        {
+          libraryName: 'foo',
+          customName: 'foo/es/{{ kebabCase member }}',
+        },
+      ],
     }),
   ],
 });

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

@@ -26,7 +26,7 @@ pnpm add @modern-js/plugin-module-node-polyfill -D
 In Module Tools, you can register plugins in the following way:
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
 
 export default defineConfig({
@@ -53,7 +53,7 @@ type NodePolyfillOptions = {
 Exclude the Node Polyfill to be injected.
 
 ``` ts focus=7:9
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
 
 export default defineConfig({
@@ -71,7 +71,7 @@ export default defineConfig({
 Override the built-in Node Polyfill.
 
 ``` ts focus=7:9
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
 
 export default defineConfig({

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

@@ -27,7 +27,7 @@ pnpm add @modern-js/plugin-module-polyfill -D
 In Module Tools, you can register plugins in the following way:
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginPolyfill } from '@modern-js/plugin-module-polyfill';
 
 export default defineConfig({
@@ -55,7 +55,7 @@ See [Babel target](https://babeljs.io/docs/options#targets).
 This is a example.
 
 ```ts
-import moduleTools, { defineConfig } from '@modern-js/module-tools';
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginPolyfill } from '@modern-js/plugin-module-polyfill';
 
 export default defineConfig({