從事複雜項目,無論您是經驗豐富的程序員還是大一新生,您幾乎都會遇到問題。 當您將項目拆分為多個模塊時,就會出現問題,從而使追踪錯誤和找到解決方案變得更加困難。 在其他情況下,調試單個實例可能很困難,因為您還沒有找到解決您一直在處理的問題的正確解決方案。
它有時也會作為一段代碼出現,當時看起來可能很複雜。 JavaScript 是一種非常容易學習的基於 Web 的語言。 只需啟動您的桌面瀏覽器並導航到開發人員工具(通常是 F12),您就完成了! 然後,您可以在無需安裝或運行任何復雜軟件的情況下嘗試 JS。
要開始,您只需要一個瀏覽器。 開箱即用地擁有所有這些簡單性真是太好了,但有時您需要更多。 例如,假設您想試驗一個最近發現的新 Web API,但又不想開始一個新項目。
在這篇文章中,我們將比較和對比三個最流行的 JS 遊樂場,CodePen、CodeSandbox 和 StackBlitz。 讓我們開始吧!
CodePen
前端 Web 開發工具一直在發展,文本編輯器是最新技術的重要組成部分,它使開發人員的生活變得更簡單。 除了 Atom 或 Notepad++ 等獨立的文本編輯器之外,近年來基於瀏覽器的編輯器出現了爆炸式增長,這些編輯器不需要安裝程序並促進更大的協作。
CodePen 是一個“用於測試和展示用戶創建的 HTML、CSS 和 JavaScript 代碼片段的在線社區”,它為學習如何更好地編寫前端網頁提供了絕佳的機會。
CodePen 為您提供兩種“模式”。 第一個也是最常用的是鋼筆。 它就像單擊一個按鈕並直接傳送到編輯器一樣簡單。 從那裡,您可以訪問預覽面板以及基本的 HTML、CSS 和 JS 編輯窗口。
沒有“文件系統”、“IntelliSense”或其他任何東西——只有簡單的語法高亮和像美化這樣的快速命令。 在選項選項卡中,您可以從有限範圍的預處理器中選擇所有三種語言(例如 TypeScript for JS)或添加到外部源的連接。
如果您只需要免費完成任何事情,那麼任何一個編輯器都足夠了。 對於不需要大量設置或庫的任何東西,我建議使用 CodePen——簡單的 HTML、CSS 和 JS,頂部帶有可選的預處理器。 如果您想利用 Playground 來改善您的社交媒體形像或開發個人作品集,CodePen 是一個更好的選擇。
高級版
您可以在 CodePen 上選擇更多選項。 如果您按年付費,您可以獲得每月 12 美元、19 美元或 39 美元的三種高級計劃之一。 您可以在三層中的任何一層上創建無限數量的私人筆、帖子和收藏。
您還將獲得 Pro 徽章(社交提升)、實時協作模式訪問權限、無廣告等等。 還有某些特定於團隊的策略和其他跨層區別。 查看他們的官方計費板以獲取更多信息。
主要功能
除了在 CodePen 中創建 HTML、CSS 和 JavaScript 之外,還有一些其他的東西使它與眾不同。
- 可以實時查看您的代碼。 它不需要編譯。
- 實驗可以讓你學習新事物。
- 創建微小的測試用例來查找和解決問題。
- 展示您的精彩作品。
- 創建和存儲筆以供以後使用。
- 嘗試其他開發人員的代碼並查看它的實際效果。
優點
- 首先,沒有成本。
- 內置學習資源。
- 與他人合作並比較項目,以了解他們未來的發展方向。
- 用戶界面易於使用且簡單明了。
弊端
- 代碼庫很小,自動代碼完成不足。 它只適用於單頁項目,無法處理更大的項目。
- 在 CodePen 上,您可以創建私人筆,但您需要升級到 Pro 會員資格(每月 9 美元)。
代碼沙盒
CodeSandbox 是一個基於 Web 的代碼編輯器。 它為您自動進行蒸騰、打包和依賴管理,讓您只需單擊一下即可構建一個新項目。 在您創建了一些令人著迷的東西之後,您可以通過簡單地分享網站來與他人分享。
該編輯器與任何 JavaScript 項目兼容,儘管它包含某些特定於 React 的功能,例如將項目保存在 create-react-app 模板中的選項。
您在 CodeSandbox 中構建的任何項目都以模板開頭。 它可以與特定的庫、框架或運行時(包括 Node.js)相關,也可以使用簡單的標準 Web 技術。 選擇模板後,您將被發送到編輯器,您將在其中找到所有必要的文件,並且預覽窗口已經打開。
您可以訪問所有沙盒中的“文件系統”,這意味著您可以創建新文件、利用模塊(包括 NPM 包)以及與靜態資產交互。 還有機會修改特定於模板的配置文件。
您甚至可以為您的獨特用例構建自己的模板,包括文件結構和依賴項,就像在 IDE 中一樣。 由於該工具鏈接到 Github,您可以快速生成提交並打開 PR。 您可以立即將您的應用程序部署到 ZEIT 或 Netlify。
CodeSandbox 專業團隊
CodeSandbox 是一家允許開發人員構建基於瀏覽器的 Web 應用程序開髮沙箱的荷蘭企業,它已正式發布了一個協作平台,允許團隊在雲中處理代碼。 新產品 Team Pro 是為完整的產品團隊構建的無代碼解決方案,從設計師和經理到質量保證 (QA) 團隊等等。
項目以用戶友好的界面提供給任何希望對 Web 應用程序進行更改或接受更改的人,避免使用其他方法,例如向開發人員發送註釋和建議以執行更改、將它們傳回討論並重複該過程。
主要功能
- 基於 Web 的代碼編輯器和原型工具。
- 對於本地使用,沙盒可以很容易地以 zip 文件的形式下載。
- 程序設計 在沙盒中完成,可以很容易地與同事共享。
優點
- 改進的用戶體驗和對編輯器的更好控制。
- 可以在單獨的窗口中修改和查看實時預覽功能。
- 代碼自動格式化並包含 CLI (codesandbox-cli)
- 支持高級 npm 模塊。
- 帶有建議的漂亮錯誤消息。
- 它通過提供更好的終端、測試查看器和問題查看器來改善調試體驗。
弊端
- 最終消費者會接觸到許多個性化設置。
- 從本地計算機拖放文件無法正常運行。
- CodeSandbox 中必須遵循一定的文件夾結構。
- 私人沙盒的功能僅供顧客使用。
閃電戰
StackBlitz 是一個基於 Visual Studio Code 的 Web 應用程序在線 IDE。 該平台與桌面版本一樣具有響應性和適應性。 StackBlitz 是一個預裝的在線 IDE 角度和反應 開發工具。
Thinkster.io 構建了這個奇妙的項目,以盡可能簡單地開始您的 Angular 或 React 項目,而不必擔心依賴項安裝或構建設置。 StackBlitz 提供了許多目前其他在線代碼編輯器所沒有的驚人而獨特的功能。 因此,值得進一步研究 StackBlitz 並發現這個在線 IDE 所提供的功能。
Stackblitz 與完整的 IDE 具有極強的可比性,特別是如果您無法告別 VS 代碼,因為該工具是基於它的。 該軟件包具有多種功能,可讓您開始並繼續創建全棧應用程序。
該程序由開發人員熟知的 Visual Studio 提供支持。 離線編輯是該項目的突出特點。 為了實現這一點,Stackblitz 團隊創建了一個瀏覽器內的網絡服務器。 在您鍵入時,它會自動安裝依賴項、編譯、捆綁並進行熱重載。
高級版
Cadet、Astronaut 和 Commander 分別免費提供,每月 8 美元和每月 29 美元。 Astronaut and Commander 包括許多功能,例如無限的私人項目、無限的文件上傳、邀請核心團隊 Slack 頻道等等。 有關詳細信息,請參閱官方計費板。
主要功能
- 將 NPM 包添加到您的項目中。
- 得益於新穎的瀏覽器內開發服務器,您可以在離線時進行編輯。
- 一個託管應用程序 URL,允許我們隨時訪問(和共享)我們的實時應用程序。
- 其他值得注意的 Visual Studio Code 功能包括 Intellisense、項目搜索 (Cmd/Ctrl+P)、轉到定義等。
優點
- Firebase 的部署功能。
- 該編輯器非常易於使用且速度極快。
- 用戶可以訪問 package.json、index.html 和 index.js。
- 也可以嵌入的可共享源代碼。
- 頁面大部分區域的實時預覽,必要時可選擇在不同頁面上打開。
- 離線時,編輯
- 智能完成和改進的 Intellisense。
- Stackblitz 的核心是 開源.
弊端
- 您對構建或開發人員服務器沒有影響,因為它們是由 create-react-app 命令管理的。
- 在 React 中,應該遵守基本的文件夾結構。
- 無法自動格式化代碼,但可以手動進行。
結論
如今,我們在上面看到的編碼遊樂場可以用來完全構建任何 Web 項目。 當您可以直接從 Web 瀏覽器構建、調試、測試和部署時,無需在 PC 上安裝繁瑣的 IDE。
在我看來,StackBlitz 將是其中最好的,因為它是一個基於 Web 的 IDE,它允許 JavaScript、Angular 和其他開箱即用的開發項目,無需安裝任何本地開發環境,如 Node.js、npm、或角。 它提供與在本地使用 Visual Studio Code 相同的體驗。 實際上,因為 StackBlitz 是由 Visual Studio Code 驅動的,所以感覺它與桌面版本一樣快速且通用。
CodePen、CodeSandbox 和 StackBlitz 中的哪一個是您的首選工具? 讓我們在評論中知道。
阿巴蒂亞
感謝這篇精彩的文章,一旦我看到 stackblitz.com,我就知道這就是我想要的。