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

修改输出产物

默认输出产物

当你在初始化的项目里使用 modern build 命令的时候，Modern.js Module 会根据当前配置内容，生成相应的构建产物。

模板创建的默认配置内容如下：

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

export default defineConfig({
  // 注册 Modern.js Module 的 CLI 工具
  plugins: [moduleTools()],
  // 指定构建预设配置
  buildPreset: 'npm-library',
});

默认生成产物具有以下特点：

  • 会生成 CommonJS 和 ESM 两份产物。
  • 代码语法支持到 ES6 ,更高级的语法将会被转换。
  • 所有的代码经过打包变成了一个文件，即进行了 bundle 处理。
  • 产物输出根目录为项目下的 dist 目录，类型文件输出的目录为 dist/types。

看到这里你可能会有以下疑问：

  1. buildPreset 是什么？
  2. 产物的这些特点是由什么决定的？

接下来，我们首先来了解一下 buildPreset。

构建预设

buildPreset 代表着提前准备好的一组或者多组构建相关的配置，只需要使用 buildPreset 对应的预设值，就可以省去麻烦且复杂的配置工作，得到符合预期的产物。

Modern.js Module 主要内置了两套构建预设，包括:

  • npm-component: 用于构建组件库。
  • npm-library: 用于打包其他库类型的项目，如工具库。

同时，还提供一些变体，例如 npm-library-with-umd 和 npm-library-es5，顾名思义，分别对应带有 umd 产物和支持到 es5 语法的库预设。 详细配置可以查看其 API 。

除此之外，我们也可以完全自定义构建配置:

构建配置

buildConfig 是一个用来描述如何编译、生成构建产物的配置项。在最开始提到的关于“构建产物的特点”，其实都是 buildConfig 所支持的属性。目前所支持的属性覆盖了大部分模块类型项目在构建产物时的需求，buildConfig 不仅包含一些产物所具备的属性，也包含了构建产物所需要的一些特性功能。接下来从分类的角度简单罗列一下：

构建产物的基本属性包括：

构建产物所需的常用功能包括：

一些高级属性或者使用频率不高的功能：

除了以上分类以外，关于这些 API 的常见问题和最佳实践可以通过下面的链接来了解：

结合配置与预设

了解 buildPreset 和 buildConfig 之后，我们可以将二者进行结合使用。

在实际项目中,我们可以先使用 buildPreset 来快速获取一套默认构建配置。如果需要自定义,可以使用 buildConfig 进行覆盖和扩展。

扩展的逻辑如下:

  • 当 buildConfig 是数组时，会在原来的预设基础上添加新的配置项。
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'
    }
  ]
});

这会在原本预设的基础上，额外生成一份 IIFE 格式、支持到 ES2020 语法的产物，输出目录为项目下的 dist/global 目录。

  • 当 buildConfig 是对象时,会将对象中的配置项覆盖到预设中。
modern.config.ts
import { moduleTools, defineConfig } from '@modern-js/module-tools';
export default defineConfig({
  plugins: [moduleTools()],
  buildPreset: 'npm-library',
  buildConfig: {
    sourceMap: true,
  }
});

这会使得每一项构建任务都会生成 sourceMap 文件。

目录