JupyterLab 插件开发:常见问题汇总


近期接手了开发 Jupyterlab Extension的任务,将开发过程中遇到的常见的问题进行记录,以便于后续的的复习及总结。

开发环境篇

1. 安装 Miniconda

期望有一个工具能够帮助我运行 Jupyterlab。在此推荐使用 Miniconda。

官网下载:Miniconda

根据自己的设备型号选择合适的下载包。

注意:

在安装时,务必选中将 Miniconda 注入环境变量的选项,否则很容易导致运行项目时无法 识别 conda 指令。
在这里插入图片描述

2. 搭建虚拟环境

安装完成后,需要给待开发的插件搭建一个虚拟环境。

可以运行如下指令,创建一个名字为jupyterlab-env的虚拟环境。

 conda create -n jupyterlab-env --override-channels --strict-channel-priority -c conda-forge -c anaconda jupyterlab nodejs
 // 默认搭建的环境,使用的 jupyterlab 和 nodejs 都是最新的版本
 // 如果需要指定 jupyterlab 或者 nodejs 的版本,可以这样指定
 // jupyterlab=2.3.0   
 // nodejs=14.15.1

然后激活该虚拟环境,就可以将我们正在开发中的插件添加到虚拟环境中了。

// 激活虚拟环境
conda activate jupyterlab-env
// 退出虚拟环境
deactivate

为什么需要虚拟环境?

因为如果不创建虚拟环境,那我们为 Jupyterlab 安装了其他插件,会与正在开发的混在一起,不利于开发。虚拟环境起到了隔离的作用。

3. 项目运行指令

运行开发中的 Jupyterlab 插件,常常用到如下指令

npm install
npm run build
jupyter labextension install .
jupyter lab
// 如果代码做了更改,需要再次执行
 npm run build
 jupyter labextension install .
 jupyter lab

当我们修改了代码时,期望页面做出修改后的改变,有两种方法:

一种是打断运行中的 Jupyter lab 命令,重新执行命令。

一种是无需修改 Miniconda 中的内容,等待页面出现 Build 的弹窗,点击 Build 后等待一段时间。出现 Reload 的弹窗后,点击 Reload 即可。

4. 代码实时更新

上述的更新页面的方法,显然不够敏捷,不能满足高速开发的需求。于是我寻找一种可以像 webpack 自动更新那样的开发方式。

在此记录一个不是很成熟的 Jupyterlab 实时更新的方法。

开一个 Miniconda 的终端,执行 npm run watch,该终端会监测代码的变化并及时构建新的代码。
然后开另外一个 Miniconda 的终端,执行jupyter lab --watch,该终端会在代码发生变化后,重新运行 Jupyterlab。

这样就实现了代码修改后,实时查看修改结果的目的。

缺点也是有的,Juyterlab 的 watch 功能,反应并不很敏捷,通常需要等待 1min 才能看到页面的变化。

运行报错篇

1. Windows 编码问题

UnicodeDecodeError: ‘charmap’ codec can’t decode byte 0x8d in position
240: character maps to

这个是在 运行 jupyter lab 命令时出现的,我的电脑时 Windows 系统,会出现该问题 (经沟通,同事的 Mac 并未存在此问题)。需要增加中文编码

解决方法:

如果是虚拟环境中出现的,找到 Miniconda 的安装路径

安装路径miniconda3\envs\jupyterlab-env(虚拟环境)\Lib\site-packages\jupyterlab\commands.py

如果是 base 环境

安装路径miniconda3\Lib\site-packages\jupyterlab\commands.py

修改该文件的 83 行

self.proc = self._create_process(
    cwd=cwd,
    env=env,
    stderr=subprocess.STDOUT,
    stdout=subprocess.PIPE,
    universal_newlines=True,
    encoding="UTF-8"  // 增加编码格式
)

2.项目依赖无法下载

Jupyter Labs: “RuntimeError: npm dependencies failed to install” When
Building

该问题有三种尝试解决的方案

  1. 公司的网络问题,或许是公司的防火墙拦截导致依赖项无法下载
  2. nodejs 的版本问题,重新安装 conda install nodejs
  3. 依赖项版本冲突导致无法下载,可以 rm package.lock.json

后续遇到其他问题,会陆续补充完善。

如有小伙伴也正在开发 Jupyterlab 的插件,欢迎留言,一起讨论,一起学习~

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
JupyterLab 插件开发Jupyter Notebook 插件开发类似,但是需要使用 JupyterLab 插件开发框架。Vue.js 可以作为开发 JupyterLab 插件前端框架,可以使用 TypeScript 或 JavaScript 进行开发。下面是使用 Vue.js 开发 JupyterLab 插件的步骤: 1. 安装 JupyterLab 插件开发框架和 Vue.js ```bash pip install jupyterlab npm install vue ``` 2. 创建一个新的 Vue 项目 ```bash vue create my-jupyterlab-plugin ``` 3. 在项目中添加 JupyterLab 插件开发框架 ```bash npm install --save-dev @jupyterlab/extension-builder ``` 4. 在项目中创建一个新的 JupyterLab 插件 ```bash jupyter labextension create my-jupyterlab-plugin --template=vue ``` 5. 在插件中编写 Vue 组件代码 在插件的 `src/index.vue` 文件中编写 Vue 组件代码,例如: ```vue <template> <div> <h1>Hello, JupyterLab!</h1> </div> </template> ``` 6. 在插件中注册 Vue 组件 在插件的 `src/index.ts` 文件中注册 Vue 组件,例如: ```typescript import { JupyterFrontEndPlugin } from '@jupyterlab/application'; import { ICommandPalette } from '@jupyterlab/apputils'; import { Widget } from '@phosphor/widgets'; import MyComponent from './index.vue'; const myPlugin: JupyterFrontEndPlugin<void> = { id: 'my-jupyterlab-plugin', autoStart: true, requires: [ICommandPalette], activate: (app, palette) => { const widget = new Widget(); widget.node.appendChild(new MyComponent().$mount().$el); widget.id = 'my-jupyterlab-plugin'; widget.title.label = 'My JupyterLab Plugin'; widget.title.closable = true; app.shell.addToMainArea(widget); palette.addItem({ command: 'my-jupyterlab-plugin:open', category: 'My Plugins' }); } }; export default myPlugin; ``` 7. 添加命令和菜单项 在插件的 `src/index.ts` 文件中注册命令和菜单项,例如: ```typescript const command: string = 'my-jupyterlab-plugin:open'; app.commands.addCommand(command, { label: 'My JupyterLab Plugin', execute: () => { if (!widget.isAttached) { app.shell.addToMainArea(widget); } app.shell.activateById(widget.id); } }); app.contextMenu.addItem({ command, selector: '.jp-Notebook', rank: 0 }); app.palette.addItem({ command, category: 'My Plugins' }); ``` 8. 编译和安装插件 ```bash npm run build jupyter labextension install . ``` 9. 在 JupyterLab 中启用插件 ```bash jupyter labextension enable my-jupyterlab-plugin ``` 以上就是使用 Vue.js 开发 JupyterLab 插件的基本步骤。在实际开发中,还需要了解更多 JupyterLab 插件开发框架和 Vue.js 的知识,以及如何使用 JupyterLab 的 API 和工具来实现插件的具体功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值