85 - 《手写 Umi 三：极简脚手架》
发布于 2022年3月29日
通过前面两节，我们已经知道了 react 的项目如何运行，以及路由和 SPA 的概念。这一节我们把文件拆开，利用模块化的方式进行代码组织，同时引入 esbuild 做构建，组成一个极简的脚手架。其最终呈现在浏览器上的效果和上一节相同。
上代码， https://github.com/sorrycc/toy-umi/tree/e9d92c463551c5002e568ecf8a45edcc305597d7
.
├── dist
│ └── index.js
├── layout
│ └── index.jsx
├── pages
│ ├── about.jsx
│ └── index.jsx
├── index.html
├── index.jsx
└── package.json
以上是其文件树。我们将上节课中的 JavaScript 代码拆成 4 个文件，index.jsx、layout/index.jsx、pages/index.jsx 和 pages/about.jsx，index.jsx 是入口文件，其他都是路由组件；index.html 是入口 html，双击打开