This package has been deprecated

Author message:

dn-middleware-rollup is deprecated and would not be updated in the future. Please use @dawnjs/dn-middleware-rollup instead

dn-middleware-rollup

1.5.1 • Public • Published

group: middleware name: rollup title: Rollup

dn-middleware-rollup

npm npm Libraries.io dependency status for latest release
node-current

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

功能亮点

  • 同时支持 CJSESMUMDSystemJSIIFE 打包格式
  • 支持 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-babelruntimeHelpers 配置项,详细说明请查看相关文档

corejs

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

透传给 dn-middleware-babelcorejs 配置项,详细说明请查看相关文档

jsxRuntime

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

透传给 dn-middleware-babeljsxRuntime 配置项,详细说明请查看相关文档

extraBabelPresets

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

透传给 dn-middleware-babelextraPresets 配置项,详细说明请查看相关文档

extraBabelPlugins

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

透传给 dn-middleware-babelextraPlugins 配置项,详细说明请查看相关文档

nodeVersion

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

透传给 dn-middleware-babelnodeVersion 配置项,详细说明请查看相关文档

extractCSS

类型:boolean | string
默认值:true

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

injectCSS

类型:boolean | Object
默认值:true

是否在 JS 中添加注入样式文件的代码,在 extractCSStrue 时,该配置项始终为 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[]
默认值:

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

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

extraExternals

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

配置额外的外部依赖

说明:如果是已加入到 peerDependenciesdependencies 中的依赖,无需额外配置,详情说明请查看外部依赖说明

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 的配置项,详细说明请查看相关文档

其他

输出文件名说明

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

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

对于 ESM 输出格式:

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

对于 CJS 输出格式:

  1. 如果配置了 cjs.file`${outDir}/${cjs.file}.js`
  2. 如果配置了 file`${outDir}/${file}.js`
  3. 如果在 package.json 中定义了 mainpkg.main
  4. 以上配置都不存在时:`${outDir}/${basename(entry, extname(entry))}.js`

对于 UMD 输出格式:

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

对于 SystemJS 输出格式:

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

对于 IIFE 输出格式:

  1. 如果配置了 iife.file`${outDir}/${iife.file}.js`
  2. 如果配置了 file`${outDir}/${file}.iife.js`
  3. 如果在 package.json 中定义了 browser`${getFileName(pkg.browser)}.iife.js`
  4. 以上配置都不存在时:`${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.publicPathhtml.attributes.link 和打包结果中的 CSS 文件列表生成
    说明:单个文件的输出格式为 `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`
  • scripts 根据 html.publicPathhtml.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 中的 dependenciespeerDependencies 自动设置

  • 对于 ESMCJS 输出格式,默认使用 dependenciespeerDependencies 的并集作为 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 {};
};

Package Sidebar

Install

npm i dn-middleware-rollup

Weekly Downloads

1

Version

1.5.1

License

MIT

Unpacked Size

84.6 kB

Total Files

19

Last publish

Collaborators

  • djknight
  • jeason
  • soulwu
  • ssbabysong