在前端项目中，我们通常需要将多个 JavaScript 文件合并成一个文件，以减少 HTTP 请求次数和提高页面加载速度。Rollup 是一个优秀的模块打包工具，而 rollup-plugin-multi-entry 则是 Rollup 的插件之一，可以让我们更方便地将多个入口文件打包成一个文件。
安装
首先，我们需要在项目中安装 rollup 和 rollup-plugin-multi-entry：
npm install --save-dev rollup rollup-plugin-multi-entry
配置
接下来，在项目根目录下创建 rollup.config.js 文件，并进行如下配置：
-- -------------------- ---- -------
------ ---------- ---- ----------------------------
------ ------- -
------ -------------
------- -
----- -----------------
------- -----
--
-------- --------------
--其中，input 属性指定了入口文件路径，可以使用通配符 * 来匹配多个文件。output 属性则指定了输出文件路径和格式。
最重要的是 plugins 属性，它指定了使用哪些插件。在这里，我们只使用了一个插件 rollup-plugin-multi-entry。
示例
假设我们有以下两个文件：
src/foo.js
export function foo() {
console.log("Hello, world!");
}src/bar.js
export function bar() {
console.log("Goodbye, world!");
}然后，我们运行 rollup -c 命令即可打包生成 dist/bundle.js 文件：
-- -------------------- ---- ------- ---- -------- -------- ----- - ------------------- --------- - -------- ----- - --------------------- --------- - ----------- - ---- ----------- - ----
现在，我们可以在其他 JavaScript 文件中引入并使用这些函数了：
import { foo, bar } from "./dist/bundle.js";
foo(); // 输出 "Hello, world!"
bar(); // 输出 "Goodbye, world!"结语
使用 rollup-plugin-multi-entry 插件可以轻松地将多个入口文件打包成一个文件。它在实际项目开发中非常有用，能够提高代码的复用性和可维护性。尝试使用它，并探索更多 Rollup 的插件和功能吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/50499