为了学好vite我突击了Rollup(二)进阶一些打包插件列表 GitHub - rollup/awesome: ⚡️

进阶

一些打包插件列表 GitHub - rollup/awesome: ⚡️ Delightful Rollup Plugins, Packages, and Resources

导入Json (@rollup/plugin-json)

默认情况下rollup.js不支持导入json模块,但是实际上可能我们又需要怎么办。

这里我们可以用插件进行处理。

首先搭建一个基础rollup工程
安装插件 npm i @rollup/plugin-json -D
配置插件

export default {
    input:'src/index.js', //函数入口文件地址
    output:{
        file:'./dist/bundle.js', //打包地址
        format:'cjs', //格式化方式(模块化)
    },
    plugins: [json()] // 可以导入使用json数据
}

4. 打包并检查打包产物

这里可以看到构建出来的产物中并没有把整个package.json打包进来而是直接打包了version 这一个变量,这就是Rollup 默认支持的Tree-Shaking。注意如果使用的如果是CommonJs规范。由于 CommonJS 模块是动态加载的，Rollup 无法在编译时确定哪些代码会被使用，因此无法对 CommonJS 模块进行 Tree Shaking 优化。

代码压缩 (@rollup/plugin-terser)

前面我们把代码已经打包出来了但是这样的代码上面的产物还不够好,一方面额外的空格换行可能引起网络传输量变大,另一方面明文的代码也不够安全。这里我们可以用插件进行压缩处理。

首先搭建一个基础rollup工程
安装插件 npm i @rollup/plugin-terser -D
配置插件

export default {
    input:'src/index.js', //函数入口文件地址
    output:{
        file:'./dist/bundle.js', //打包地址
        format:'cjs', //格式化方式(模块化)
        plugins: [terser()] //对产物进行压缩
    },
    plugins: [json()] // 可以导入使用json数据
}

4. 打包并检查打包产物

可以看到这里我们的产物基本上与我们经常看到的npm 库类似了。

terser 的配置项 GitCode - 全球开发者的开源社区,开源代码托管平台

分析打包结果 rollup-plugin-visualizer

rollup-plugin-visualizer 是一个用于分析 Rollup 打包结果的插件。它能够生成一个可视化的报告，帮助开发者了解打包后文件的体积分布、模块依赖关系等信息。这对于优化打包体积和性能非常有帮助。 npm i rollup-plugin-visualizer

import { visualizer } from 'rollup-plugin-visualizer';
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [
    visualizer({
      filename: 'stats.html', // 生成的分析文件名称
      open: true, // 是否在生成后自动打开浏览器
      template: 'treemap', // 可视化模板，可选 'sunburst', 'network', 'treemap', 'raw-data'
      gzipSize: true, // 是否显示 gzip 压缩后的大小
      brotliSize: true // 是否显示 brotli 压缩后的大小
    })
  ]
};

配置项

filename: 生成的分析文件名称，默认为 stats.html。
open: 是否在生成后自动打开浏览器，默认为 false。
template: 可视化模板，可选 'sunburst', 'network', 'treemap', 'raw-data'，默认为 'treemap'。
gzipSize: 是否显示 gzip 压缩后的大小，默认为 false。
brotliSize: 是否显示 brotli 压缩后的大小，默认为 false。

使用场景

优化打包体积：通过分析打包结果，找出体积较大的模块，进行优化或拆分。
模块依赖分析：了解模块之间的依赖关系，优化模块结构。
性能优化：通过分析 gzip 和 brotli 压缩后的体积，进一步优化加载性能。

注意事项

生成的 stats.html 文件通常较大，建议在开发环境中使用，避免在生产环境中生成。
如果项目使用了代码分割（Code Splitting），插件可以很好地展示各个 chunk 的体积和依赖关系。

打包css rollup-plugin-postcss

首先搭建一个基础rollup工程
安装插件 npm i rollup-plugin-postcss -D
添加配置,并在文件中使用css

4. 查看构建产物

extract: true：将 CSS 提取到单独的文件中。如果设置为 false，CSS 将被嵌入到 JavaScript 文件中。
minimize: true：压缩 CSS 文件。
plugins: []：指定要使用的 PostCSS 插件。

代码分割

Rollup 默认情况下不会自动分割代码。它主要是将项目中的所有模块打包成一个单一的文件。这种方式在构建小型项目或者库时非常有用，因为它可以保持模块的依赖关系简单，并且生成的文件易于管理和部署。

使用import 函数分割代码

首先搭建一个基础rollup工程
增加一个util.js 并使用

3. 修改配置文件

4. build并查看产物这里其实就已经分割成两个js了注意确保 Rollup 的输出格式设置为 es 或 system，因为这些格式支持代码分割。

@rollup/plugin-commonjs 和 @rollup/plugin-node-resolve：如果项目中使用了 CommonJS 模块或 Node.js 模块，需要安装并配置这些插件。

解析第三方路径以及配置文件扩展名

npm i @rollup/plugin-node-resolve rollup 解析第三方模块的路径。它能够自动查找并解析 node_modules 中的模块，确保 Rollup 能够正确打包这些依赖。

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'es',
  },
  plugins: [resolve(), commonjs()],
};

import { nodeResolve } from '@rollup/plugin-node-resolve';

  ...
  plugins: [
    nodeResolve({
      // 配置选项
      moduleDirectories: ['node_modules'], // 指定模块目录
      extensions: ['.js', '.json'], // 解析的文件扩展名
      preferBuiltins: true, // 优先使用Node.js内置模块
      browser: false, // 是否在浏览器环境中使用
      dedupe: ['lodash'], // 去重特定模块
      mainFields: ['module', 'main'], // 指定package.json中的字段顺序
      jail: '/my/project', // 限制模块解析的根目录
      only: ['some-module'], // 只解析指定的模块
      customResolveOptions: {
        // 自定义解析选项
        moduleDirectory: 'my_modules'
      }
    })
  ]
};

当项目依赖第三方模块时，使用该插件可以确保 Rollup 能够正确解析这些模块的路径。
在构建浏览器端应用时，可以通过 browser 选项优先使用浏览器兼容的模块版本。
在需要去重模块或限制模块解析范围时，可以使用 dedupe 和 jail 选项。

moduleDirectories: 指定模块查找的目录，默认是 ['node_modules']。
extensions: 指定解析的文件扩展名，默认是 ['.js', '.json', '.node']。
preferBuiltins: 如果设置为 true，插件会优先使用 Node.js 内置模块而不是 node_modules 中的模块。
browser: 如果设置为 true，插件会优先使用 browser 字段指定的模块版本。
dedupe: 去重特定模块，避免重复打包。
mainFields: 指定 package.json 中的字段顺序，默认是 ['module', 'main']。
jail: 限制模块解析的根目录，防止解析到项目外的模块。
only: 只解析指定的模块，其他模块将被忽略。
customResolveOptions: 自定义解析选项，可以指定模块目录等。

注意

如果项目中使用了 ES 模块和 CommonJS 模块混合的情况，确保 mainFields 配置正确。
在浏览器环境中使用时，注意 browser 选项的设置，以避免使用不兼容的模块版本。

babel插件(语法降级) @rollup/plugin-babel @babel/core @babel/preset-env

安装依赖

npm install  @rollup/plugin-babel @babel/core @babel/preset-env -D

2. 添加babel配置文件在项目根目录下创建一个 .babelrc 文件，配置 Babel 的预设：

{
  "presets": ["@babel/preset-env"]
}

3. 使用插件

在 rollup.config.js 中引入 @rollup/plugin-babel 插件，并将其添加到 plugins 数组中。babelHelpers 选项用于指定 Babel 辅助函数的处理方式，bundled 表示将辅助函数打包到输出文件中。exclude 选项用于排除 node_modules 目录下的文件，避免对第三方库进行不必要的转译。

babelHelpers |string | 定如何处理 Babel 辅助函数，可选项有 'bundled'、'runtime'、'inline'、'external'

当设置为 'runtime' 时，会使用 @babel/plugin-transform-runtime 来避免重复的辅助函数代码

import babel from '@rollup/plugin-babel';
export default {
    plugins: [
        babel({
            babelHelpers: 'runtime'
        })
    ]
};

include | string | string[] | RegExp | RegExp[]。| 指定要包含在 Babel 处理范围内的文件，可使用文件路径、文件路径数组、正则表达式或正则表达式数组。

import babel from '@rollup/plugin-babel';
export default {
    plugins: [
        babel({
            include: 'src/**/*.js'
        })
    ]
};

exclude | string | string[] | RegExp | RegExp[] | 指定要排除在 Babel 处理范围外的文件，可使用文件路径、文件路径数组、正则表达式或正则表达式数组。

import babel from '@rollup/plugin-babel';
export default {
    plugins: [
        babel({ // 这样可以防止 Babel 处理 `node_modules` 中的文件，避免不必要的处理和潜在的问题。
            exclude: 'node_modules/**'
        })
    ]
};

extensions | [ ]string | 描述：指定要处理的文件扩展名，默认为 ['.js', '.jsx', '.es6', '.es', '.mjs']。

import babel from '@rollup/plugin-babel';
export default {
    plugins: [
        babel({
            extensions: ['.js', '.jsx', '.ts', '.tsx']
        })
    ]
};

注意可将 .ts 和 .tsx 等扩展名添加到 Babel 的处理范围中

presets | Array<> | Babel 预设，可使用 @babel/preset-env 等预设进行不同的转译。

import babel from '@rollup/plugin-babel';
export default {
    plugins: [
        babel({
            presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
        })
    ]
};

plugins | Array | Babel 插件，可使用 @babel/plugin-proposal-class-properties 等插件进行特定的语言特性转译。

import babel from '@rollup/plugin-babel';
export default {
    plugins: [
        babel({
            plugins: ['@babel/plugin-proposal-class-properties']
        })
    ]
};

sourceMap |Boolean | 是否生成源映射，默认为 false。

import babel from '@rollup/plugin-babel';
export default {
    plugins: [
        babel({
            sourceMap: true //源映射可方便在开发过程中进行调试。
        })
    ]
};

compact | boolean | 是否压缩输出代码，默认为 false。

import babel from '@rollup/plugin-babel';
export default {
    plugins: [
        babel({
            compact: true
        })
    ]
};

Cjs 转ESM @rollup/plugin-commonjs

npm i @rollup/plugin-commonjs

export default {
  ...
  plugins: [
    commonjs(),
  ],
};

结合其他插件：通常，@rollup/plugin-commonjs 会与其他插件一起使用，例如 @rollup/plugin-node-resolve 和 @rollup/plugin-babel。@rollup/plugin-node-resolve 用于解析 node_modules 中的模块，而 @rollup/plugin-babel 用于使用 Babel 转换代码。

import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import { babel } from '@rollup/plugin-babel';
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
  },
  plugins: [
    nodeResolve(), //路径解析
    commonjs(),    // cjs 转esm
    babel({ babelHelpers: 'bundled' }),// es6+ =>ES5
  ],
};

注意

顺序问题：在配置 Rollup 插件时，插件的顺序非常重要。通常，@rollup/plugin-node-resolve 应该放在 @rollup/plugin-commonjs 之前，因为需要先解析模块路径，然后再进行 CommonJS 转换。
动态导入：如果你在项目中使用动态导入（import()），@rollup/plugin-commonjs 可能无法正确处理这些动态导入的模块。在这种情况下，你可能需要手动调整配置或使用其他插件来处理这些模块。

结合ts @rollup/plugin-typescript

安装依赖 npm install @rollup/plugin-typescript typescript -D
配置

import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts', // 指定入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件路径
    format: 'cjs' // 输出格式
  },
  plugins: [
    typescript() // 使用 TypeScript 插件
  ]
};

配置tsOptions

typescript({
  tsconfig: './tsconfig.json', // 指定 tsconfig 文件路径
  include: ['src/**/*.ts'], // 包含的文件
  exclude: ['node_modules/**'] // 排除的文件
})

构建Dts rollup-plugin-dts

安装依赖 npm i rollup-plugin-dts
使用

// rollup.config.js
import dts from 'rollup-plugin-dts';

export default {
  input: './src/index.d.ts',
  output: [{
    file: './dist/index.d.ts',
    format: 'es'
  }],
  plugins: [dts()]
};

替换代码 @rollup/plugin-replace

安装依赖 npm i @rollup/plugin-replace
使用

import replace from '@rollup/plugin-replace';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
      __buildDate__: () => JSON.stringify(new Date()),
      __buildVersion__: '1.0.0'
    })
  ]
};

在 Rollup 配置文件中，通过 replace 函数来配置插件。replace 函数接受一个对象作为参数，对象的键值对表示需要替换的内容。

键：表示需要替换的字符串或正则表达式。
值：表示替换后的内容。可以是字符串、函数或对象。

注意

字符串替换：如果替换的内容是字符串，确保使用 JSON.stringify 来避免语法错误。
函数替换：如果替换的内容是函数，函数会在打包时执行，返回的值将作为替换内容。
正则表达式：可以使用正则表达式来匹配更复杂的字符串模式。

import filesize from 'rollup-plugin-filesize';
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    filesize()
  ]
};

配置项

showMinifiedSize: 是否显示压缩后的大小，默认为 true。
showGzippedSize: 是否显示 Gzip 压缩后的大小，默认为 true。
showBrotliSize: 是否显示 Brotli 压缩后的大小，默认为 false。

当你运行 Rollup 打包时，rollup-plugin-filesize 插件会在终端输出类似以下的信息：

dist/bundle.js: 1.23 KB (gzipped: 456 B)

打包大小 `rollup-plugin-filesize`

rollup-plugin-filesize 是一个 Rollup 插件，用于在打包过程中显示生成的文件大小信息。它可以帮助开发者了解打包后的文件大小，从而优化代码和资源。

安装依赖 npm install rollup-plugin-filesize --save-dev

copy文件插件 `rollup-plugin-copy`

可以在打包时候将文件进行copy

安装 npm install rollup-plugin-copy -D
配置

import copy from 'rollup-plugin-copy';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    copy({
      targets: [
        { src: 'src/assets/*', dest: 'dist/assets' },
        { src: 'src/fonts/*', dest: 'dist/fonts' }
      ]
    })
  ]
};

targets，它是一个数组，每个元素都是一个对象，包含 src 和 dest 属性。

src: 指定要复制的文件或文件夹路径，支持 glob 模式。
dest: 指定文件或文件夹复制到的目标路径。

scss rollup-plugin-scss

安装依赖 npm install rollup-plugin-scss -D
配置

import scss from 'rollup-plugin-scss';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    scss({
      output: 'dist/bundle.css',
      failOnError: true,
      outputStyle: 'compressed'
    })
  ]
};

配置项

output: 指定生成的 CSS 文件的输出路径和文件名。例如，output: 'dist/bundle.css' 会将生成的 CSS 文件输出到 dist 目录下，并命名为 bundle.css。
failOnError: 设置为 true 时，如果 SCSS 编译过程中出现错误，Rollup 构建会失败。默认为 false。
outputStyle: 控制生成的 CSS 文件的压缩方式。例如，outputStyle: 'compressed' 会生成压缩后的 CSS 文件。其他可选值包括 expanded、nested 和 compact。

postCss rollup-plugin-postcs autoprefixer

rollup-plugin-postcs 可以优雅降级css autoprefixer 可以帮助我们自动加浏览器前缀

安装依赖 npm install rollup-plugin-postcss autoprefixer -D

import postcss from 'rollup-plugin-postcss';
export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js'
    },
    plugins: [
        postcss({
            // 配置选项
            plugins: [
                autoprefixer()
            ]
        })
    ]
};

extract：
- 类型：boolean | string。
- 描述：是否提取 CSS 文件，若为 true 会根据输入文件名生成，也可以指定文件名。
- 示例：
```
postcss({ extract: 'styles.css' })
```
plugins：
- 类型：Array<Function>。
- 描述：PostCSS 插件数组，可添加 autoprefixer、cssnano 等。
modules：
- 类型：boolean。
- 描述：是否启用 CSS 模块。
process：
- 类型：Function。
- 描述：自定义处理函数，接收 (css, map) => ({ code, map }) 作为参数，用于自定义 CSS 处理。
minimize：
- 类型：boolean。
- 描述：是否压缩 CSS。
sourceMap：
- 类型：boolean。
- 描述：是否生成源映射。
include：
- 类型：string | RegExp | (string | RegExp)[]。
- 描述：包含哪些文件，可使用文件路径、正则表达式或数组。
exclude：
- 类型：string | RegExp | (string | RegExp)[]。
- 描述：排除哪些文件，可使用文件路径、正则表达式或数组。
plugins: 这是一个数组，用于指定要使用的 PostCSS 插件。例如，autoprefixer 可以自动为 CSS 添加浏览器前缀。
extract: 如果设置为 true，插件会将 CSS 提取到一个单独的文件中，而不是将其内联到 JavaScript 文件中。
minimize: 如果设置为 true，插件会压缩生成的 CSS 文件。

处理图片 @rollup/plugin-image

安装依赖 npm i @rollup/plugin-image -D
进行配置

import image from '@rollup/plugin-image';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
  },
  plugins: [
    image(),
    nodeResolve(),
    commonjs(),
  ],
};

配置项

image() : 这是 @rollup/plugin-image 插件的调用，它会自动处理项目中的图片文件。
nodeResolve() : 这个插件用于解析模块路径，确保 Rollup 能够正确找到依赖的模块。
commonjs() : 这个插件用于将 CommonJS 模块转换为 ES6 模块，以便 Rollup 能够处理。

使用场景

小图片: 对于较小的图片，直接将其转换为 Base64 编码并嵌入到 JavaScript 文件中可以减少 HTTP 请求，提升页面加载速度。
大图片: 对于较大的图片，建议使用 @rollup/plugin-url 插件，将图片文件输出到指定目录，并在代码中引用其路径。

npm i @rollup/plugin-url

import url from '@rollup/plugin-url';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
  },
  plugins: [
    url({
      limit: 10 * 1024, // 10KB 以下的文件转换为 Base64
      include: ['**/*.png', '**/*.jpg'], // 只处理 PNG 和 JPG 文件
      emitFiles: true, // 将文件输出到指定目录
    }),
    nodeResolve(),
    commonjs(),
  ],
};

rollup 插件是怎样工作的

Rollup 的插件机制通过钩子函数（Hooks）实现，插件可以在 Rollup 构建过程的不同阶段注入自定义逻辑。Rollup 提供了丰富的生命周期钩子，插件可以通过实现这些钩子来扩展 Rollup 的功能。

注意

如果你需要在 SCSS 文件中使用 @import 导入其他 SCSS 文件，确保路径正确。
如果你需要处理 CSS 中的图片或字体等资源，可以结合 rollup-plugin-url 或 rollup-plugin-copy 插件使用。

插件的基本结构

一个 Rollup 插件通常是一个 JavaScript 对象，包含一个 name 属性和多个钩子函数。例如：

export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      // 自定义转换逻辑
      return code.replace(/foo/g, 'bar');
    }
  };
}

钩子函数

构建阶段钩子 (Build Hooks)

options: 这个钩子允许插件在 Rollup 初始化配置时修改或扩展配置选项。例如，可以在这里添加自定义的输入选项或输出选项。
buildStart: 当 Rollup 开始构建时，这个钩子会被触发。通常用于初始化一些资源或状态。
resolveId: 这个钩子用于解析模块的 ID。插件可以在这里自定义模块的解析逻辑，例如将某些模块重定向到其他路径。
load: 这个钩子用于加载模块的内容。插件可以在这里返回模块的源代码，或者从其他地方加载模块内容。
transform: 这个钩子用于转换模块的内容。插件可以在这里对模块的源代码进行转换，例如将 TypeScript 转换为 JavaScript。
moduleParsed: 当模块解析完成后，这个钩子会被触发。插件可以在这里获取模块的解析结果，并进行进一步处理。
buildEnd: 当 Rollup 构建结束时，这个钩子会被触发。通常用于清理资源或生成构建报告。

输出生成阶段钩子 (Output Generation Hooks)

outputOptions: 这个钩子允许插件在生成输出之前修改或扩展输出配置选项。例如，可以在这里添加自定义的输出格式或文件名。
renderStart: 当 Rollup 开始生成输出时，这个钩子会被触发。通常用于初始化一些输出相关的资源。
banner / footer: 这些钩子允许插件在生成的 bundle 的顶部或底部添加内容。例如，可以在这里添加版权声明或版本信息。
intro / outro: 这些钩子允许插件在生成的 bundle 的内部添加内容。例如，可以在这里添加一些全局变量或初始化代码。
renderChunk: 这个钩子允许插件修改生成的 chunk 内容。例如，可以在这里对 chunk 进行压缩或添加额外的代码。
generateBundle: 当 Rollup 生成 bundle 时，这个钩子会被触发。插件可以在这里修改或添加文件到最终的输出中。
writeBundle: 当 bundle 写入磁盘之前，这个钩子会被触发。通常用于在文件写入之前进行最后的修改或验证。

其他钩子 (Miscellaneous Hooks)

watchChange: 在监视模式下，当文件发生变化时，这个钩子会被触发。插件可以在这里响应文件变化，例如重新加载模块。
closeWatcher: 当监视模式关闭时，这个钩子会被触发。通常用于清理与监视模式相关的资源。

插件间的交互

插件之间可以通过共享上下文（如 this）或修改 Rollup 的配置选项进行交互。例如，一个插件可以在 options 钩子中修改配置，另一个插件可以在 buildStart 钩子中读取这些配置。

treeshaking

动态导入：Rollup 的 Tree Shaking 主要针对静态导入和导出。对于动态导入（如 import()），Rollup 无法在打包时确定哪些代码会被使用，因此 Tree Shaking 的效果可能会受到影响。
副作用代码：如果代码中包含副作用（如修改全局变量、执行某些操作等），Rollup 可能会保留这些代码，即使它们看起来没有被使用。开发者可以通过 /*#__PURE__*/ 注释来标记没有副作用的代码，帮助 Rollup 更好地进行 Tree Shaking。 Rollup 的 Tree Shaking 依赖于 ES6 模块的静态结构。ES6 模块的导入和导出语句是静态的，这意味着它们在代码执行之前就已经确定了。Rollup 利用这一点，通过解析这些静态语句来构建模块之间的依赖关系图去清除未使用过的代码。

手动开发一个插件

export default function (options) {

    return {
        name: 'replace-plugin',
        transform (code, id) {
            if (options.target && options.replacement) {
                return code.replace(new RegExp(options.target, 'g'), options.replacement);
            }
            return null;
        }
    }
}

注意如果报错 `[!] RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag.

Original error: Cannot use import statement outside a module`

可以加package.json 里添加 "type" :"module" 就可以解决

为了学好vite我突击了Rollup(二)

进阶