Modern.js Module
指南
API
插件
指南
API
插件
简体中文

buildPreset

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

  • 类型：string | Function

  • 默认值: undefined

npm-library

在类 NPM 包管理器下使用的 Library 通用模式，包含 esm 和 cjs 两种 Bundle 产物，并且包含一份类型文件。

INFO

关于类 NPM 包管理器

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

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

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 包管理器下使用，并且 Library 支持类似 unpkg 的模式。在预设 'npm-library' 的基础上，额外提供 umd 产物。

package.json
{
    "main": "./dist/lib/index.js",
    "module": "./dist/es/index.js",
    "types": "./dist/types/index.d.ts",
    "unpkg": "./dist/umd/index.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 包管理器下使用的 组件（库）通用模式。包含 esm 和 cjs 两种 Bundleless 产物（便于 Tree shaking 优化），以及包含一份类型文件。

对于源码中包含的样式文件，产物中提供样式的编译产物和样式的源文件。

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

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

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 包管理器下使用的组件（库），同时支持类 unpkg 的模式。 在预设 'npm-component' 的基础上，额外提供 umd 产物。

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",
};
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'，则可以按照如下方式配置：

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

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

string / function

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

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

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 进行配置合并

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

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