---
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 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 package.json
{
  "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: './dist/lib',
  },
  {
    format: 'esm',
    target: 'es6',
    buildType: 'bundle',
    outDir: './dist/es',
  },
  {
    buildType: 'bundle',
    outDir: './dist/types',
    dts: {
      only: true,
    },
  },
];
```

### `'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 package.json
{
    "main": ". /dist/lib/index.js",
    "module": ". /dist/es/index.js",
    "types": ". /dist/types/index.d.ts",
    "unpkg": ". /dist/umd/index.js",
};
```

The build configuration corresponding to the preset string.

```js
export const buildConfig = [
  {
    format: 'cjs',
    target: 'es6',
    buildType: 'bundle',
    outDir: './dist/lib',
  },
  {
    format: 'esm',
    target: 'es6',
    buildType: 'bundle',
    outDir: './dist/es',
  },
  {
    format: 'umd',
    target: 'es6',
    buildType: 'bundle',
    outDir: './dist/umd',
  },
  {
    buildType: 'bundle',
    outDir: './dist/types',
    dts: {
      only: true,
    },
  },
];
```

### `'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.

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 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
export const buildConfig = [
  {
    format: 'cjs',
    target: 'es6',
    buildType: 'bundleless',
    outDir: './dist/lib',
  },
  {
    format: 'esm',
    target: 'es6',
    buildType: 'bundleless',
    outDir: './dist/es',
  },
  {
    buildType: 'bundleless',
    outDir: './dist/types',
    dts: {
      only: true,
    },
  },
];
```

### `'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 package.json
{
    "main": ". /dist/lib/index.js", // bundleless type
    "module": ". /dist/es/index.js", // bundleless type
    "types": ". /dist/types/index.d.ts",
    "unpkg": ". /dist/umd/index.js",
};
```

```js
export const buildConfig = [
  {
    format: 'cjs',
    target: 'es6',
    buildType: 'bundleless',
    outDir: './dist/lib',
  },
  {
    format: 'esm',
    target: 'es6',
    buildType: 'bundleless',
    outDir: './dist/es',
  },
  {
    format: 'umd',
    target: 'es6',
    buildType: 'bundle',
    outDir: './dist/umd',
  },
  {
    buildType: 'bundleless',
    outDir: './dist/types',
    dts: {
      only: true,
    },
  },
];
```

### 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.

```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 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 modern.config.ts
import { defineConfig } from '@modern-js/module-tools';

export default defineConfig({
  buildPreset({ preset }) {
    const { NPM_LIBRARY } = preset;
    return NPM_LIBRARY.map(config => {
      config.minify = {
        compress: {
          drop_console: true,
        },
      };
      return config;
    });
  },
});
```

### Function Parameters

The function form of `buildPreset` contains a function parameter in the form of an object. The object contains the following fields.

* `preset`
* `extendPreset`

#### `preset`

Type: **Object**

Contains the build configurations corresponding to all available build presets. Build configurations can be used by means of the strings supported by `buildPreset` or by means of underscore commands for those strings. The following are examples of the use of both approaches.

<CH.Spotlight>

```ts modern.config.ts
import { defineConfig } from '@modern-js/module-tools';

export default defineConfig({
  buildPreset({ preset }) {
    return preset['npm-library'];
  },
});
```
---

Use the strings supported by `buildPreset`.

```ts modern.config.ts
import { defineConfig } from '@modern-js/module-tools';

export default defineConfig({
  buildPreset({ preset }) {
    return preset['npm-library'];
  },
});
```

---

Use the underscore naming convention for strings supported by `buildPreset`.

```ts modern.config.ts
import { defineConfig } from '@modern-js/module-tools';

export default defineConfig({
  buildPreset({ preset }) {
    return preset.NPM_LIBRARY;
  },
});
```

</CH.Spotlight>

#### `extendPreset`

Type: `Function`

Tool function for extending a `buildPreset` to modify the build configuration corresponding to the `buildPreset`.

> The base uses something like `{...oldBuildConfig, ...extendBuildConfig}` approach to processing.

For example, adding the `define` configuration to the `'npm-library'` build preset.

```ts modern.config.ts
import { defineConfig } from '@modern-js/module-tools';

export default defineConfig({
  buildPreset({ extendPreset }) {
    return extendPreset('npm-library', {
      define: {
        VERSION: '1.0.1',
      },
    });
  },
});
```

