Modern.js Module
Guide
API
Plugins
Guide
API
Plugins

Modify the output

Default output artifacts

When you use the modern build command in an initialized project, Modern.js Module will generate corresponding build artifacts based on the current configuration.

The default configuration is as follows:

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

export default defineConfig({
  // Register the CLI tool of Modern.js Module
  plugins: [moduleTools()],
  // Specify the build preset configuration
  buildPreset: 'npm-library',
});

The default output files has the following characteristics.

  • will generate CommonJS and ESM.
  • The code syntax is supported up to ES6 , and more advanced syntax will be converted.
  • All code is bundled into one file, i.e. bundle processing is performed.
  • The output root directory is the dist directory under the project, and the type file output directory is dist/types.

You may have the following questions when you see this.

  1. what is buildPreset?
  2. what determines these characteristics of the product?

Then the next step is to first explain buildPreset.

buildPreset

The buildPreset represents a prepared set or sets of build-related configurations that can be used to eliminate the trouble and complexity of configuration by using the default values corresponding to the build Preset, resulting in the expected product.

Modern.js Module mainly comes with two built-in build presets, including:

  • npm-component: Used to build component libraries.
  • npm-library: Used to package projects of other library types, such as tool libraries.

It also provides some variations, such as npm-library-with-umd and npm-library-es5, which, as their names suggest, correspond to library presets with umd output and support for es5 syntax, respectively. For more detailed configuration, you can refer to its API.

In addition, we can also fully customize the build configuration:

buildConfig

buildConfig is a configuration option that describes how to compile and generate build artifacts. What was mentioned at the beginning about "features of build artifacts" are actually properties supported by buildConfig. The currently supported properties cover the needs of most module type projects when building artifacts. buildConfig not only contains some properties that artifacts have, but also contains some features needed to build artifacts. The following is a brief list from a classification point of view.

The basic attributes of a build artifacts include:

Common functions required for build artifacts include:

Some advanced properties or less frequently used functions:

In addition to the above categories, frequently asked questions and best practices about these APIs can be found at the following links

Combining Configuration and Presets

Once we understand buildPreset and buildConfig, we can use them together.

In a real project, we can use buildPreset to quickly get a set of default build configurations. If you need to customise it, you can use buildConfig to override and extend it.

The extension logic is as follows.

  • When buildConfig is an array, new configuration items are added to the original preset.
modern.config.ts
import { moduleTools, defineConfig } from '@modern-js/module-tools';

export default defineConfig({
  plugins: [moduleTools()],
  buildPreset: 'npm-library',
  buildConfig: [
    {
      format: 'iife',
      target: 'es2020',
      outDir: '. /dist/global'
    }
  ]
});

This will generate an additional IIFE-formatted product that supports up to ES2020 syntax on top of the original preset, in the dist/global directory under the project.

  • When buildConfig is an object, the configuration items in the object are overwritten in the preset.
modern.config.ts
import { moduleTools, defineConfig } from '@modern-js/module-tools';
export default defineConfig({
  plugins: [moduleTools()],
  buildPreset: 'npm-library',
  buildConfig: {
    sourceMap: true,
  },
}).

This will cause a sourceMap file to be generated for each build task.