腳踏esbuild祥雲，胸懷tsx利刃，身披scss羽衣，追尋前端的本質

liulun發表於2023-11-15
UICSS前端

本文所有內容，純屬個人觀點，無意與任何人爭論

前端技術的現狀

我覺得前端技術發展到現在有兩個最主要的特徵

  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 就不會影響其他元件內的同名樣式了

相關文章