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 {};
};

dn-middleware-rollup

group: middleware name: rollup title: Rollup

dn-middleware-rollup

功能亮点

示例

配置项说明

cwd

watch

fullCustom

configFile

合并模式（推荐）

覆盖模式

analysis

entry

target

outDir

file

esm

esm.file

esm.mjs

esm.minify

cjs

cjs.file

cjs.minify

umd

umd.file

umd.name

umd.globals

umd.sourcemap

umd.minFile

umd.onlyMinFile

umd.template

system

system.file

system.minify

system.sourcemap

system.globals

system.name

iife

iife.file

iife.minify

iife.sourcemap

iife.globals

typescript

disableTypeCheck

runtimeHelpers

corejs

jsxRuntime

extraBabelPresets

extraBabelPlugins

nodeVersion

extractCSS

injectCSS

cssModules

less

sass

autoprefixer

nodeResolve

commonjs

alias

extraExternals

externalsExclude

inject

replace

terser

html

json

yaml

wasm

其他

输出文件名说明

对于 ESM 输出格式：

对于 CJS 输出格式：

对于 UMD 输出格式：

对于 SystemJS 输出格式：

对于 IIFE 输出格式：

入口模板文件编写说明

外部依赖说明

扩展 postcss 配置

Readme

`cwd`

`watch`

`fullCustom`

`configFile`

`analysis`

`entry`

`target`

`outDir`

`file`

`esm`

`esm.file`

`esm.mjs`

`esm.minify`

`cjs`

`cjs.file`

`cjs.minify`

`umd`

`umd.file`

`umd.name`

`umd.globals`

`umd.sourcemap`

`umd.minFile`

`umd.onlyMinFile`

`umd.template`

`system`

`system.file`

`system.minify`

`system.sourcemap`

`system.globals`

`system.name`

`iife`

`iife.file`

`iife.minify`

`iife.sourcemap`

`iife.globals`

`typescript`

`disableTypeCheck`

`runtimeHelpers`

`corejs`

`jsxRuntime`

`extraBabelPresets`

`extraBabelPlugins`

`nodeVersion`

`extractCSS`

`injectCSS`

`cssModules`

`less`

`sass`

`autoprefixer`

`nodeResolve`

`commonjs`

`alias`

`extraExternals`

`externalsExclude`

`inject`

`replace`

`terser`

`html`

`json`

`yaml`

`wasm`

对于 `ESM` 输出格式：

对于 `CJS` 输出格式：

对于 `UMD` 输出格式：

对于 `SystemJS` 输出格式：

对于 `IIFE` 输出格式：

扩展 `postcss` 配置

Weekly Downloads