一、rollup.config.js基本配置
例如，以下是一份基本的 rollup.config.js 文件代码：
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';export default {input: 'src/index.js', // 入口文件output: [{file: 'dist/bundle.js',format: 'cjs', // 输出格式},{file: 'dist/bundle.esm.js',format: 'esm', // 输出格式},],plugins: [resolve(), // 解析第三方依赖commonjs(), // 将 CommonJS 模块转换为 ES6babel(), // 转义 ES6/7 代码为 ES5],external: ['react', 'react-dom'], // 外部依赖mode: 'production', // 打包模式
};
其中，包括输入文件 input、输出文件 output、插件 plugins、外部依赖 external 和打包模式 mode。三个插件的配置：resolve 插件用于解析第三方依赖，commonjs 插件将 CommonJS 模块转换为 ES6，babel 插件将 ES6/7 代码转换为 ES5。
这个配置文件会将 src/index.js 文件作为入口文件，打包成两个输出文件 dist/bundle.js 和 dist/bundle.esm.js，其中 dist/bundle.js 的输出格式为 cjs，dist/bundle.esm.js 的输出格式为 esm。在打包过程中，会先解析第三方依赖，将 CommonJS 模块转换为 ES6，最后将 ES6/7 代码转换为 ES5。在打包过程中，会忽略 react 和 react-dom 两个外部依赖。打包模式为 production。
二、五大核心配置
基础配置包括输入文件（input）、输出文件（output）、插件（plugins）、外部依赖（external）、打包模式（mode）等。
1. input打包入口文件
在使用 Rollup 进行打包时，需要配置 rollup.config.js 文件，其中 input 配置选项用于指定入口文件，告诉 Rollup 从哪个文件开始打包。具体来说，input 接收一个文件路径，可以是相对路径或绝对路径。
举个例子：
// rollup.config.jsexport default {input: 'src/index.js',output: {file: 'dist/bundle.js',format: 'umd'}
}
以上配置中，input 指定了入口文件为 src/index.js，表示 Rollup 会从这个文件开始打包。
当我们运行 Rollup 命令后，它会找到入口文件，分析其中的依赖并生成打包后的文件。如果入口文件中包含其他模块的引用，Rollup 会递归地分析它们的依赖，最终将它们打包到生成的文件中。
使用 input 配置选项的好处在于，我们可以将多个模块的打包合并成一个文件，避免了在浏览器中加载多个文件的请求和响应时间。此外，Rollup 的静态分析能力可以将未使用的代码以及不必要的依赖移除，使得打包后的文件更小、更快。
综上所述，input 配置选项是非常重要的一个选项，它指定了入口文件，告诉 Rollup 从哪个文件开始打包，提高了打包的效率和性能。
2. output打包输出
rollup.config.js的output配置选项用于指定将代码打包后输出的路径和文件名等相关的配置。
以下是output配置选项的常见参数及其说明：
- file：指定打包后输出的文件路径和名称。
- format：指定打包后输出的代码格式，可以是amd、cjs、es、iife或umd。
- name：指定打包后的全局变量名，仅当format为iife或umd时使用。
- sourcemap：指定是否生成source map，默认值为false。
- sourcemapFile：指定生成的source map文件位置，默认值为null。
- sourcemapExcludeSources：指定是否将源文件包含在source map中，默认值为false。
- banner：指定输出文件头部添加的注释信息。
- footer：指定输出文件尾部添加的注释信息。
- intro：指定输出文件头部添加的代码。
- outro：指定输出文件尾部添加的代码。
以一个打包目录为例，假设我们有以下的目录结构：
.
├── dist
├── node_modules
├── src
│ ├── index.js
│ └── utils.js
└── rollup.config.js
我们可以将rollup.config.js的output配置选项设置为：
export default {input: 'src/index.js',output: {file: 'dist/bundle.js',format: 'umd',name: 'myLibrary',sourcemap: true,sourcemapFile: 'dist/bundle.js.map',sourcemapExcludeSources: true,banner: '/* myLibrary v1.0.0 */',footer: '/* https://github.com/my-username/my-library */',},
}
上述配置指定了将src/index.js作为入口文件打包为一个umd格式的文件，输出到dist/bundle.js文件中，并为打包后的代码指定了全局变量名为myLibrary。同时，打包后会生成一个sourcemap文件，并指定文件名为dist/bundle.js.map，生成的sourcemap会排除源文件，并在打包后的代码头部加上"/* myLibrary v1.0.0 /“注释，在打包后的代码尾部加上”/ https://github.com/my-username/my-library */"注释。
3. plugins插件
在使用 Rollup 进行打包时，可以通过在 rollup.config.js 文件中配置 plugins 来实现一些特定的操作，如代码压缩、处理 CSS 文件、支持 TypeScript 等。以下是 plugins 配置选项常用的插件及其功能：
-
commonjs()：将 CommonJS 模块转为 ES6 模块，使其能够被 Rollup 处理和打包。 -
resolve()：解析导入的依赖模块路径，以便 Rollup 能够正确找到依赖模块。 -
babel()：将 ES6+ 语法转为 ES5 语法，以便在低版本浏览器或者旧版 Node.js 上运行。 -
terser()：对代码进行压缩和混淆，以减小文件大小和提高网站性能。 -
postcss()：对 CSS 进行处理，如添加浏览器前缀、压缩等。 -
typescript()：支持使用 TypeScript 进行开发，并将 TypeScript 文件转为 JavaScript 文件。
下面以一个打包目录为例来说明如何在 rollup.config.js 中配置 plugins：
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import babel from "@rollup/plugin-babel";
import { terser } from "rollup-plugin-terser";export default {input: "src/index.js",output: {file: "dist/bundle.min.js",format: "iife",},plugins: [resolve(),commonjs(),babel({babelHelpers: "bundled",exclude: "node_modules/**",}),terser(),],
};
以上配置中，plugins 分别使用了 @rollup/plugin-node-resolve、@rollup/plugin-commonjs、@rollup/plugin-babel 和 rollup-plugin-terser 插件，分别用于解析依赖模块路径、转换 CommonJS 模块、将 ES6+ 语法转为 ES5 语法和对代码进行压缩和混淆。最终生成的打包文件为 dist/bundle.min.js，打包格式为 iife。
4.external外部依赖
external选项是用来指定哪些模块是外部依赖，不需要被打包进最终的输出文件中的。这可以显著减小打包后的文件大小。
举一个打包目录的例子：
假设我们的打包目录结构如下：
├── src/
│ ├── index.js
│ ├── utils/
│ │ └── helper.js
│ └── lib/
│ └── lodash.js
├── dist/
└── rollup.config.js
其中，src/index.js 文件中引用了 src/utils/helper.js 和 src/lib/lodash.js 两个文件中的一些函数和变量。
如果我们直接使用默认配置文件打包，最终生成的文件会包含 helper.js 和 lodash.js 中的代码，导致最终的文件体积变得很大。
为了避免这个问题，我们可以配置 external 选项，告诉 Rollup 这两个文件应该被视为外部依赖。
在 rollup.config.js 中添加如下代码：
export default {input: 'src/index.js',output: {file: 'dist/bundle.js',format: 'cjs',},external: ['src/utils/helper.js', 'src/lib/lodash.js'],
};
这里使用了相对路径，直接指定要排除的文件。如果你选择使用模块名称，则需要在代码中使用 import 或 require 去引入这些模块，并且在 external 中配置他们的名称，例如：
import { someFunction } from 'lodash';export default function test() {someFunction();
}
export default {input: 'src/index.js',output: {file: 'dist/bundle.js',format: 'cjs',},external: ['lodash'],
};
最终生成的代码将不会包含 helper.js 和 lodash.js 中的内容，而是在运行时从外部获取这些依赖。
5.mode模式
在Rollup.js中，mode配置选项用于指定当前构建的模式，包括production和development两种模式。具体作用如下：
-
production模式：启用各种代码优化，生成的代码体积更小，执行速度更快。通常用于生产环境。
-
development模式：生成的代码不会进行优化，方便开发调试。通常用于开发环境。
举例说明：
当我们设置mode为production时，Rollup.js会自动开启代码压缩、Tree Shaking、Scope Hoisting等优化功能，以减小生成的代码体积和提高执行效率，适用于生产环境：
export default {input: 'src/index.js',output: {file: 'dist/bundle.min.js',format: 'iife',name: 'MyLibrary'},mode: 'production'
};
而当我们设置mode为development时，生成的代码不会进行优化，不会进行代码压缩、Tree Shaking、Scope Hoisting等操作，方便开发调试，适用于开发环境：
export default {input: 'src/index.js',output: {file: 'dist/bundle.dev.js',format: 'iife',name: 'MyLibrary'},mode: 'development'
};
三、总结
到这里大家是不是想到了一个老朋友，webpack.config.js，这些配置看上去是不是很像，哈哈哈
总的来说，rollup.config.js 是构建现代 JavaScript 应用程序的强大工具。在本文中，我们介绍了五个基础配置，包括输入文件、输出文件、插件、外部依赖和模式。这些配置可以帮助我们快速创建优化的 JavaScript 应用程序。但是，这只是 rollup.config.js 的冰山一角。还有很多高级配置和技巧可以使用，比如代码拆分、动态导入等等。了解 rollup.config.js 的所有特性和细节需要时间和经验，但是这些基础配置可以帮助我们快速开始并建立基础。希望这篇博客能够对你有所帮助，祝你在使用 rollup.config.js 构建 JavaScript 应用程序时愉快！
框架实现)
）)
-领域模型-消费者分组ConsumerGroup)