Jupyter Notebook 中如何运行JavaScript，安装配置（详解）

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的支持

首先要去官网下载node.js,安装好之后打开node.js 的命令面板（最好以管理员方式运行，提供做够的权限，否则可能安装失败），然后输入以下命令安装对js的支持。

# 安装对js的支持
npm i -g ijavascript

完成上面这步后，会生成以下文件夹。

**此时jupyter中还是没有对javascript的支持 **
手动进入ijavascript所在目录，执行一次 ijavascript.js 文件。这里我用的是phpstrom 运行的该文件
（在上面代码执行完后会有一个路径，根据路径即可找到该文件夹.）

退出后再一次执行 jupyter notebook 命令，就可以看到对js的支持了。

使用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一样，首次运行需要进入目录并执行 jp-babel.js 文件， 只要手动执行一次即可

运行效果如下图：

唯一不完美的是，输入代码后，使用快捷键Control + Enter运行代码，在第二次时就会报错。可能因为是默认使用了严格模式。
解决方案是先点击菜单上的Kernel -> Interrupt，然后再Control + Enter运行。当然，Interrupt也有快捷键，默认为I,I，如果使用不便（比如与Vimium插件冲突），在Help -> Edit Keyboard Shortcuts中可以进行修改。

结论

以上就是Jupyter Notebook 运行JavaScript 的安装，以及对Javascript支持配置的完整过程。有了ta，我们不仅能在文档中执行代码，还能以网页形式分享。同时，通过重现整个分析过程，并将说明文字、代码、图表、公式、结论都整合在一个文档中，与同行们进行有效沟通。

参考文章：
写给Javascript程序员的Jupyter Notebook使用指北
在各个环境安装详细