526互联

脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质

发布时间 2023-11-15 12:01:11作者: liulun

本文所有内容，纯属个人观点，无意与任何人争论

前端技术的现状

我觉得前端技术发展到现在有两个最主要的特征

  1. 前端工具链为前端工程化提供了强有力的支持

这方面主要是webpack、rollup、esbuild等工具产生的价值，当然还有背后的Node.js。

这些工具让前端开发者可以更从容的开发大型前端项目。

  1. 前端开发框架提升了前端工程师的生产效率

这方面主要是Angular、React、Vue和Svelte等开发框架产生的价值。

这些框架让开发者可以更容易的开发前端项目

前端工具链的价值毋庸置疑，但前端开发框架的价值与影响值得讨论。

前端开发框架之所以能提升前端工程师的生产效率，是因为它为我们做了大量的封装。

这种封装工作在提升生产效率的同时也带来了复杂性，甚至有些封装工作的复杂程度远超了业务逻辑本身。

比如：我们修改一个变量的值，并把这个值更新到Dom中，

在不使用前端框架时，我们一般会写这样的代码

let count = 0
count + = 1;
let dom = document.getElementById("id")
dom.innerHTML = count

使用前端框架后，写的代码变成了这样：

// Vue
// <div>{{count}}</div>
let count = ref(0)
count.value += 1

// React
// <div>{count}</div>
const [count, setCount] = useState(0);
setCount(count + 1);

// Svelte
// <div>{count}</div>
let count = 0;
count += 1;

如你所见，前端开发框架帮开发者做了大量的工作，比如：虚拟DOM，Diff算法，代理观察变化等等。

大有 为了一碟醋，包了一锅饺子 的嫌疑，就算这锅饺子是尤雨溪帮我们包的，

我们也很难说饺子馅里油多了还是油少了，饺子皮是高筋面粉还是低筋面粉。

甚至现在大家都不考虑自己的身子适不适合吃饺子了，既然是尤雨溪帮我包的，那我一定要吃呀！

当我们的页面变卡、页面占用的内存逐渐上升最后OOM时，

我们有考虑过，如果不用这些框架，是不是这类问题更容易被发现，更容易被控制呢？

（当然，这里提到的问题，一定是我们吃饺子的姿势不对导致的，不是饺子本身的问题_）

回归前端的本质

我们要回到前端开发者刀耕火种、茹毛饮血的时代吗？当然不是。

那么哪些东西是我们不想放弃的？

  1. 组件化开发的模式

标题栏一个组件，侧边栏一个组件，菜单一个组件，各个组件有各个组件各自的业务逻辑。

  1. 困扎代码

发布之前，各个组件的代码会被困扎到一起，产出很多个chunk文件，tree-shake会帮我们移除没用到的代码

  1. 热更新或热重载的能力

改了某个组件的代码，能实时看到改动后的结果，如果达不到热更新，那就保留最基本的热重载能力。

  1. 样式隔离

不一定要Shadow Dom，我们可以制定一套规则来约束组件的样式。

  1. 强类型与智能提示

最好有TypeScript的强类型支持，写组件的时候最好能有足够多的智能提示

除了这些东西之外，

像虚拟Dom，Diff算法，Watch对象的变化，组件间通信，数据绑定等，

我们都可以抛弃，这些本来就是我们自己的工作，不需要框架来帮我们做。

归根结底：在写代码的时候，我们要始终知道自己在做什么。

方案

  1. 基于 Web Component 技术与相关的辅助工具

单纯用 Web Component 开发的话，挺麻烦的。

要写一个工具才才能提升我们使用这个方案的开发体验，

比如把template、css样式和代码文件封装到一个单独的组件中

搞定这个工具没那么容易，而且搞不好又回到了老路上，等于自己开发了一个前端框架，

我在这个方向上做过一些尝试，后来就放弃了

  1. 基于 JSX/TSX 技术及相关辅助工具

现在VSCode对JSX/TSX语法支持的很好，esbuild也内置支持对JSX/TSX的困扎

最关键的是：实现一个简单的JSX/TSX解析器非常容易（不依赖React库）

JSX/TSX解析器

废话不多说，直接看解析器的代码吧：

// React.ts
let appendChild = (children: any,node: Node)=> {
    if (Array.isArray(children)) {
        for (const child of children) {
            if(child) appendChild(child,node)
        }
    } else if (typeof children === "string" || typeof children === "number") {
        let textNode = document.createTextNode(children as any)
        node.appendChild(textNode)
    } else if (typeof children.nodeType === "number") {
        node.appendChild(children)
    }
}
let appendAttr = (attr: object,node: HTMLElement)=>{
    for (let key of Object.keys(attr)) {
        let val = attr[key];
        if(key === "style"){
            node.setAttribute("style", val)
        } else if(typeof val === "function"){
            if(key.startsWith("on")){
                node.addEventListener(key.toLocaleLowerCase().substring(2), val)
            }
        } else if(typeof val === "object"){
            node[key] = val
        }        
        else {
            node.setAttribute(key, val)
        }
    }
}
let createElement = (tag: any, attr: any, ...children: any[]) => {
    if(typeof tag === "string"){
        let node = document.createElement(tag);
        if(attr) appendAttr(attr,node)
        if(children) appendChild(children,node)
        return node;
    } else if(typeof tag === "function"){
        let obj = tag({...attr,children})
        return obj
    }   
}
let Fragment = (attr:any) =>{
    const fragment = document.createDocumentFragment()
    appendChild(attr.children, fragment)
    return fragment
}
export default {
    createElement,
    Fragment
}

没错，就这么4个简单的方法，就能解析大部分JSX/TSX语法

像在JSX/TSX中使用SVG这类需求，我就直接忽略了，遇到这类需求用原始的HTML方法处理最好

下面是一个简单的示例

import React from "./React"; 
let App = ()=>{
  let count = 1;
  return <div>{count}</div>
}
document.body.appendChild(<App/>);

这个组件的第一行导入了前面介绍的四个方法

注意：这个组件中没有使用任何React对象的方法，也得导入React对象，而且必须叫React对象，不然esbuild不认。

子组件示例

//主组件  App.tsx
import React from "./React";
import LeftPanel from "./LeftPanel";
import MainPanel from "./MainPanel";
let App = ()=>{
  return <><LeftPanel/><MainPanel/></>
}
document.body.appendChild(<App/>);

// 子组件  LeftPanel.tsx
import React from "./React"; 
export default function () {  
  let count = 1;
  return <div>{count}</div>
}

其他一些动态创建元素的方法也都支持，比如：

//示例1
<div>
    {[...Array(8)].map((v,i)=><div>{`${i}`}</div>) }
</div>

//示例2
let container = document.getElementById("container");
for(let i=0;i<6;i++){
    let row = <div class="row"></div>            
    for(let j=0;j<7;j++){
        let cell = <div><div class="cellHeader">{obj.content}</div></div>        
        row.appendChild(cell)
    }
    container.append(row)
}

用esbuild启动调试服务器

先来看脚本代码：

// ./script/dev.js
let esbuild = require("esbuild")
let {sassPlugin} = require("esbuild-sass-plugin")
let fs = require("fs")
let startDevServer = async ()=>{
    let content = `<html><head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="./Index.css">
</head><body>
    <script src="./Index.js"></script>
    <script>
        new EventSource('/esbuild').addEventListener('change', () => location.reload())
    </script>
</body></html>`;
    await fs.writeFile(`./dist/Index.html`,content)
    let ctx = await esbuild.context({
      entryPoints: [`./Index.tsx`],
      bundle: true,
      outdir: 'dist',
      plugins: [sassPlugin()],
      sourcemap:true
    })  
    await ctx.watch()  
    let { host, port } = await ctx.serve({
      servedir: 'dist',
    })
    let devServerAddr = `http://localhost:${port}/index.html`
    console.log(devServerAddr)
  }
startDevServer();

有了这个脚本之后，你只要在package.json中加一行这样的指令

"dev": "node ./script/dev.js",

就可以通过这个命令行命令

npm run dev

启动你得调试页面了

如你所见，我们为esbuild增加了esbuild-sass-plugin插件，这样我们就可以在tsx/jsx组件中使用scss样式了

import "./Index.scss";

上面的模板html代码中有一行这样得脚本

new EventSource('/esbuild').addEventListener('change', () => location.reload())

此脚本为esbuild的热重载服务，

当我们修改某个组件的代码时，整个页面会跟着刷新

这不是热更新，只是热重载，有它就够了，上热更新代价太大，就不要自行车了。

esbuild 打包产物

先看代码

// ./script/release.js
let esbuild = require("esbuild")
let {sassPlugin} = require("esbuild-sass-plugin")
let fs = require("fs")

let release = async ()=>{
    let content = `<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="./Index.css">
</head><body><script src="./Index.js"></script></body></html>`;
    await fs.writeFile(`./release/Index.html`,content)
    let ctx = await esbuild.build({
      entryPoints: [`./Index.tsx`],
      bundle: true,
      outdir: 'release',
      plugins: [sassPlugin()],
      minify: true,
      sourcemap:false
    })
    console.log("build ok")
    }
release();

package.json中加入：

"release": "node ./script/release.js"

打包指令：

npm run release

打包代码比较简单，关键点是minify设置为true以压缩输出产物。

scss 隔离样式

假设我们约定一个组件的根元素有一个父样式，

这个父样式约束着这个组件的所有子元素得样式

那就可以用下面的代码，让组件的样式作用于组件内，不污染全局样式

//ViewDay.scss
#ViewDay{
    cursor: pointer;
    .bgLine{        
        //
    }
    #JobContainer{
        //
    }
}

// 子组件  ViewDay.tsx
import React from "./React"; 
import "./ViewDay.scss";
export default function () {  
  return <div id="ViewDay">
    <div class="bgLine"></div>
    <div id="JobContainer"></div>
  </div>
}

这样 .bgLine 和 #JobContainer 就不会影响其他组件内的同名样式了