21短文-手写前端框架

开发完毕后就要编译上线了，因为编译和开发的构建部分基本上是一致的，只需要注意几个编译上线的而外差异，比如不需要开发服务，代码构建压缩，产物使用想对路径等。 增加 malita build

我们将多个项目的公共功能提取到框架层，形成开发脚手架。为了提效我们还可以将页面级别的内容整理成模版，用于快速创建相对应的资产，比如快速新建页面、快速新建服务、快速新建Mock等。

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。 标题来自云谦的星球 极简的生命周期 获取应用元数据 获取路由配置（约定式路由） 动态生成应用主入口文件

先讲结论：依赖预打包就是将框架里面用到的第三方开源的库的代码，拷贝一份到你的框架中保存起来。然后定期升级维护，好处就是项目中足够稳定，比如现在 npm 上经常出现的底层包挂码事件等超高的安全风险问题，

昨天我们已经完成了移动端的适配，今天我们就引入 antd-mobile 组件，当作我们的基础组件，加快我们的开发效率。 Ant Design Mobile 是由支付宝设计团队基于蚂蚁集团的众多业务实践

我们使用的方案是在淘宝高清方案的基础上修改的方案，因为淘宝高清方案使用 meta 使用 0.5，这个设定在将移动端页面嵌套到其他平台的 iframe 中，会有内外 viewport 不一致导致的问题

Mock 数据是现在前后端开发分离很重要的一个环节，可以保证前端的开发进度和后端的开发进度同步开展，而不是前端开发需要在后端服务完成之后才能进行，比如我们可以预先和服务端约定好接口的请求方式和出入参。

原理 代理也称网络代理，是一种特殊的网络服务，允许一个终端（一般为客户端）通过这个服务与另一个终端（一般为服务器）进行非直接的连接。

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情。 重启 node 服务，在 malita dev 启动之后，修改配置之后，虽然页面有重新加载，但是没有效果

到目前为止，我们的框架行为都是由我们的设计开发时制定的，但是实际项目中肯定会涉及到用户需要定制化的一些数据和定制化需求，由于我们并不是要写一个真正的前端框架，因此我们还是以管控能力为主

今天家里的小可爱们长了跳蚤，要早点回去驱虫。明天周六不更这个系列，下一次更新在后天晚上10点左右。今天题图会附上我家最小的小可爱。

朋友推荐我将标题改成《umi 核心开发人员带你21天手写前端框架》，关注的人会更多。哈哈哈，我没好意思放。如果，你也觉得新标题更好的话，不妨进来看看文章内容哦。

教你如何用 50 行代码实现页面状态保持 keepalive，你想学吗？ 什么 50行代码你都懒得写？那直接拿去用吧！

今天的内容比较简单，仅仅作为对 react-router 的一个简单应用，同时作为明天 keepalive 实现的一个前置预告。因为路由部分是我们实现 keepalive 的基础。

webpack 的 hmr 原理。 1、客户端下载 manifest 资源文件... 2、客户端加载文件完成之后... 3、webpack 监听文件变... 4、客户端接收到构建事件之后..

回顾这几天的历程，你会不会觉得框架开发就是一个发现问题然后解决问题的过程呢？回到我们的主题，我们挑战21天手写前端框架，就会面临一个问题：要写一个怎样的前端框架呢？它是否能解我们项目开发中的问题呢？

几行代码完成一个使用 esbuild 的极简极速的脚手架。 通过分析脚手架，得出我们的框架需求。后续我们都会通过不断的脚手架中添加功能的方式来得到我们的框架需求。

其实现代前端框架的本质就是一个使用 js 编写的 node 命令行工具（cli），快来手写一个属于你自己的命令行工具吧

值得注意的是，这不是一个 React 的零基础入门教程，文章的用意在于讲清楚前端框架的部分运行原理和工作内容，你可以把这当作一篇需求文档来对待，因为我们会在后续的内容中，用更加科学合理的方式来实现它。

手把手教你搭建前端框架开发环境，在 GitHub 上新建一个自己的项目仓库，并成功发布自己的一个 npm 包。