挑战21天手写前端框架 day5 使用 esbuild 的极简脚手架

聪小陈
1,081 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

阅读本文需要 4 分钟，编写本文耗时 1.5 小时

引入 typescript

在项目中使用 typescript 可以使用很多联想，还有对于函数调用出入参也有一个明显的提示作用，可以大大加快我们编写框架的速度，也能减少很多翻阅文档的时间。

pnpm i typescript -w -D

使用 tsc 初始化项目

npx tsc --init

将会自动生成一个 tsconfig.json 文件，我们会在后面需要的时候修改它。

引入 esbuild 编译 ts

使用 esbuild 编译我们的源码，讲 ts 文件转译为 js 文件，将 es6 语法转为 es5 的语法。构建工具现在流行的有很多种，使用 esbuild 的唯一一个原因就是它默认很快。

esbuild.png

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/ 了。

serve.jpg

总结

通过上面的极简脚手架，我们就能分析出我们的极简框架的第一个需求了，

执行 malita dev 提供一个可访链接能访问当前页面。

我们会在明天完成这个需求。

感谢阅读，如果你有任何问题，可以通过评论区和我互动。新人创作者，需要各位大哥点赞评论支持。谢谢。喜欢我的可以加我微信 yu_xiaohu

源码归档

avatar
文章
阅读
粉丝