@dawnjs/dn-middleware-rollup

v2.3.2

Published

3 years ago

Dawn middleware to bundle assets with rollup

Downloads

0High
0Medium
0Low

dawn middleware rollup bundle build

@dawnjs/dn-middleware-rollup

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

功能亮点

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

使用说明

安装

npm i -D @dawnjs/dn-middleware-rollup

配置 `.dawn/pipe.yml`

dev:
  - name: '@dawnjs/dn-middleware-rollup'
    watch: true
  - name: server
  - name: browser-sync

build:
  - name: '@dawnjs/dn-middleware-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

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

`parallel`

类型：boolean 默认值：false

开启并行打包模式

`entry`

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

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

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

`string`

最常规的单入口模式，输出文件规则遵循输出文件名说明

`string[]`

简单的多入口模式，每个入口的构建配置都完全一致，输出文件名由入口路径结合输出格式决定，不再识别 package.json 中的配置和统一的 file 配置

说明：如果数组中只有一个值，等同于单入口模式

`Object`

完整的多入口模式，key 为入口文件，value 为完整的一份构建配置，会和顶层的配置进行合并处理，优先级高于顶层配置，不再识别 package.json 中的配置和统一的 file 配置

说明：如果对象只有一个 key，等同于单入口模式

`target`

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

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

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

`outDir`

类型：string 默认值："build"

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

`file`

类型：string 默认值：

指定输出文件路径和文件名

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

`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 默认值：

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

`disableTypescript`

类型：boolean 默认值：false

是否禁用 TypeScript 编译（使用 babel 代替）

`typescript`

类型：Object 默认值：

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

`disableTypeCheck`

类型：boolean 默认值：false

禁用类型检查

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

`runtimeHelpers`

类型：boolean | string 默认值：true

配置是否开启 @babel/plugin-transform-runtime，为 string 时作为 version 配置项透传给 @babel/plugin-transform-runtime，详细说明请查看相关文档

`corejs`

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

透传给 @babel/plugin-transform-runtime 的 corejs 配置项，详细说明请查看相关文档

`jsxRuntime`

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

透传给 @babel/preset-react 的 runtime 配置项，详细说明请查看相关文档

说明：会检查当前依赖的 react 版本是否支持 jsxRuntime，如果不支持，统一设置为 "classic"

`pragma`

类型：string 默认值：

透传给 @babel/preset-react 的 pragma 配置项，详细说明请查看相关文档

`pragmaFrag`

类型：string 默认值：

透传给 @babel/preset-react 的 pragmaFrag 配置项，详细说明请查看相关文档

`disableAutoReactRequire`

类型：boolean 默认值：

配置是否排除 babel-plugin-react-require。默认情况下不会排除，但如果 jsxRuntime 设置为 "automatic" 并且使用了支持新 JSX Runtime 的 React 版本，则默认排除

`extraBabelPresets`

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

额外的 Babel 插件集，推荐使用 .babelrc 配置文件代替该配置项

`extraBabelPlugins`

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

额外的 Babel 插件，推荐使用 .babelrc 配置文件代替该配置项

`babelExclude`

类型：string | RegExp | Array<string | RegExp> 默认值："node_modules/**"

自定义的 babel 转换排除路径，默认排除 node_modules 下所有文件，详细说明请查看相关文档

`babelInclude`

类型：string | RegExp | Array<string | RegExp> 默认值：undefined

自定义的 babel 转换包含路径，详细说明请查看相关文档

`nodeVersion`

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

当 target 为 "node" 时，作为 @babel/preset-env 的 targets.node 配置项使用，详细说明请查看相关文档

`extractCSS`

类型：boolean | string 默认值：true

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

`injectCSS`

类型：boolean | Object 默认值：true

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

`cssModules`

类型：boolean | Object 默认值：{ localsConvention: 'camelCase' }

是否开启 CSS modules 或设置 postcss-modules 选项，详细说明请查看相关文档

`autoCssModules`

类型：boolean 默认值：true

是否自动对 .module.* 文件开启 CSS modules ，详细说明请查看相关文档

`less`

类型：Object 默认值：

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

`sass`

类型：Object 默认值：

透传给 sass 或 node-sass 的选项

`postcssImport`

类型：Object 默认值：

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

`autoprefixer`

类型：Object 默认值：

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

`postcssPresetEnv`

类型：Object 默认值：

额外的 postcss-preset-env 配置项，详细说明请查看相关文档

`postcss`

类型：Object 默认值：

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

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

`string`

类型：Object 默认值：{ include: "**/*.txt" }

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

`svgr`

类型：Object 默认值：

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

其他

输出文件名说明

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

具体输出格式指定的文件名
顶层配置项指定的文件名
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 {};
};

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@dawnjs/dn-middleware-rollup

功能亮点

使用说明

安装

配置 .dawn/pipe.yml

配置项说明

cwd

watch

fullCustom

configFile

合并模式（推荐）

覆盖模式

analysis

parallel

entry

string

string[]

Object

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

disableTypescript

typescript

disableTypeCheck

runtimeHelpers

corejs

jsxRuntime

pragma

pragmaFrag

disableAutoReactRequire

extraBabelPresets

extraBabelPlugins

babelExclude

babelInclude

nodeVersion

extractCSS

injectCSS

cssModules

autoCssModules

less

sass

postcssImport

autoprefixer

postcssPresetEnv

postcss

nodeResolve

commonjs

alias

配置 `.dawn/pipe.yml`

`cwd`

`watch`

`fullCustom`

`configFile`

`analysis`

`parallel`

`entry`

`string`

`string[]`

`Object`

`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`

`disableTypescript`

`typescript`

`disableTypeCheck`

`runtimeHelpers`

`corejs`

`jsxRuntime`

`pragma`

`pragmaFrag`

`disableAutoReactRequire`

`extraBabelPresets`

`extraBabelPlugins`

`babelExclude`

`babelInclude`

`nodeVersion`

`extractCSS`

`injectCSS`

`cssModules`

`autoCssModules`

`less`

`sass`

`postcssImport`

`autoprefixer`

`postcssPresetEnv`

`postcss`

`nodeResolve`

`commonjs`

`alias`

`extraExternals`

`externalsExclude`

`inject`

`replace`

`terser`

`html`

`json`

`yaml`

`wasm`

`string`

`svgr`

对于 `ESM` 输出格式：

对于 `CJS` 输出格式：