Jupyter Notebook是一塊所見即所得的畫布，通過在瀏覽器上編輯代碼，讓開發人員實現展示與快速迭代的利器。項目最初給予python，通過安裝插件，對Javascript也有良好的支持。
本文主要針對前端/Javascript工程師在安裝、配置的過程進行記錄。希望notebook能給我們的開發、研究工作帶來便利。
python工程師
推薦專業的Python開發人員，安裝Anaconda用以進行版本控制、包管理：
brew cask install Anaconda
前端(Javascript)工程師
前端工程師使用notebook主要是爲了運行js代碼，所以沒必要安裝專業的python版本管理工具。直接通過python3以及pip3安裝即可。具體安裝方法如下：
安裝Jupyter Notebook
# 首先安裝python3
brew install python3
python3 --version # 確認安裝成功
pip3 --version # 確認pip3安裝成功
pip3 install jupyter notebook
# 此時已經安裝成功，但是還沒有對js的支持。
# 進入你希望存儲notebook文件的目錄，即可運行
cd ~/workspace/
mkdir my-notebooks
jupyter notebook
安裝對javascript的支持
# 安裝對js的支持
npm i -g ijavascript
# 此時jupyter中還是沒有對javascript的支持
# 手動進入ijavascript所在目錄，執行一次.
cd /Users/[user-name]/.nvm/versions/node/v8.1.0/lib/node_modules/ijavascript/bin
./ijavascript.js
# 退出後再一次執行命令，就可以看到對js的支持了。
jupyter notebook
使用npm package
如果notebook僅僅支持javascript，而不支持廣大的npm packages，相信對於我們沒什麼實質意義。所幸，只需要在my-notebooks目錄初始化npm，然後安裝所需package即可支持。
npm init
npm i lodash -S
安裝過後，效果如下：
安裝對ES6的支持
ijavascript作者創建了一個新包jp-babel來支持ES6。
與ijavascript一樣，通過npm全局安裝，再進入到其所在目錄下的bin目錄運行jp-babel.js一次即可。之後每次啓動jupytor notebook，選擇對應類型即可。如下圖。
# 安裝對ES6的支持
npm install -g jp-babel
# 與ijavascript一樣，首次運行需要進入目錄並執行
cd /Users/[user-name]/.nvm/versions/node/v8.1.0/lib/node_modules/ijavascript/bin/jp-babel
./jp-babel.js
運行效果如下圖：
唯一不完美的是，輸入代碼後，使用快捷鍵Control + Enter運行代碼，在第二次時就會報錯。可能因爲是默認使用了嚴格模式。
解決方案是先點擊菜單上的Kernel -> Interrupt，然後再Control + Enter運行。當然，Interrupt也有快捷鍵，默認爲I,I，如果使用不便（比如與Vimium插件衝突），在Help -> Edit Keyboard Shortcuts中可以進行修改。
結論
以上就是Jupyter Notebook的安裝，以及對Javascript支持配置的完整過程。有了她，我們不僅能在文檔中執行代碼，還能以網頁形式分享。同時，通過重現整個分析過程，並將說明文字、代碼、圖表、公式、結論都整合在一個文檔中，與同行們進行有效溝通。