寫給Javascript程序員的Jupyter Notebook使用指北

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支持配置的完整過程。有了她，咱們不只能在文檔中執行代碼，還能以網頁形式分享。同時，經過重現整個分析過程，並將說明文字、代碼、圖表、公式、結論都整合在一個文檔中，與同行們進行有效溝通。