@modern-js/module-tools-docs 2.29.0 → 2.31.0

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

@@ -6,7 +6,7 @@ sidebar_position: 3
 
 ## 3 minute demo
 
-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.
+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 18.
 
 ### Create new project
 
@@ -53,7 +53,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
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -73,6 +73,25 @@ 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.
 
+### Core npm Package
+
+`@modern-js/module-tools` is the core npm package of Module Tools, providing the following capabilities:
+
+- It offers commonly used CLI commands such as `modern dev`, `modern build`, and more.
+- It integrates Modern.js Core, providing capabilities for configuration parsing, plugin loading, and more.
+- It integrates esbuild and SWC, providing build capabilities.
+- It integrates some commonly used plugins, such as `plugin-lint`, `plugin-changeset`, and others.
+
+`@modern-js/module-tools` is implemented based on the plugin system of Modern.js. Essentially, it is a plugin. Therefore, you need to register `moduleTools` in the `plugins` field of the configuration file:
+
+```ts title="modern.config.ts"
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+
+export default defineConfig({
+  plugins: [moduleTools()],
+});
+```
+
 ### View official example
 
 **If you want to see the complete project using the modular engineering scheme, you can execute the following command**.

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

@@ -8,9 +8,9 @@ Module engineering solution not only provides a rich set of features, but also s
 
 We can quickly see how to write a Module Tools plugin by using the following example.
 
-<CH.Spotlight>
+1. First we create `. /plugins/example.ts` file under the initialized project.
 
-```md . /project
+```md title=". /project"
 . /project .
 ├── plugins
 │ └── example.ts
@@ -18,17 +18,7 @@ We can quickly see how to write a Module Tools plugin by using the following exa
 └── modern.config.ts
 ```
 
----
-
-First we create `. /plugins/example.ts` file under the initialized project.
-
-```md . /project
-
-```
-
----
-
-Next add the code for the plugin to the `example.ts` file.
+2. Next add the code for the plugin to the `example.ts` file.
 
 ```ts
 import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';
@@ -42,36 +32,30 @@ export const ExamplePlugin = (): CliPlugin<ModuleTools> => {
         // use hooks
         afterBuild() {
           console.info('build over');
-        }
+        },
       };
     },
   };
 };
 ```
 
----
-
-Then we register the plugin we just wrote via the [`plugins`](/en/api/config/plugins) API.
+3. Then we register the plugin we just wrote via the [`plugins`](/en/api/config/plugins) API.
 
-```ts . /modern.config.ts
+```ts title=". /modern.config.ts"
 import { examplePlugin } from '. /plugins/example';
 export default defineConfig({
   plugins: [examplePlugin()],
 });
 ```
 
----
-
-Finally, run `modern build` and you will see.
+4. Finally, run `modern build` and you will see:
 
-```bash terminal
+```bash title="terminal"
 This is example plugin
 Build succeed: 510.684ms
 build over
 ```
 
-</CH.Spotlight>
-
 With the above example, we learned the following things.
 
 - The recommended plugin directory structure

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

@@ -11,9 +11,7 @@ The Module Tools plugin is an object, and the object contains the following prop
 
 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.
 
-<CH.Code>
-
-```ts . /plugins/demo.tsx
+```ts title=". /plugins/demo.tsx"
 import type { CliPlugin, ModuleTools } from '@modern-js/module-tools';
 
 const myPlugin: CliPlugin<ModuleTools> = {
@@ -30,17 +28,13 @@ const myPlugin: CliPlugin<ModuleTools> = {
 };
 ```
 
----
-
-```ts . /modern.config.ts
+```ts title="modern.config.ts"
 import { myPlugin } from '. /plugins/demo';
 export default {
   plugins: [myPlugin()],
 };
 ```
 
-</CH.Code>
-
 ## Plugin type definitions
 
 When using TypeScript, you can introduce the built-in `CliPlugin` and `ModuleTools` types to provide the correct type derivation for plugins: ``

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

@@ -92,79 +92,36 @@ Some configurations can accept functions, such as `customName`, `customStyleName
 
 Simple function logic can be replaced by template language. Therefore, for configurations such as `customName`, `customStyleName`, etc., instead of passing functions, you can also pass a string as a template to replace the function, improving performance.
 
-<CH.Spotlight>
+We will use the following code as example:
 
 ```ts
 import { MyButton as Btn } from 'foo';
 ```
 
----
-
-We will use this piece of code for illustration.
-
-```ts
-import { MyButton as Btn } from 'foo';
-```
-
----
-
 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';
-
-export default defineConfig({
-  plugins: [
-    moduleTools(),
-    modulePluginImport({
-      pluginImport: [
-        {
-          libraryName: 'foo',
-          customName: 'foo/es/{{ member }}',
-        },
-      ],
-    }),
+modulePluginImport({
+  pluginImport: [
+    {
+      libraryName: 'foo',
+      customName: 'foo/es/{{ member }}',
+    },
   ],
 });
 ```
 
----
-
-The `{{ member }}` in it will be replaced with the corresponding import member.
-
-```ts focus=8:8
-import { modulePluginImport } from '@modern-js/plugin-module-import';
-
-export default defineConfig({
-  plugins: [
-    modulePluginImport({
-      pluginImport: [
-        {
-          libraryName: 'foo',
-          customName: 'foo/es/{{ member }}',
-        },
-      ],
-    }),
-  ],
-});
-```
-
----
-
-After transformation:
+The `{{ member }}` in it will be replaced with the corresponding import member. After transformation:
 
 ```ts
 import Btn from 'foo/es/MyButton';
 ```
 
-</CH.Spotlight>
-
 Template `customName: 'foo/es/{{ member }}'` is the same as `` customName: (member) => `foo/es/${member}` ``, but template value has no performance overhead of Node-API.
 
 The template used here is [handlebars](https://handlebarsjs.com). There are some useful builtin tools, Take the above import statement as an example:
 
-```ts focus=8:8
+```ts
 import { modulePluginImport } from '@modern-js/plugin-module-import';
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 

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

@@ -52,7 +52,7 @@ type NodePolyfillOptions = {
 
 Exclude the Node Polyfill to be injected.
 
-``` ts focus=7:9
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';
 
@@ -70,7 +70,7 @@ export default defineConfig({
 
 Override the built-in Node Polyfill.
 
-``` ts focus=7:9
+```ts
 import { moduleTools, defineConfig } from '@modern-js/module-tools';
 import { modulePluginNodePolyfill } from '@modern-js/plugin-module-node-polyfill';