重塑前端工作流 - Lugia 正式版解读

2023-09-07 02:21:12

从 0 到 1 的进化之旅

从 2018 年 5月建立第一个 Lugia 相关的仓库起，历经一年多的时间，Lugia 终于迎来它的第一个正式版本 1.1.0。年初，我们已经内部发布了技术预览版 1.0.0，以验证我们的整套大前端解决方案。半年多的时间打磨，Lugia 逐渐成熟，不仅在核心思想上有突破性进展，在开发上也变得更加简单易用。

认识 Lugia

Lugia 是一款将组件、样式、逻辑、国际化和测试融为一体，兼容 React 生态的大前端解决方案。在年初，我们就介绍过 Lugia 的一些理念，比如：

组件定义和组件渲染分离。
模板、样式、业务逻辑三者分离。
支持本地开发和云端开发两种模式。
完备的构建工具链，包含从源代码到最终构建文件的整个过程。
完整的国际化解决方案，支持多语言、多地区。
强大的测试能力，可对组件进行单元测试、集成测试和端到端测试。

Lugia 的核心优势

组件化开发： Lugua 采用组件化思想，将页面拆分成一个个独立的组件，组件之间通过 props 和 event 进行通信。这使得前端开发变得更加模块化、可复用性更强，也降低了代码维护难度。
组件样式隔离： Lugua 的样式机制采用 CSS Module，可以自动生成唯一的样式名称，避免样式污染。此外，还支持 Less、Sass 等 CSS 预处理语言，可以轻松实现组件的样式定制。
组件本地调试： Lugua 提供了本地开发模式，可以直接在本地运行项目。在开发过程中，任何对组件的修改都会自动编译并热加载到浏览器中，极大提高了开发效率。
云端开发： Lugua 也支持云端开发模式，可以在云端编译和运行项目。云端开发模式可以节省本地开发环境搭建的时间，并方便团队成员进行协同开发。
完善的构建工具链： Lugua 提供了一套完整的构建工具链，包括 npm、webpack、Babel、Less、Css Modules、PostCSS 和 rollup 等。这使得 Lugua 可以轻松集成到现有的前端项目中，并实现跨平台的构建和部署。