rollup打包工具基础配置使用详解
2026-01-18 17:26:24
Rollup打包工具基础配置使用详解
Rollup是一种专门用于JavaScript模块打包的工具，它的主要任务是将小块代码编译成复杂的库或应用程序，相较于webpack，它在处理框架代码时，可读性更佳，如Vue框架就采用Rollup进行打包。Rollup常用于JavaScript库的构建，而webpack则更适合大型前端工程和UI库的打包，比如ElementUI和mint-ui等。
在使用Rollup时，需要注意在执行build时，由于其配置文件rollup.config.js采用ES模块语法，如果package.json中未声明type为module，可能会出现错误，此时需要将文件后缀改为.mjs。对于模块化规范，可以参考模块化系列和seajs-模块化历史讨论等文档。
安装Rollup的步骤包括初始化项目和安装依赖，如通过npm init初始化项目，然后安装rollup。配置方面，入口文件通过input字段指定，单个入口只需指定一个文件，而多个入口则需设置为数组对象。输出配置则通过output字段，单个输出对象形式，多个输出则数组形式，外部引用的处理通过external属性指定。
在处理node_modules中的依赖时，可能需要借助插件，如处理CommonJS模块的lodash。为了避免第三方库被打包，可以配置external数组。同时，Rollup支持别名，通过@rollup/plugin-alias插件实现，代码压缩则可使用@rollup/plugin-terser。部署时，可通过package.json的scripts配置启动本地服务器和热更新。
在代码质量检查方面，可以使用@rollup/plugin-eslint进行eslint检查，配置文件支持.eslintrc.js、.eslintrc.cjs和.eslintrc.json格式。Rollup的tree shaking特性，即仅打包使用到的代码，有助于减少代码体积。
在跨平台设置中，如需在生产环境中使用，可通过设置环境变量NODE_ENV，并根据操作系统（Windows、Linux/Mac）使用不同的命令。如果需要处理跨平台环境差异，可以借助cross-env模块。
热门标签
