前言：对于我们这些日常基于脚手架项目开发，使用yarn/npm run start、yarn/npm run build等命令完成自动化构建的开发者来说，重要的自动化构建仿佛变成了前端的一个黑盒知识。但是，掌握前端工程的自动化构建，是学习前端工程化以及进阶高级前端所必不可缺少的…

建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…

在遥远的几个月前，还在上家公司的时候，老板突发奇想，想要搞个代码片段平台，类似于 snipit，实现代码片段的复用。本身这个需求并不难实现——简单的前端界面 + 简单的 node CURD，搞定收工，下班回家。 但是，在实际使用中，发现了一个使用痛点——没有在线调试功能，所有代…