如何从搭建个人前端开发环境（脚手架）入手，深入理解微前端架构？

本文共计6078个文字，预计阅读时间需要25分钟。

长期以来，前端开发缺乏工具化和工程化思维，往往是一堆代码堆砌而成。如今前端已变得非常复杂，一个开发环境都需要你费尽心思。因此，我们抛开了类Next.js、Create React App这样的工具或框架。

很久以前的前端，没有太多工具化工程化思想，一堆代码塞进去完事儿。如今前端已经很卷，卷到了一个开发环境都够你折腾一宿。那么我们抛开类似nextjs、create-react-app这类的工具或框架，我们该如何从零部署一个属于自己的开发环境呢？这篇文章将讲述如何配置一个基础的脚手架，支持React、TypeScrit和单元测试等必要的功能。在这个基础上，大家能够很方便去个性化脚手架。

很久以前的前端，没有太多工具化工程化思想，一堆代码塞进去完事儿。如今前端已经很卷，卷到了一个开发环境都够你折腾一宿。那么我们抛开类似nextjs、create-react-app这类的工具或框架，我们该如何从零部署一个属于自己的开发环境呢？这篇文章将讲述如何配置一个基础的脚手架，支持React、TypeScrit和单元测试等必要的功能。在这个基础上，也能够很方便去个性化脚手架，让它支持比如Electron、Mobx、Redux、PM2、Express(可用来实现SSR服务端渲染)等你想要的扩展功能。

首先，我们要知道对于实际的项目，当然是效率优先，尽可能使用成熟的工具和框架，比如类似Next.js、UmiJS、Ant Design等能够简化UI Elements和脚手架环境的东西，都推荐使用它。他们能够一次性完成常用的UI架构，网站的SEO优化，服务端渲染，资源优化，性能优化(打包，懒加载等)，安全优化等。对于一个项目的快速搭建和稳定性是有比较明显的作用的。