dn-middleware-rollup

group: middleware name: rollup title: Rollup

dn-middleware-rollup

这是一个提供使用 Rollup 打包资源文件的中间件

功能亮点

• 同时支持 CJS 、 ESM 、 UMD、 SystemJS、 IIFE 打包格式
• 支持 TypeScript 代码打包及类型检查
• 大部分情况下只需要很少配置甚至无需配置
• 支持复杂的自定义配置场景
• 支持代码混淆压缩和 SourceMap

示例

dev:
  - name: rollup
    watch: true
  - name: server
  - name: browser-sync

build:
  - name: rollup

配置项说明

cwd

类型：string
默认值：process.cwd()

文件相对路径的起始点，默认为执行 dn 命令所在的目录，通常情况为项目的根目录

watch

类型：boolean
默认值：false

开启 Watch Mode

fullCustom

类型：boolean
默认值：false

开启配置完全自定义能力，所有的配置项不再提供任何默认值

configFile

类型：string
默认值："./rollup.config.js"

自定义配置文件路径，提供可编程的 rollup 打包配置合并或覆盖能力

合并模式（推荐）

合并模式提供在中间件自动根据配置项生成的 rollup 配置基础上，自定义进行复杂逻辑扩展的能力

module.exports = async (config, opts, ctx) => {
  // config 为当前打包实例的rollup配置
  // opts 为中间件实际执行的配置项
  // ctx 为中间件执行上下文环境
  // config.output.name = "foo";
  // 直接修改config对象，无需返回值
};

覆盖模式

覆盖模式提供完全的自定义 rollup 配置，一般不太需要使用

module.exports = async (config, opts, ctx) => {
  // config 为当前打包实例的rollup配置
  // opts 为中间件实际执行的配置项
  // ctx 为中间件执行上下文环境

  const newConfig = { ...config };

  return newConfig;
};

或

module.exports = {
  input: 'app.js',
  output: {
    file: 'bundle.js',
    format: 'umd',
  },
};

analysis

类型：boolean
默认值：false

开启打包分析功能，会产出打包内容的体积等信息，主要用于打包体积调优过程

entry

类型：string | string[]
默认值：

打包入口，如果未配置，默认会按优先级自动查找

说明：优先级顺序 src/index.tsx > src/index.ts > src/index.jsx > src/index.js

target

类型："node" | "browser"
默认值："browser"

指定编译结果的目标运行环境

说明：当配置为 "browser" 时，可通过 .browserslistrc 指定目标浏览器范围，详细说明请查看相关文档

outDir

类型：string
默认值："build"

配合 file 配置项使用，指定输出目录

file

类型：string | Object
默认值：

指定输出文件路径和文件名，对于多entry的项目，可以传入entry名与输出名的Map

说明：输出文件的最终文件名由多个条件与配置项组合后形成，详细说明请查看输出文件名说明

esm

类型：false | Object
默认值：在 Watch Mode 下默认为 false

针对 ESM 输出格式的配置，如不需要 ESM 格式，可以配置为 false

esm.file

类型：string
默认值：

指定 ESM 输出格式的输出文件路径和文件名

说明：输出文件的最终文件名由多个条件与配置项组合后形成，详细说明请查看输出文件名说明

esm.mjs

类型：boolean
默认值：false

是否额外输出后缀为 .mjs 的文件

说明：.mjs 文件始终会进行混淆压缩，不受 esm.minify 配置项影响

esm.minify

类型：boolean
默认值：false

是否开启 ESM 输出格式的混淆压缩

cjs

类型：false | Object
默认值：在 Watch Mode 下默认为 false

针对 CJS 输出格式的配置，如不需要 CJS 格式，可以配置为 false

cjs.file

类型：string
默认值：

指定 CJS 输出格式的输出文件路径和文件名

说明：输出文件的最终文件名由多个条件与配置项组合后形成，详细说明请查看输出文件名说明

cjs.minify

类型：boolean
默认值：false

是否开启 CJS 输出格式的混淆压缩

umd

类型：false | Object
默认值：

针对 UMD 输出格式的配置，如不需要 UMD 格式，可以配置为 false

umd.file

类型：string
默认值：

指定 UMD 输出格式的输出文件路径和文件名

说明：输出文件的最终文件名由多个条件与配置项组合后形成，详细说明请查看输出文件名说明

umd.name

类型：string
默认值：

指定 UMD 输出格式暴露到全局的变量名

说明：默认会根据项目 package.json 中的 name 字段动态生成，规则为 camelCase(basename(pkg.name))

umd.globals

类型：Object
默认值：

指定外部依赖的全局变量名，详细说明请查看相关文档

umd.sourcemap

类型：boolean | "inline" | "hidden"
默认值：false

是否输出 SourceMap ，详细说明请查看相关文档

umd.minFile

类型：boolean
默认值：true，在 Watch Mode 下默认为 false

是否额外输出 .min.js 文件，该文件会被混淆压缩

umd.onlyMinFile

类型：boolean
默认值：

是否仅输出 .min.js 文件

umd.template

类型：false | string
默认值："./src/assets/index.html"

当 target 为 "browser" 时，UMD 输出格式会同时输出一份 index.html 入口文件，该配置项用于指定自定义模板文件。设置为false时，会关闭入口文件的输出

说明：如果自定义模板文件不存在，会使用内置的模板进行输出。对于模板编写的详细说明，请查看入口模板文件编写说明了解更多

system

类型：false | Object
默认值：false

针对 SystemJS 输出格式的配置，如不需要 SystemJS 格式，可以配置为 false

system.file

类型：string
默认值：

指定 SystemJS 输出格式的输出文件路径和文件名

说明：输出文件的最终文件名由多个条件与配置项组合后形成，详细说明请查看输出文件名说明

system.minify

类型：boolean
默认值：false

是否开启 SystemJS 输出格式的混淆压缩

system.sourcemap

类型：boolean | "inline" | "hidden"
默认值：false

是否输出 SourceMap ，详细说明请查看相关文档

system.globals

类型：Object
默认值：

指定外部依赖的全局变量名，详细说明请查看相关文档

system.name

类型：string
默认值：

指定 SystemJS 输出格式注册的模块名称

iife

类型：false | Object
默认值：false

针对 IIFE 输出格式的配置，如不需要 IIFE 格式，可以配置为 false

iife.file

类型：string
默认值：

指定 IIFE 输出格式的输出文件路径和文件名

说明：输出文件的最终文件名由多个条件与配置项组合后形成，详细说明请查看输出文件名说明

iife.minify

类型：boolean
默认值：false

是否开启 IIFE 输出格式的混淆压缩

iife.sourcemap

类型：boolean | "inline" | "hidden"
默认值：false

是否输出 SourceMap ，详细说明请查看相关文档

iife.globals

类型：Object
默认值：

指定外部依赖的全局变量名，详细说明请查看相关文档

typescript

类型：Object
默认值：

额外的 rollup-plugin-typescript2 配置项，详细说明请查看相关文档

disableTypeCheck

类型：boolean
默认值：false

禁用类型检查

说明：该配置项主要是为了老的历史项目可以快速接入，过程中临时性禁用类型检查。对于新项目不建议禁用，类型检查可以帮助我们在编译阶段就发现可能的代码错误

runtimeHelpers

类型：boolean | string
默认值：true

透传给 dn-middleware-babel 的 runtimeHelpers 配置项，详细说明请查看相关文档

corejs

类型：false | 2 | 3 | { version: 2 | 3; proposals: boolean }
默认值：false

透传给 dn-middleware-babel 的 corejs 配置项，详细说明请查看相关文档

jsxRuntime

类型："classic" | "automatic"
默认值：

透传给 dn-middleware-babel 的 jsxRuntime 配置项，详细说明请查看相关文档

extraBabelPresets

类型：any[]
默认值：[]

透传给 dn-middleware-babel 的 extraPresets 配置项，详细说明请查看相关文档

extraBabelPlugins

类型：any[]
默认值：[]

透传给 dn-middleware-babel 的 extraPlugins 配置项，详细说明请查看相关文档

nodeVersion

类型：string | "current" | true
默认值：

透传给 dn-middleware-babel 的 nodeVersion 配置项，详细说明请查看相关文档

extractCSS

类型：boolean | string
默认值：true

额外输出独立的 CSS 文件，详细说明请查看相关文档

injectCSS

类型：boolean | Object
默认值：true

是否在 JS 中添加注入样式文件的代码，在 extractCSS 为 true 时，该配置项始终为 false ，详细说明请查看相关文档

cssModules

类型：boolean | Object
默认值：false

是否开启 CSS Module ，详细说明请查看相关文档

less

类型：Object
默认值：

透传给 less 的选项，详细说明请查看相关文档

sass

类型：Object
默认值：

透传给 node-sass 的选项，详细说明请查看相关文档

autoprefixer

类型：Object
默认值：

额外的 autoprefixer 配置项，详细说明请查看相关文档

nodeResolve

类型：Object
默认值：{}

额外的 @rollup/plugin-node-resolve 配置项，详细说明请查看相关文档

commonjs

类型：Object
默认值：{}

额外的 @rollup/plugin-commonjs 配置项，详细说明请查看相关文档

说明：仅当 UMD 输出格式时，才会启用 @rollup/plugin-commonjs 插件

alias

类型：Object | Object[]
默认值：

额外的模块别名配置，功能与 webpack 的 resolve.alias 类似，详细说明请查看相关文档

说明：对于在 tsconfig.json 中配置了 paths 的别名，无需额外配置

extraExternals

类型：string[]
默认值：[]

配置额外的外部依赖

说明：如果是已加入到 peerDependencies 或 dependencies 中的依赖，无需额外配置，详情说明请查看外部依赖说明

externalsExclude

类型：string[]
默认值：[]

配置外部依赖的排除项，需要精确到具体引用文件

inject

类型：Object
默认值：

透传给 @rollup/plugin-inject ，详细说明请查看相关文档

replace

类型：Object
默认值：

透传给 @rollup/plugin-replace ，详细说明请查看相关文档

terser

类型：Object
默认值：{}

额外的 rollup-plugin-terser 配置项，详细说明请查看相关文档

html

类型：Object
默认值：{}

除 template 外额外的 @rollup/plugin-html 配置项，详细说明请查看相关文档

json

类型：Object
默认值：{}

透传给 @rollup/plugin-json ，详细说明请查看相关文档

yaml

类型：Object
默认值：{}

透传给 @rollup/plugin-yaml ，详细说明请查看相关文档

wasm

类型：boolean | Object
默认值：false

开启对 WebAssembly 模块的打包支持。当配置成对象时，作为 @rollup/plugin-wasm 的配置项，详细说明请查看相关文档

其他

输出文件名说明

输出文件名可通过相关配置项定义，整体上由以下优先级确定：

• 具体输出格式指定的文件名
• 顶层配置项指定的文件名
• package.json 中入口字段的值
• 打包入口文件的文件名

对于 ESM 输出格式：

• 如果配置了 esm.file ：`${outDir}/${esm.file}.js`
  对于 mjs 文件：`${outDir}/${esm.file}.mjs`
• 如果配置了 file ：`${outDir}/${file}.esm.js`
  对于 mjs 文件：`${outDir}/${file}.mjs`
• 如果在 package.json 中定义了 module ：pkg.module
  对于 mjs 文件：`${getFileName(pkg.module)}.mjs`
• 以上配置都不存在时 ：`${outDir}/${basename(entry, extname(entry))}.esm.js`
  对于 mjs 文件：`${outDir}/${basename(entry, extname(entry))}.mjs`

对于 CJS 输出格式：

• 如果配置了 cjs.file ：`${outDir}/${cjs.file}.js`
• 如果配置了 file ：`${outDir}/${file}.js`
• 如果在 package.json 中定义了 main ：pkg.main
• 以上配置都不存在时：`${outDir}/${basename(entry, extname(entry))}.js`

对于 UMD 输出格式：

• 如果配置了 umd.file ：`${outDir}/${umd.file}.js`
  对于 minFile 文件：`${outDir}/${umd.file}.min.js`
• 如果配置了 file ：`${outDir}/${file}.umd.js`
  对于 minFile 文件：`${outDir}/${file}.umd.min.js`
• 如果在 package.json 中定义了 browser ：pkg.browser
  对于 minFile 文件：`${getFileName(pkg.browser)}.min.js`
• 以上配置都不存在时：`${outDir}/${basename(entry, extname(entry))}.umd.js`
  对于 minFile 文件：`${outDir}/${basename(entry, extname(entry))}.umd.min.js`

对于 SystemJS 输出格式：

• 如果配置了 system.file ：`${outDir}/${system.file}.js`
• 如果配置了 file ：`${outDir}/${file}.system.js`
• 如果在 package.json 中定义了 browser ：`${getFileName(pkg.browser)}.system.js`
• 以上配置都不存在时：`${outDir}/${basename(entry, extname(entry))}.system.js`

对于 IIFE 输出格式：

• 如果配置了 iife.file ：`${outDir}/${iife.file}.js`
• 如果配置了 file ：`${outDir}/${file}.iife.js`
• 如果在 package.json 中定义了 browser ：`${getFileName(pkg.browser)}.iife.js`
• 以上配置都不存在时：`${outDir}/${basename(entry, extname(entry))}.iife.js`

入口模板文件编写说明

底层使用 Dawn 内置的超简模板引擎 STP

根据配置项 html 及打包结果，提供了以下上下文变量可用于模板变量替换

• htmlAttr 根据 html.attributes.html 生成，默认： ' lang="en"'
• metas 根据 html.meta 生成，默认： '<meta charset="utf-8">'
• title 根据 html.title 生成，默认： 'Dawn'
• links 根据 html.publicPath 、 html.attributes.link 和打包结果中的 CSS 文件列表生成
  说明：单个文件的输出格式为 `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`
• scripts 根据 html.publicPath 、 html.attributes.script 和打包结果中的 JS 文件列表生成
  说明：单个文件的输出格式为 `<script src="${publicPath}${fileName}"${attrs}>`

默认模板的内容如下：

<!doctype html>
<html${htmlAttr}>
  <head>
    ${metas}
    <title>${title}</title>
    ${links}
  </head>
  <body>
    <div id="root"></div>
    <script>
      var mountNode = document.getElementById('root');
    </script>
    ${scripts}
  </body>
</html>

外部依赖说明

默认根据项目 package.json 中的 dependencies 和 peerDependencies 自动设置

• 对于 ESM 和 CJS 输出格式，默认使用 dependencies 和 peerDependencies 的并集作为 external
  特别说明：对于 .mjs 文件，仅使用 peerDependencies 作为 external
• 对于 UMD 输出格式，默认使用 peerDependencies 作为 external

扩展 postcss 配置

支持通过项目根目录下定义 postcss.config.js 文件进行扩展

// postcss.config.js
module.exports = context => {
  console.log(context.options.entry); // 入口文件
  console.log(context.options.type); // 输出格式
  console.log(context.options.bundleOpts); // 配置项

  return {};
};