成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CodeSandbox 瀏覽器端的webpack是如何工作的? 上篇

xiaoxiaozi / 2114人閱讀

摘要:可以用于快速原型開發(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)品有很多,例如codepenJSFiddle、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

相關(guān)文章

  • React 和 Redux 動態(tài)導(dǎo)入

    摘要:動態(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ì)文章等著你! 代碼分離與...

    jayzou 評論0 收藏0
  • 淺入深出setState(上篇

    摘要:點燃引擎這是一個組件實現(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)組件可交互...

    wow_worktile 評論0 收藏0
  • 21個讓React 開發(fā)更高效更有趣工具

    摘要:是一個面向開發(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)用程序的哪些包或...

    Soarkey 評論0 收藏0
  • 知乎視頻播放器開源了~

    摘要:知乎視頻播放器開源介紹是什么是一個基于的視頻播放器,目前已在知乎和內(nèi)使用,并在上開源。對于視頻播放器中常見的首幀時長,緩沖次數(shù)等指標(biāo),可以通過接收事件來進(jìn)行打點記錄。結(jié)語所有的工作都會在上進(jìn)行知乎內(nèi)部使用的也是同一個倉庫。 知乎視頻播放器 Griffith 開源介紹 Griffith 是什么? Griffith 是一個基于 React 的視頻播放器,目前已在知乎 web 和 mobil...

    RebeccaZhong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<