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