-
【前端工程化】Rollup构建工具
随着互联网行业的发展，前端应用也逐渐变得复杂，所以自然而然地前端工程化开发是必然道路，百家争名的时代，涌现了许多优秀的构建工具，今天想从学习的角度，和大家分享一下笔者的学习方法和思路。 我个人观点看来，想要完全掌握前端工程化，那么就得对行业现有的构建工具、流程管理、服务管理有一个全面以及深入的认识，无论是前端还是后端开发者，我们通过任意编程语言编写软件应用，这是基本能力，但作为工程师，我想那就是得具有工程化的能力，我们应该在开发工程中能够具有把控全局的能力，有业务上的视野，也得有技术上的沉淀，应该时刻思考，从程序设计、流程设计、方案设计上尽可能得去逼近符合业务场景的最佳实践。 什么是Rollup Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序 —— Rollup文档 可以理解为，Rollup是一款集成式地代码打包、应用构建工具。 为什么要使用构建工具 如前文所述，前端工程化是作为工程师的必要能力，工程化并非一个人就能搞定的，我们需要站在前人/巨人的肩膀看世界。 随着行业的发展，涌现了一些获得行业认可（可以认为是最佳实践）的构建工具，这些构建工具将一些项目管理和编程开发的行业最佳实践集成到了一个“脚手架”工具中。如此，便有利于其他团队快速构建出高效、高质量的工程化项目。 构建工具能做的事： ·····处理兼容性 ·····混淆、压缩代码 ·····Tree Shaking ·····转译 ·····单元测试 ·····打包应用 上手Rollup Rollup是一个我认为还比较简单的构建工具，此处先不去讨论其深层次的构建实现细节，先看看如何上手使用。 其实关于Rollup的使用还是比较推荐大家阅读官方文档：https://rollupjs.org/guide/ 增强打包能力 通过上述的一些Rollup本身提供的工具，很容易发现，比如代码压缩、代码混淆、兼容性处理等能力并不具备，但Rollup提供了plugins这项配置字段，它允许我们使用三方库来增加rollup的构建能力。 在一个项目中，常见需要考虑的问题有： 1.代码压缩、代码混淆 2.兼容性处理 3.TypeScript、Less、Sass等转译处理 4.Tree Shaking（Rollup默认支持并启用） 5.通用化（支持打包转译为umd、cjs、esm等格式的package） 官方提供了一个权威的三方插件参考列表：https://github.com/rollup/awesome ，因此有什么想要增强能力的需要，可以现在该列表中检索 总结 Rollup打包工具的基本使用就差不多了，通过尝试可以发现，Rollup的配置等是非常简单的，改变了开发者的工作形式，以及提升了工作（编码）效率 “自然者，物见其然，不知所以然；同焉皆得，不知所以得”。作为前端工程师，我们不仅是要会用，还要明白构建的整个过程，这有助于我们在编码、架构设计上能够更加合理，或者说更“自然”。
