Jupyter Notebook is a WYSIWYG canvas that allows developers to showcase and iterate quickly by editing code in the browser. The project was originally given Python and has good support for Javascript through the installation of plug-ins.

This article mainly records the installation and configuration process of front-end /Javascript engineers. We hope notebook will bring convenience to our development and research.

Python engineer

Professional Python developers are recommended to install Anaconda for version control and package management:

brew cask install Anaconda
Copy the code

Front-end (Javascript) engineer

Front-end engineers use Notebook primarily to run JS code, so there is no need to install a professional Python version management tool. Python3 and PIp3 can be installed directly. The installation method is as follows:

Install Jupyter Notebook

Install PYTHon3 first
brew install python3
python3 --version Verify that the installation is successful
pip3 --version Verify that PIP3 is successfully installed
pip3 install jupyter notebook 
The installation is successful, but there is no js support yet.
Go to the directory where you want to store the notebook file and run
cd ~/workspace/
mkdir my-notebooks
jupyter notebook
Copy the code

Install javascript support

Install JS support
npm i -g ijavascript
# There is still no support for javascript in Jupyter
Go to the directory where the ijavascript is located and run it once.
cd/ Users/user -name] /. NVM/versions/node/v8.1.0 / lib/node_modules/ijavascript/bin/ijavascript. JsTo see the support for JS, run the command again after exiting.
jupyter notebook
Copy the code

The use of NPM package

If Notebook only supports javascript and does not support extensive NPM Packages, it will not make any sense to us. Fortunately, it is supported by simply initializing the NPM in the My-Notebooks directory and then installing the required package.

npm init
npm i lodash -S
Copy the code

After installation, the effect is as follows:

Install ES6 support

Ijavascript authors have created a new package jp-babel to support ES6. As with ijavascript, go to the bin directory in the NPM global installation directory and run jp-babel.js once. Each time you start jupytor Notebook, select the corresponding type. The diagram below.

Install support for ES6
npm install -g jp-babel
# Like ijavascript, the first run requires going into the directory and executing
cd/ Users/user -name] /. NVM/versions/node/v8.1.0 / lib/node_modules/ijavascript/bin/jp - Babel. / jp - Babel. JsCopy the code

The operation effect is shown as follows:

The only thing that isn’t perfect is that when you type the code and run it using the Control + Enter shortcut, you get an error the second time. Probably because strict mode is used by default. The solution is to hit Kernel -> Interrupt on the menu first, then Control + Enter. Of course, Interrupt also has Keyboard Shortcuts, which default to I,I, and can be modified in Help -> Edit Keyboard Shortcuts if this is inconvenient (for example, if it conflicts with the Vimium plug-in).

conclusion

This is the installation of Jupyter Notebook and the complete configuration of Javascript support. With her, we can not only execute code in documents, but also share it as a web page. At the same time, communicate effectively with peers by recreating the entire analysis process and integrating captions, codes, diagrams, formulas, and conclusions into a single document.