阅读本文需要 4 分钟，编写本文耗时 1.5 小时
引入 typescript
在项目中使用 typescript 可以使用很多联想，还有对于函数调用出入参也有一个明显的提示作用，可以大大加快我们编写框架的速度，也能减少很多翻阅文档的时间。
pnpm i typescript -w -D 复制代码
使用 tsc 初始化项目
npx tsc --init 复制代码
将会自动生成一个 tsconfig.json 文件，我们会在后面需要的时候修改它。
引入 esbuild 编译 ts
使用 esbuild 编译我们的源码，讲 ts 文件转译为 js 文件，将 es6 语法转为 es5 的语法。构建工具现在流行的有很多种，使用 esbuild 的唯一一个原因就是它默认很快。
pnpm i esbuild -w -D 复制代码
修改构建命令，使得我们能够快捷的启动构建脚本。
package.json
"scripts": { "build": "pnpm -r --filter ./packages run build", "dev": "pnpm -r --filter ./packages --parallel run dev" }, 复制代码
根目录下面这么编写的一样是当你执行 pnpm build 的时候，将会执行所有子包中的 build 脚本，这样我们就可以执行一次就构建全部的包。
packages/malita/package.json
"scripts": { "build": "pnpm esbuild src/** --bundle --outdir=lib", "dev": "pnpm build -- --watch" }, 复制代码
子包中配置 build 脚本，来执行 esbuild 编译，将 src 目录下面的文件编译到 lib 文件中。
配置完成之后，尝试执行 pnpm build。
➜ malita git:(master) ✗ pnpm build > @ build /Users/congxiaochen/Documents/malita > pnpm -r --filter ./packages run build > malita@0.0.2 build /Users/congxiaochen/Documents/malita/packages/malita > pnpm esbuild src/index.ts --bundle --outdir=lib lib/index.js 100b ⚡ Done in 1ms 复制代码
可以看到构建只花了 1ms。
编写 dev 入口
在 packages/malita/bin/malita.js 中添加 dev command，这里昨天介绍过了，这里不做多余阐述了。
#!/usr/bin/env node const { Command } = require('commander'); const program = new Command(); // ... 略 program.command('dev').description('框架开发命令').action(function() { require('../lib/dev') }); program.parse(process.argv); 复制代码
通过上面的命令我们完成了当用户执行 malita dev 的时候，会 require('../lib/dev')，我们只需要在 src/dev.ts 中编写我们需要的逻辑就可以了。
那么我们该在 dev 里面写什么呢？或者说 dev 服务的功能是什么呢？
极简的脚手架
回想一下第三天时候，我们做的尝试让一个页面运行起来。最后我们使用了 jsx 的语法，编写了 react 项目，并且成功的运行起来了。
所以我们先用我们新的目录结构，组织一下这个 demo。
新建 examples/app/src/index.tsx
import React from 'react'; import ReactDOM from 'react-dom'; const Hello = () => { const [text, setText] = React.useState('Hello Malita!'); return (<span onClick={() => { setText('Hi!') }}> {text} </span>); }; const root = ReactDOM.createRoot(document.getElementById('malita')); root.render(React.createElement(Hello)); 复制代码
新建 examples/app/www/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Malita</title> </head> <body> <div id="malita"> <span>loading...</span> </div> <script src="./index.js"> </script> </body> </html> 复制代码
配置执行脚本 scripts
"scripts": { "build": "pnpm esbuild src/** --bundle --outdir=www", "dev": "pnpm build -- --watch" }, 复制代码
执行编译 pnpm build，然后浏览器中打开 www/index.html 就能看到我们的页面了。 如果执行 pnpm dev，每一次更新代码之后，只要刷新页面就可以看到最新的内容了。
直到现在，我们都是通过在浏览器中打开 html 的方法，访问我们的页面，如果你想通过类似 http://127.0.0.1:3000/ 的方式访问页面。
那可以使用 serve 命令，这个在后面验证产物是否构建成功的时候，是一个很有帮助的服务。
// cd examples/app pnpm i serve --D 复制代码
配置执行脚本 scripts
"scripts": { "build": "pnpm esbuild src/** --bundle --outdir=www", "dev": "pnpm build -- --watch", "serve": "cd www && serve --port=8000" }, 复制代码
执行 pnpm serve 就可以 http://127.0.0.1:3000/ 了。
总结
通过上面的极简脚手架，我们就能分析出我们的极简框架的第一个需求了，
执行 malita dev 提供一个可访链接能访问当前页面。
我们会在明天完成这个需求。
感谢阅读，如果你有任何问题，可以通过评论区和我互动。新人创作者，需要各位大哥点赞评论支持。谢谢。
