@modern-js/module-tools-docs 2.0.0-beta.4 → 2.0.2

package/docs/en/api/{build-preset.md → config/build-preset.md}

@@ -1,56 +1,65 @@
+---
+sidebar_position: 2
+---
+
 # BuildPreset
+
 A build preset string or preset function. Provides out-of-the-box build configuration
 
 - type: `string | Function`
 - default: `undefined`
 
-
 ## string
 
 The string form allows you to use the built-in presets directly
 
-```js
-export default {
+```js modern.config.ts
+import { defineConfig } from '@modern-js/module-tools';
+
+export default defineConfig({
   buildPreset: 'npm-library',
-};
+});
 ```
 
-
 ### ``npm-library'`
+
 Library generic schema used under class [NPM](https://www.npmjs.com/) package manager, contains `esm` and `cjs` Bundle products, and includes a type file.
 
 :::info
 About the class [NPM](https://www.npmjs.com/) Package Manager
-* [npm](https://www.npmjs.com)
-* [yarn](https://yarnpkg.com/)
-* [pnpm](https://pnpm.io/)
-:::
 
-```json title="package.json"
+- [npm](https://www.npmjs.com)
+- [yarn](https://yarnpkg.com/)
+- [pnpm](https://pnpm.io/)
+  :::
+
+```json package.json
 {
-    "main": ". /dist/lib/index.js",
-    "module": ". /dist/es/index.js",
-    "types": ". /dist/types/index.d.ts",
+  "main": ". /dist/lib/index.js",
+  "module": ". /dist/es/index.js",
+  "types": ". /dist/types/index.d.ts"
 }
 ```
+
 The build configuration corresponding to the preset string.
+
 ```js
 export const buildConfig = [
   {
     format: 'cjs',
     target: 'es6',
     buildType: 'bundle',
-    outdir: '. /lib',
+    outDir: '. /lib',
   },
   {
     format: 'esm',
     target: 'es6',
     buildType: 'bundle',
-    outdir: '. /es',
+    outDir: '. /es',
   },
   {
     buildType: 'bundle',
-    outdir: '. /types',
+    outDir: '. /types',
     dts: {
       only: true,
     },
@@ -58,10 +67,11 @@ export const buildConfig = [
 ];
 ```
 
-### ``npm-library-with-umd'``
-Used under class [NPM](https://www.npmjs.com/) package manager, and Library supports a similar pattern to [unpkg](https://unpkg.com/). Additional ``umd`` products are provided on top of the pre-defined ``npm-library'`.
+### `npm-library-with-umd'`
+
+Used under class [NPM](https://www.npmjs.com/) package manager, and Library supports a similar pattern to [unpkg](https://unpkg.com/). Additional `umd` products are provided on top of the pre-defined `npm-library`.
 
-```json title="package.json"
+```json package.json
 {
     "main": ". /dist/lib/index.js",
     "module": ". /dist/es/index.js",
@@ -69,30 +79,32 @@ Used under class [NPM](https://www.npmjs.com/) package manager, and Library supp
     "unpkg": ". /dist/umd/index.js",
 };
 ```
+
 The build configuration corresponding to the preset string.
+
 ```js
 export const buildConfig = [
   {
     format: 'cjs',
     target: 'es6',
     buildType: 'bundle',
-    outdir: '. /lib',
+    outDir: '. /lib',
   },
   {
     format: 'esm',
     target: 'es6',
     buildType: 'bundle',
-    outdir: '. /es',
+    outDir: '. /es',
   },
   {
     format: 'umd',
     target: 'es6',
     buildType: 'bundle',
-    outdir: '. /umd',
+    outDir: '. /umd',
   },
   {
     buildType: 'bundle',
-    outdir: '. /types',
+    outDir: '. /types',
     dts: {
       only: true,
     },
@@ -101,36 +113,38 @@ export const buildConfig = [
 ```
 
 ### `'npm-component'`
-A generic pattern for components (libraries) used under the class [NPM](https://www.npmjs.com/) package manager. Contains both `esm` and `cjs` Bundleless products (for easy *[Tree shaking](https://developer.mozilla.org/zh-CN/docs/Glossary/Tree_shaking)* optimization), as well as including a copy of the type file.
+
+A generic pattern for components (libraries) used under the class [NPM](https://www.npmjs.com/) package manager. Contains both `esm` and `cjs` Bundleless products (for easy _[Tree shaking](https://developer.mozilla.org/zh-CN/docs/Glossary/Tree_shaking)_ optimization), as well as including a copy of the type file.
 
 For style files included in the source code, the products provide the compiled product of the style and the source file of the style.
 
-```json title="package.json"
+```json package.json
 {
     "main": ". /dist/lib/index.js", // bundleless type
     "module": ". /dist/es/index.js", // bundleless type
     "types": ". /dist/types/index.d.ts",
 };
 ```
+
 The pre-defined strings correspond to the build configuration.
 
-``` js
+```js
 export const buildConfig = [
   {
     format: 'cjs',
     target: 'es6',
     buildType: 'bundleless',
-    outdir: '. /lib',
+    outDir: '. /lib',
   },
   {
     format: 'esm',
     target: 'es6',
     buildType: 'bundleless',
-    outdir: '. /es',
+    outDir: '. /es',
   },
   {
     buildType: 'bundleless',
-    outdir: '. /types',
+    outDir: '. /types',
     dts: {
       only: true,
     },
@@ -140,8 +154,9 @@ export const buildConfig = [
 
 ### `'npm-component-with-umd'`
 
-Component (library) used under class [NPM](https://www.npmjs.com/) package manager, with support for class [unpkg](https://unpkg.com/) schema. Additional ``umd`` products are provided on top of the pre-defined ``npm-component'`.
-```json title="package.json"
+Component (library) used under class [NPM](https://www.npmjs.com/) package manager, with support for class [unpkg](https://unpkg.com/) schema. Additional `umd` products are provided on top of the pre-defined `npm-component`.
+
+```json package.json
 {
     "main": ". /dist/lib/index.js", // bundleless type
     "module": ". /dist/es/index.js", // bundleless type
@@ -149,29 +164,30 @@ Component (library) used under class [NPM](https://www.npmjs.com/) package manag
     "unpkg": ". /dist/umd/index.js",
 };
 ```
+
 ```js
 export const buildConfig = [
   {
     format: 'cjs',
     target: 'es6',
     buildType: 'bundleless',
-    outdir: '. /lib',
+    outDir: '. /lib',
   },
   {
     format: 'esm',
     target: 'es6',
     buildType: 'bundleless',
-    outdir: '. /es',
+    outDir: '. /es',
   },
-   {
+  {
     format: 'umd',
     target: 'es6',
     buildType: 'bundle',
-    outdir: '. /umd',
+    outDir: '. /umd',
   },
   {
     buildType: 'bundleless',
-    outdir: '. /types',
+    outDir: '. /types',
     dts: {
       only: true,
     },
@@ -179,26 +195,29 @@ export const buildConfig = [
 ];
 ```
 
-### About the ECMAScript versions supported by the preset and `{es5.... .esnext}`
-
+### About the ECMAScript versions supported by the presets and `{es5.... .esnext}`
 
 When you want to use a `buildPreset` preset that supports other ECMAScript versions, you can directly add the supported versions to the `'npm-library'`, `'npm-library-with-umd'`, `'npm-component'`, `'npm-component-with-umd'` presets.
 
-For example, if you want the ``npm-library'` preset to support ``es2017``, you can configure it as follows.
+For example, if you want the `` npm-library'` preset to support  ``es2017``, you can configure it as follows.
 
-```js
-export default {
+```js modern.config.ts
+import { defineConfig } from '@modern-js/module-tools';
+
+export default defineConfig({
   buildPreset: 'npm-library-es2017',
-};
+});
 ```
 
 ## Function
 
-The way the function is configured, you can get the preset value with the `preset` parameter and then modify the build configuration inside to customize your build configuration.
+The way the function is configured, you can get the preset value from the `preset` parameter and then modify the build configuration inside to customize your build configuration.
 The following is an example of how a function can be configured to compress a build product.
 
-```js
-export default {
+```js modern.config.ts
+import { defineConfig } from '@modern-js/module-tools';
+
+export default defineConfig({
   buildPreset({ preset }) {
     const { NPM_LIBRARY } = preset;
     return NPM_LIBRARY.map(config => {
@@ -210,5 +229,5 @@ export default {
       return config;
     });
   },
-}
+});
 ```