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

liulun

发布于 2023-11-16 08:12:43

2200

发布于 2023-11-16 08:12:43

文章被收录于专栏：liulun

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

前端技术的现状

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

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

这方面主要是webpack、rollup、esbuild等工具产生的价值，当然还有背后的Node.js。这些工具让前端开发者可以更从容的开发大型前端项目。

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

这方面主要是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时，

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

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

回归前端的本质

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

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

组件化开发的模式

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

困扎代码

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

热更新或热重载的能力

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

样式隔离

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

强类型与智能提示

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

除了这些东西之外，

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

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

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

方案

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

单纯用 Web Component 开发的话，挺麻烦的。要写一个工具才才能提升我们使用这个方案的开发体验，比如把template、css样式和代码文件封装到一个单独的组件中搞定这个工具没那么容易，而且搞不好又回到了老路上，等于自己开发了一个前端框架，我在这个方向上做过一些尝试，后来就放弃了

基于 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 就不会影响其他组件内的同名样式了

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-11-15，如有侵权请联系 cloudcommunity@tencent.com 删除

scss