比 Webpack 更高效的 Rollup 入门指南
Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的 ES6 版本中,而不是以前的特殊解决方案,如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数,而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现,但当前 Rollup 可以使你提前体验。
Rollup
允许我们以ES6来进行库的开发,通常我们用Webpack来打包应用类的项目,而使用Rollup
来打包库类型的项目,因为Rollup
可以使我们的库更加简洁,毕竟人家的Slogan是: rollup: Next-generation ES module bundler
快速上手
安装
Rollup
提供两种方式来使用:命令行接口和JavaScript API
使用rollup --help
查看使用命令及相关参数。
基本使用命令:
如打包一个支持Commonjs的文件:
可以使用rollup-starter-lib
库来初始化项目
配置文件
上面是最基础的配置,指定input
打包入口和output
输出文件名称及类型
另外针对处理输入文件和处理输出文件都提供了相应的插件。
如官方实例:
另外我们也可以使用插件对输出文件进行处理,如使用rollup-plugin-terser
对打包文件进行压缩:
配置:
另外,上面的配置文件默认一种打包配置,也可以指定多种打包配置,如:
搭配React + TypeScript
增加TypeScript支持
首先安装TS相关依赖:
rollup.config.js
:
在项目目录下增加tsconfig.json
文件,具体配置参考:tsconfig.json
搭配antd的babel-plugin-import使用
安装插件rollup-plugin-babel
和babel-plugin-import
更详细使用文档参考:babel-plugin-import及rollup-plugin-babel
总体来说,Rollup
上手还是比较方便的,第一次用来打包业务的通用模块,体验很好,后续会继续研究,毕竟业务中通用库都倡导使用Rollup
来打包,以保证更小的包体积。
版权声明: 本文为 InfoQ 作者【费马】的原创文章。
原文链接:【http://xie.infoq.cn/article/10f386b80caabff9a63e77ef0】。文章转载请联系作者。
评论