---
sidebar_position: 2
---

# buildPreset

构建的预设字符串或者预设函数。提供开箱即用的构建配置。

- 类型：`string | Function`
- 默认值: `undefined`


## `npm-library`

在类 [NPM](https://www.npmjs.com/) 包管理器下使用的 Library 通用模式，包含 `esm` 和 `cjs` 两种 Bundle 产物，并且包含一份类型文件。

:::info
关于类 [NPM](https://www.npmjs.com/) 包管理器

- [npm](https://www.npmjs.com)
- [yarn](https://yarnpkg.com/)
- [pnpm](https://pnpm.io/)

:::

```json title="package.json"
{
  "main": "./dist/lib/index.js",
  "module": "./dist/es/index.js",
  "types": "./dist/types/index.d.ts"
}
```

预设字符串对应的构建配置：

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

## `npm-library-with-umd`

在类 [NPM](https://www.npmjs.com/) 包管理器下使用，并且 Library 支持类似 [unpkg](https://unpkg.com/) 的模式。在预设 `'npm-library'` 的基础上，额外提供 `umd` 产物。

```json title="package.json"
{
    "main": "./dist/lib/index.js",
    "module": "./dist/es/index.js",
    "types": "./dist/types/index.d.ts",
    "unpkg": "./dist/umd/index.js",
};
```

预设字符串对应的构建配置：

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

## `npm-component`

在类 [NPM](https://www.npmjs.com/) 包管理器下使用的 组件（库）通用模式。包含 `esm` 和 `cjs` 两种 Bundleless 产物（便于 _[Tree shaking](https://developer.mozilla.org/zh-CN/docs/Glossary/Tree_shaking)_ 优化），以及包含一份类型文件。

```json title="package.json"
{
    "main": "./dist/lib/index.js", // bundleless type
    "module": "./dist/es/index.js", // bundleless type
    "types": "./dist/types/index.d.ts",
};
```

预设字符串对应的构建配置：

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

## `npm-component-with-umd`

在类 [NPM](https://www.npmjs.com/) 包管理器下使用的组件（库），同时支持类 [unpkg](https://unpkg.com/) 的模式。 在预设 `'npm-component'` 的基础上，额外提供 `umd` 产物。

```json title="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',
    dts: false,
  },
  {
    format: 'esm',
    target: 'es6',
    buildType: 'bundleless',
    outDir: './dist/es',
    dts: false,
  },
  {
    format: 'umd',
    target: 'es6',
    platform: 'browser',
    buildType: 'bundle',
    outDir: './dist/umd',
    dts: false,
  },
  {
    buildType: 'bundleless',
    outDir: './dist/types',
    dts: {
      only: true,
    },
  },
];
```

## `npm-library-{es5...esnext}`

当想要使用支持其他 ECMAScript 版本的 `buildPreset` 预设的时候，可以直接在 `'npm-library'`、`'npm-library-with-umd'`、`'npm-component'`、`'npm-component-with-umd'` 这些预设值后面增加想要支持的版本。

例如希望 `'npm-library'` 预设支持 `'es2017'`，则可以按照如下方式配置：

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

export default defineConfig({
  buildPreset: 'npm-library-es2017',
});
```

## string / function

buildPreset 除了支持基本的字符串形式，还支持函数形式，可以通过 `preset` 或者 `extendPreset` 参数获取我们提供的预设值，然后进行修改。

以下是两个分别使用 `preset` 和 `extendPreset` 的例子：

```js title="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.define = {
        VERSION: '1.0.1',
      };
      return config;
    });
  },
});
```

`extendPreset` 里会使用 lodash.merge 进行配置合并

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

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