小程序 ide 是(shì)個(gè)好東西，除了(le／liǎo)包括調試器，模拟器，編輯器，還包括打包，部署，severless等機制，是(shì)個(gè)很好的(de)工程化模型

我們可以(yǐ)使用 electron 來(lái)搞定，使用自帶的(de) chromium 的(de) devtools 進行遠程調試，然後使用自帶的(de) node 進行 webpack 打包，然後再走 CI

如果隻是(shì)這(zhè)樣，那就(jiù)不(bù)需要(yào / yāo)我搞了(le／liǎo)，哈哈哈哈

no webpack

小程序 ide 最大(dà)的(de)诟病就(jiù)是(shì)打包編譯速度太慢，還不(bù)支持熱更新，隻要(yào / yāo)還有 webpack，那麽這(zhè)個(gè)問題就(jiù)是(shì)無解的(de)

那有沒有新思路呢？

答案是(shì)有的(de)，那就(jiù)使用 type=module

類似的(de)項目還有 vite、snowpack……說(shuō)實話由于(yú)太簡單，我認爲(wéi / wèi)這(zhè)種開發模式沒辦法火起來(lái)

但确實很适合小程序 ide，因爲(wéi / wèi)可以(yǐ)擺脫 webpack，收回主動權，甚至熱更新都可以(yǐ)做了(le／liǎo)，而(ér)這(zhè)一切，隻需要(yào / yāo)啓一個(gè) server

deku for worker

理想很豐滿，現實很殘酷，deku 的(de)思路隻能用于(yú)支持 type=module 的(de)浏覽器，可以(yǐ)我們小程序的(de)邏輯都是(shì)跑在(zài) worker 裏的(de)，根本不(bù)支持 type=module 腫麽辦……

萬幸的(de)是(shì)，最新的(de) chrome 83 已經對 sharedWorker 進行 module 支持，而(ér)且 service worker 的(de)标準也(yě)已經更新了(le／liǎo)，隻是(shì)還沒有被實現

也(yě)許等我搞定小程序引擎的(de)時(shí)候，它也(yě)差不(bù)多得到(dào)支持啦

我們最終肯定是(shì)使用 sw 沒錯了(le／liǎo)，下一篇講自動化部署會講到(dào)，我們要(yào / yāo)利用 pwa 跑 lighthouse，然後部署上(shàng)線後還支持【将小程序添加到(dào)桌面】功能

好吧，和(hé / huò) web-component 一樣，pwa 也(yě)是(shì)個(gè)雞肋，必要(yào / yāo)性沒有，但是(shì)小玩意還是(shì)一堆，不(bù)搞白不(bù)搞嘛

總結

通過本篇，我們知道(dào)了(le／liǎo)新的(de) ide 思路，抛棄 webpack 和(hé / huò)慢到(dào)死的(de)構建速度，借助 sw（在(zài) module 得到(dào)之(zhī)前隻能用 shared worker 替代） 實現 module 的(de)加載，最終獲得完美的(de)開發體驗

優點除了(le／liǎo)快，還可控，而(ér)且心智負擔也(yě)很小，就(jiù)是(shì)個(gè) server 而(ér)已

我們下一篇講 pwa 怎麽和(hé / huò)小程序結合，已經剩下的(de)步驟（部署，serverless等等）

可以(yǐ)看到(dào)，這(zhè)一整套流程走下來(lái)，就(jiù)是(shì)一套有意思的(de)産品了(le／liǎo)，哈哈

和(hé / huò) web ide 的(de)區别

最後不(bù)得不(bù)說(shuō)一句，小程序 ide 雖然也(yě)是(shì)一個(gè) webide，但我認爲(wéi / wèi)小程序 ide 的(de)模型要(yào / yāo)好得多

因爲(wéi / wèi)我是(shì)不(bù)打算摻合編輯器的(de)，小程序 ide 就(jiù)隻包括調試器和(hé / huò)模拟器和(hé / huò)一個(gè) dev server

至于(yú)編輯器，用戶自己用 vscode 即可

但确實，這(zhè)個(gè)思路和(hé / huò)大(dà)廠的(de) webide 如出(chū)一轍，其實都是(shì)爲(wéi / wèi)了(le／liǎo)自動構建那些東西，真沒必要(yào / yāo)整一個(gè)編輯器了(le／liǎo)，有調試器和(hé / huò)模拟器就(jiù)很幹淨純粹