使用 WebMaker 快速预览 Ionic 页面效果

Ionic Framework 是一个 HTML5 跨平台应用程序开发框架(HTML5 Hybrid Mobile App Framework)，能够使用 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。

在进行 Ionic 应用程序开发过程中，频繁调整和预览页面效果是必须经历的开发过程，虽然 Ionic 支持热更新技术并能够在修改完代码后自动编译并刷新重现页面，但这也需要花费数秒时间才能完成。对于调试页面显示来说这是无法忍受的。

WebMaker是一款基于浏览器的可离线的前端即时预览工具，功能类似 CodePen，与之不同的是 WebMaker 可以使用在线版本或自行部署在私有服务器中，并且是开源的。

使用 WebMaker 调试 Ionic 页面只需要通过"Add Library"按钮，引用如下 Ionic 前端类库即可，修改代码后页面立刻更新。

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script><script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

几个 Ionic 官方文档中的例子

Ionic 是基于 Angular 基础上构建的，2.0 以后的版本采用 TypeScript 脚本语言，WebMaker 不支持 Angular 的数据绑定，所以无法展示绑定数据。

虽然按照 Ionic 官方教程，我们可以使用 Visual Studio Code 或使用Stackblitz在线编写代码，但是都需要等待几秒钟的编译时间才能看到修改代码所产生的变化，升级机器配置可以缩短等待时间，但如果觉得升级机器配置不划算的话不妨试试本文中的方法。