前端|JupyterLab前端二开基础上手指南

JupyterLab前端二开基础上手指南

背景

项目上需要使用jupyter作为在线python编辑器来做为算法编辑器，方便用户在对数据源处理时使用python进行逻辑编写与代码操作。同时基于已有的jupyter能力，对某些个性化功能做了定制化的扩展。

故针对此，结合jupyter文档与实际实践，总结一下前端层面，如何基于jupyter进行二次开发。

环境搭建

所需要的核心工具

python环境
- 建议使用python3环境，python环境安装请自行从网上获取。
conda
- 核心作用：用于创建/管理python环境下开发所需要的虚拟环境。
- 安装包地址
- 下载完成后终端中运行conda -h，输出结果表示安装正确。
- jupyterlab官网建议使用memba来进行虚拟环境、依赖等初始化或安装操作。在有梯子的场景下，可以暂时忽略，直接使用conda 来进行管理；如果没有则需配置镜像，安装memba，按需使用。

前端开发

基于jupyter进行前端二开的核心，实质就是更具jupterlab提供的插件机制，通过前端调用jupyterlab api的形式，对jupyter进行拓展。

juputer同样也提供了前端开发示例，支持使用React或原生dom进行二次开发。前端示例点击前往。内部提供了多种扩展能力的示例，可按需研究与使用。

jupterlab api地址

点击前往

如果存在界面层面的扩展，还需要使用Widget类，可以通过继承Widget类来实现自定义界面的开发

@lumino地址

点击前往

初始化前端`jupterlab`模版


bash
 代码解读
复制代码
# 全局安装python工具
pip install "copier~=9.2" jinja2-time

# 创建项目文件夹并进入文件夹
mkidr jupyter-extension && cd jupyter-extension

# 下载模版
copier copy --trust https://github.com/jupyterlab/extension-template .

您将被要求提供一些基本信息，例如可以像这样设置：


csharp
 代码解读
复制代码
🎤 What is your extension kind?
   frontend
🎤 Extension author name # 模版名称
   tuto
🎤 Extension author email # 邮箱
   [email protected]
🎤 JavaScript package name # 包名
   jupyter-extension
🎤 Python package name # 后续打包python插件的包名
   jupyter_extension
🎤 Extension short description
   Minimal JupyterLab example.
🎤 Does the extension have user settings?
   No
🎤 Do you want to set up Binder example?
   Yes
🎤 Do you want to set up tests for the extension?
   Yes
🎤 Git remote repository URL
   https://github.com/github_username/hello-world

执行完后，将在jupyter-extension文件夹下初始化出对应的文件。详细文档请查看传送门

加入`enviorment.yml`

在项目根路径下新建enviorment.yml，内容如下


markdown
 代码解读
复制代码
# 此为执行conda create时创建的虚拟环境容器名称
name: jupyter-extension
channels:
  - conda-forge
dependencies:
  - jupyterlab >=4.3.0
  - nodejs=22
  - pytest
  - pytest-check-links
  - pytest-jupyter >=0.6.0
  - python=3

创建虚拟环境


lua
 代码解读
复制代码
conda create

创建conda 虚拟环境。创建完成后，可按照提示执行conda activate jupyter-extension进入虚拟环境。

默认情况下， conda在安装后每次进入终端都会进入base环境，可以使用conda config --set auto_activate_base false

conda常用命令

conda env list 查看conda所有创建的虚拟环境列表

conda activate 进入的虚拟环境

conda deactivate退出虚拟环境

conda env remove --name 删除某个虚拟环境啊

依赖安装与运行

此步骤在conda虚拟环境中执行操作


bash
 代码解读
复制代码
# 安装依赖
pip install -e "."

# 创建yarn.lock文件(初始安装依赖时操作)
touch yarn.lock

# 关联开发版本的扩展到 JupyterLab
jupyter labextension develop . --overwrite

# 打包插件
jlpm build:prod 

# 运行jupyterlab
jupyter lab

如果在pip install -e "."未安装node依赖，请执行jlpm install安装node依赖。

jlpm默认情况下不用特地在全局安装，虚拟环境下在第一步安装依赖时已默认安装，可在虚拟环境下直接使用

此时，会默认打开http://localhost:8888，可查看到安装的插件已执行。

本地开发与热更新

此步骤在conda虚拟环境中执行操作

本地开发需要打开两个终端分别运行前端与服务环境。

终端一，项目根目录下执行jlpm watch
终端二，项目根目录下执行执行juputer lab

打开http://localhost:8888即可进行本地开发与实时热更新。

至此，前端开发环境已准备完毕，可以按照业务诉求与api来进行定制化开发。

发布与部署

本地开发完后，插件发布机制包含如python包发布、本地化插件安装等。这里根据实际开发情况主要阐述本地开发后，源码安装的操作。

安装python工具

此步骤在全局环境下执行


 代码解读
复制代码
pip install build

源码部署

源码部署有两种方式：jupyter labextension安装和 python插件安装

`Python`插件安装(推荐)

此方式实质是将前端插件打包成一个python库，并通过pip install来进行安装。

操作步骤如下:

【此步骤在conda虚拟环境中执行操作】在项目根目录下执行jlpm build，等待打包完成
【此步骤在全局环境下执行】打包完成后，在项目根目录下执行python -m build
- 构建完成后会在根目录下生成dist/*****-py3-none-any.whl 和 dist/****.tar.gz两个文件
- 在全局环境下执行pip install *****-py3-node-any.whl文件，即可为全局环境下的jupyter lab安装此插件。请在此之前执行pip install jupyterlab来在全局安装
- 安装完成后可执行jupyter labextension list来检查插件是否安装成功。
【此步骤在全局环境下执行】终端执行jupyter lab，打开浏览器即可查看已安装的特性。

`jupyter labextension`安装

此方式实质是在前端打包完成后生成一个tgz包，并使用jupyter labextension来安装.