Modern.js Module
Guide
API
Plugins
Guide
API
Plugins

buildPreset

A build preset string or preset function. Provides out-of-the-box build configuration

  • Type: string | Function

npm-library

Library generic schema used under class NPM package manager, contains esm and cjs bundle artifacts, and includes a type file.

INFO

About the class NPM Package Manager

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.

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

Used under class NPM package manager, and Library supports a similar pattern to unpkg. Additional umd artifacts are provided on top of the pre-defined npm-library.

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.

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

A generic pattern for components (libraries) used under the class NPM package manager. Contains both esm and cjs Bundleless artifacts (for easy Tree shaking optimization), as well as including a copy of the type file.

For style files included in the source code, the artifacts provide the compiled files of the style and the source file of the style.

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.

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

Component (library) used under class NPM package manager, with support for class unpkg schema. Additional umd artifacts are provided on top of the pre-defined npm-component.

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}

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.

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

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

string / function

The buildPreset not only supports basic string forms, but also function forms, which can obtain the default values we provide through the preset or extend Preset parameter and then modify them.

Here are two examples using preset and extend Preset:

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;
    });
  },
});

In the extend Preset, lodash.merge is used for configuration 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',
      },
    });
  },
});