修改输出产物

默认输出产物

当你在初始化的项目里使用 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',
});

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

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

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

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

接下来,我们首先来了解一下 buildPreset

构建预设

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

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

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

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

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

构建配置

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

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

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

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

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

结合配置与预设

了解 buildPresetbuildConfig 之后,我们可以将二者进行结合使用。

在实际项目中,我们可以先使用 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 文件。