運行JavaScript代碼片段的20種工具
前端日常開發(fā)中，我們使用喜愛的 IDE 調(diào)試 JavaScript 代碼，比如我喜歡的代碼編輯器有兩個，Sublime Text 3 和 VS Code，前幾年還使用過 Atom，偶爾我們會遇到臨時需要快速分享給同事或者朋友一段代碼的場景，那么在線的 JavaScript 運行環(huán)境的重要性就體現(xiàn)出來了。
為了解決這樣的問題，業(yè)界涌現(xiàn)出了很多很優(yōu)秀的在線編輯器。比如 JS Bin、JS Fiddle、Code Pen、Code Sandbox 等，接觸前端這些年也陸陸續(xù)續(xù)發(fā)現(xiàn)了一些不錯的其他選擇，再看下瀏覽器收藏夾，已經(jīng)有20余種。
下面我們使用20種工具執(zhí)行一段經(jīng)過尾遞歸優(yōu)化過的階乘函數(shù)。
1、使用 iTerm2
在終端工具中安裝 node 環(huán)境，使用 node 運行環(huán)境來執(zhí)行 JS 代碼是我們學(xué)習(xí) node 時候必知必會的一件事。
2、使用 Sublime Text 3
在 Sublime Text 3 中，我們可以使用 build system 來創(chuàng)建構(gòu)建命令，使用構(gòu)建命令來快速執(zhí)行 JS 代碼。
快捷鍵：CMD + B
配置文件
首先安裝依賴 babel-cli
- npm i -g babel-cli
新建 build system
- { "path": "/usr/local/bin", "working_dir": "${project_path:${folder}}", "selector": "source.js", "encoding": "utf-8", "shell": true, "windows": { "cmd": ["taskkill /f /im node.exe >nul 2>nul & node $file"] }, "osx": { "cmd": ["killall node >/dev/null 2>&1; node $file"] }, "linux": { "cmd": ["killall node >/dev/null 2>&1; node $file"] } }
效果圖
3、使用 VSCode
在 VSCode 中，我們可以建立一個 task 來運行 JS，實際上是借助內(nèi)置終端來執(zhí)行 node 命令運行JS。
快捷鍵：CMD + Shift + B
配置文件
- /.vscode/tasks.json
- { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "Run ES6", "type": "shell", "command": "node ${file}", "group": { "kind": "build", "isDefault": true } } ] }
效果圖
4、使用瀏覽器控制臺
我們經(jīng)常使用瀏覽器的 Console 功能來調(diào)試 JS 代碼，比如 Chrome 的 DevTools，火狐的 Web 控制臺，這些我們已經(jīng)不陌生了。
5、使用 Firefox 代碼草稿紙
在 Firefox 瀏覽器中，有一個特別好用的功能叫 代碼草稿紙，你可以在這里面輸入一些 JS 代碼執(zhí)行查看結(jié)果。
快捷鍵：在火狐瀏覽器下 Shift + F4
6、使用 Chrome Sources 面板
Chrome 提供了強(qiáng)大的 DevTools，其中 Sources 面板允許你建立一些 Snippets方便執(zhí)行 JS 代碼。
快捷鍵：CMD + Enter 執(zhí)行代碼
7、使用 JS Bin
JS Bin 是一個開源的用于 debug web 應(yīng)用的工具，工具面板具有 Console，可以用于執(zhí)行 JS 代碼。
8、使用 JS Fiddle
JS Fiddle 是一個前端同學(xué)經(jīng)常寫 demo 例子的好地方，這里可以以 CDN 的方式使用一些第三方類庫，很方便搭建頁面demo。
因為 JS Fiddle 工具本身并沒有提供 console 面板，所以可以配合瀏覽器開發(fā)者工具來打印輸出 JS 代碼結(jié)果。
9、使用 CodePen
CodePen 是一個非常棒的在線代碼編輯器，幾乎可以編寫所有的前端Web應(yīng)用。在這里使用它來執(zhí)行一段 JS 代碼真的是大才小用了。
10、使用 MDN 的 “JavaScript Demo”
經(jīng)常查閱 MDN 的小伙伴一定能記得，在一些 JavaScript 文檔中會有一個 JavaScript Demo小工具，比如說 JavaScript 標(biāo)準(zhǔn)內(nèi)置對象 Function，在這里可以執(zhí)行一些 JS 代碼。
11、使用 PLAYCODE
PLAYCODE 提供了在線快速運行 Web 程序的環(huán)境。
12、使用 Flems
Flems 提供了一個 Web 開發(fā)環(huán)境，可以分享一些前端小demo。
13、使用 JSitor
JSitor 是一個不錯的在線執(zhí)行 JS 代碼工具，我比較喜歡它的代碼截圖功能，能生存很漂亮的代碼截圖圖片，不過目前功能還不是特別完善，比如代碼的高亮?xí)簳r是個問題。
14、使用 Code Sandbox
Code Sandbox 是一個在線的可以創(chuàng)建Web應(yīng)用，特點是可以使用一些類庫模版，比如 React/Vue/Angular 是創(chuàng)作原型的好地方，我經(jīng)常使用它來編寫一些 Vue 小 Demo。
15、使用 Web Maker
Web Maker 是一個可以快速在瀏覽器創(chuàng)建離線Web應(yīng)用，Web Maker 還提供了 Chrome 插件，可以離線使用。
16、使用 LeetCode Playground
LeetCode 提供了優(yōu)秀的 Playground 工具，支持各種語言版本切換，其中也支持 JavaScript，還能沒事兒刷刷題不是。
17、使用 Repl.it
Repl.it 是一個一站式可在線構(gòu)建、協(xié)作的IDE，同時也提供了 Node 運行環(huán)境，還可以連接 github 使用 gist 同步代碼片段。
18、使用 RunKit + npm
RunKit + npm 在 npm 上我們能發(fā)現(xiàn)很多優(yōu)秀的庫，npm 提供了一個功能，可以使用 RunKit取運行測試你的 package，當(dāng)然也能測試一段代碼。
19、使用 StackBlitz
StackBlitz 有在線 VSCode 之稱，編輯器使用的是微軟開源的 Monaco Editor，和 Code Sandbox 類似，提供了一些類庫模版，但是目前還沒有 Vue 的。
20、使用 Plunker Next
Plunker Next 新版的 Plunker 提供了在線創(chuàng)建小 demo 的能力，同時也便于分享。
其他
好用的工具層出不窮，其實還有一些其他的工具或者解決方案可以作為選擇，比如下面四個不同的類型，我每個挑選了一個代表工具。
在線編程
- scrimba - The interactive screencasting platform
本地應(yīng)用
- RunJS - A scratchpad for your thoughts, a playground for your creativity...
編輯器插件
Quokka.js - Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.
云開發(fā)環(huán)境
- Visual Studio Online - Cloud-powered dev environments accessible from anywhere
工具對比
總結(jié)
其實對于我而言
- 如果想運行一段代碼得到測試結(jié)果，最快的方式會選用瀏覽器控制臺，因為瀏覽器就是最棒的工具
- 如果想要寫一個 demo 放在博客上，我會選擇 jsfiddle、codepen、codesandbox，這里提供了寫demo需要的一切
- 如果想分享漂亮的代碼片段，我會使用 Carbonize 生成一張圖片，就像博文開頭的那張圖片
使用在線編輯器的意義我覺得在于快捷、便于分享與協(xié)作，而很愛的其實還是VSCode。
沒準(zhǔn)兒你正在編寫你的 playground，或者你有更好的工具，希望和大家一起分享
