简介
在前端开发中，我们通常需要使用一些工具来将多个 JavaScript 文件打包成一个文件，以便于浏览器加载。常用的工具有 webpack 和 rollup。而本文主要介绍 rollup 的一个 npm 包，即 rollup-loader。
安装
在使用 rollup-loader 之前，需要先安装 rollup 和 rollup-plugin-commonjs，执行以下命令即可安装：
npm install rollup rollup-plugin-commonjs --save-dev
接着安装 rollup-loader：
npm install rollup-loader --save-dev
使用
在 webpack 配置文件中添加以下代码：
-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- -------- ---- - ------- ---------------- -------- - -- ------ ------- ------ ---------------- - - - - - --展开代码
其中，test 指定了匹配的文件，use 指定了使用的 loader，options 中可配置 rollup 的选项。
示例
我们来看一个示例，在项目中有两个文件 index.js 和 utils.js，其中 utils.js 中定义了一个加法函数：
// utils.js export function add(a, b) { return a + b; }
而 index.js 中引用了该函数，并且将结果输出到控制台：
// index.js import { add } from './utils.js'; const sum = add(1, 2); console.log(sum);
接着，我们可以使用 rollup-loader 打包这两个文件，执行以下命令：
npx webpack最终生成的打包文件如下：
-- -------------------- ---- ------- --------- -- - ---- -------- -------- ------ -- - ------ - - -- - ----- --- - ------ --- ----------------- -----展开代码
指导意义
rollup 是一个优秀的打包工具，在处理模块化代码时表现出色，它可以将代码打包成更小、更快、更可读的文件。而 rollup-loader 更是让我们能够在 webpack 中使用 rollup 的优秀打包能力，可以大大提高前端开发的效率。
在使用 rollup-loader 的过程中，我们需要了解 rollup 的一些常用选项，如 input、output、external 等等，这些选项可以帮助我们更好地配置打包文件。
在实际开发中，我们应该尽可能地使用这样优秀的打包工具，以达到更好的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68699
