摘要:可以用于快速原型開發(fā)展示還原等等相似的產(chǎn)品有很多,例如已廢棄則更加強大,可以視作是瀏覽器端的運行環(huán)境甚至在版本已經(jīng)支持模式,支持的插件和模式還有主題另外支持離線運行。
這期來關(guān)注一下CodeSandbox, 這是一個瀏覽器端的沙盒運行環(huán)境,支持多種流行的構(gòu)建模板,例如 create-react-app、 vue-cli、parcel等等。 可以用于快速原型開發(fā)、DEMO 展示、Bug 還原等等.
相似的產(chǎn)品有很多,例如codepen、JSFiddle、WebpackBin(已廢棄).
CodeSandbox 則更加強大,可以視作是瀏覽器端的 Webpack 運行環(huán)境, 甚至在 V3 版本已經(jīng)支持 VsCode 模式,支持 Vscode 的插件和 Vim 模式、還有主題.
另外 CodeSandbox 支持離線運行(PWA)?;旧峡梢越咏镜?VSCode 的編程體驗. 有 iPad 的同學(xué),也可以嘗試基于它來進(jìn)行開發(fā)。所以快速的原型開發(fā)我一般會直接使用 CodeSandbox
目錄
引
基本目錄結(jié)構(gòu)
項目構(gòu)建過程
Packager
WebpackDllPlugin
在線打包服務(wù)
回退方案
Transpilation
基本對象
Manager
TranspiledModule
Transpiler
BabelTranspiler
Evaluation
技術(shù)地圖
擴(kuò)展
引筆者對 CodeSandbox 的第一印象是這玩意是運行在服務(wù)器的吧? 比如 create-react-app 要運行起來需要 node 環(huán)境,需要通過 npm 安裝一大堆依賴,然后通過 Webpack 進(jìn)行打包,最后運行一個開發(fā)服務(wù)器才能在瀏覽器跑起來.
實際上 CodeSandbox 打包和運行并不依賴于服務(wù)器, 它是完全在瀏覽器進(jìn)行的. 大概的結(jié)構(gòu)如下:
Editor: 編輯器。主要用于修改文件,CodeSandbox這里集成了 VsCode, 文件變動后會通知 Sandbox 進(jìn)行轉(zhuǎn)譯. 計劃會有文章專門介紹CodeSandbox的編輯器實現(xiàn)
Sandbox: 代碼運行器。Sandbox 在一個多帶帶的 iframe 中運行, 負(fù)責(zé)代碼的轉(zhuǎn)譯(Transpiler)和運行(Evalation). 如最上面的圖,左邊是Editor,右邊是Sandbox
Packager 包管理器。類似于yarn和npm,負(fù)責(zé)拉取和緩存 npm 依賴
CodeSandbox 的作者 Ives van Hoorne 也嘗試過將 Webpack 移植到瀏覽器上運行,因為現(xiàn)在幾乎所有的 CLI 都是使用 Webpack 進(jìn)行構(gòu)建的,如果能將 Webpack 移植到瀏覽器上, 可以利用 Webpack 強大的生態(tài)系統(tǒng)和轉(zhuǎn)譯機(jī)制(loader/plugin),低成本兼容各種 CLI.
然而 Webpack 太重了
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/105347.html
摘要:動態(tài)導(dǎo)入使用的是的方法來加載代碼。使用到目前為止,我們已經(jīng)演示了如何動態(tài)加載應(yīng)用程序的模塊。還需要公開一個名稱,在該名稱下我們的模塊狀態(tài)將存在于應(yīng)用程序的中。剩下的唯一部分就是把注冊到中。 showImg(https://segmentfault.com/img/bVbpGXm?w=800&h=450); 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你! 代碼分離與...
摘要:點燃引擎這是一個組件實現(xiàn)組件可交互所需的流程,輸出虛擬,虛擬轉(zhuǎn)為,再在上注冊事件,事件觸發(fā)修改數(shù)據(jù),在每次調(diào)用方法時,會自動執(zhí)行方法來更新虛擬,如果組件已經(jīng)被渲染,那么還會更新到中去。 Part one - setState點燃引擎 showImg(https://segmentfault.com/img/bVbdGkJ?w=849&h=270); 這是一個React組件實現(xiàn)組件可交互...
摘要:是一個面向開發(fā)人員和設(shè)計人員的原型工具。這是開發(fā)中最常見的擴(kuò)展插件,并且是開發(fā)人員可以用來調(diào)試其應(yīng)用程序的最有用的工具之一。這可能是開發(fā)工具包中最重要的工具。 為了保證的可讀性,本文采用意譯而非直譯。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你! 下列工具中的重要性與排序無關(guān)。 1.Webpack Bundle Analyzer 有沒有想過你的應(yīng)用程序的哪些包或...
摘要:知乎視頻播放器開源介紹是什么是一個基于的視頻播放器,目前已在知乎和內(nèi)使用,并在上開源。對于視頻播放器中常見的首幀時長,緩沖次數(shù)等指標(biāo),可以通過接收事件來進(jìn)行打點記錄。結(jié)語所有的工作都會在上進(jìn)行知乎內(nèi)部使用的也是同一個倉庫。 知乎視頻播放器 Griffith 開源介紹 Griffith 是什么? Griffith 是一個基于 React 的視頻播放器,目前已在知乎 web 和 mobil...
閱讀 3229·2021-11-08 13:21
閱讀 1209·2021-08-12 13:28
閱讀 1419·2019-08-30 14:23
閱讀 1939·2019-08-30 11:09
閱讀 852·2019-08-29 13:22
閱讀 2699·2019-08-29 13:12
閱讀 2560·2019-08-26 17:04
閱讀 2270·2019-08-26 13:22