使用 widget-cookiecutter
创建自定义 Jupyter 小部件项目
1. 项目的目录结构及介绍
使用 widget-cookiecutter
生成的项目目录结构如下:
{{cookiecutter.github_project_name}}/
├── .github/
│ └── workflows/
├── .gitignore
├── LICENSE
├── README.md
├── cookiecutter.json
├── setup.py
├── package.json
├── webpack.config.js
├── src/
│ ├── index.ts
│ ├── plugin.ts
│ └── widget.ts
└── style/
└── index.css
目录结构介绍
- .github/workflows: 包含 GitHub Actions 的工作流配置文件。
- .gitignore: Git 忽略文件配置。
- LICENSE: 项目许可证文件。
- README.md: 项目说明文档。
- cookiecutter.json: Cookiecutter 模板配置文件。
- setup.py: Python 包安装配置文件。
- package.json: npm 包配置文件。
- webpack.config.js: Webpack 配置文件。
- src/: 包含 TypeScript 源代码文件。
- index.ts: 入口文件。
- plugin.ts: 插件文件。
- widget.ts: 小部件实现文件。
- style/: 包含 CSS 样式文件。
- index.css: 样式文件。
2. 项目的启动文件介绍
src/index.ts
这是项目的入口文件,负责初始化和导出小部件模块。
// src/index.ts
import { MODULE_NAME, MODULE_VERSION } from './version';
import { Widget } from './widget';
export { Widget, MODULE_NAME, MODULE_VERSION };
src/widget.ts
这是小部件的主要实现文件,定义了小部件的类和方法。
// src/widget.ts
import { DOMWidgetModel, DOMWidgetView } from '@jupyter-widgets/base';
export class WidgetModel extends DOMWidgetModel {
defaults() {
return {
...super.defaults(),
_model_name: 'WidgetModel',
_view_name: 'WidgetView',
_model_module: MODULE_NAME,
_view_module: MODULE_NAME,
_model_module_version: MODULE_VERSION,
_view_module_version: MODULE_VERSION,
};
}
}
export class WidgetView extends DOMWidgetView {
render() {
this.el.textContent = 'Hello World';
}
}
3. 项目的配置文件介绍
setup.py
这是 Python 包的安装配置文件,定义了包的元数据和依赖。
# setup.py
from setuptools import setup, find_packages
setup(
name='{{cookiecutter.python_package_name}}',
version='{{cookiecutter.npm_package_version}}',
packages=find_packages(),
install_requires=[
'ipywidgets>=7.0.0',
],
include_package_data=True,
zip_safe=False,
)
package.json
这是 npm 包的配置文件,定义了包的元数据和依赖。
{
"name": "{{cookiecutter.npm_package_name}}",
"version": "{{cookiecutter.npm_package_version}}",
"description": "{{cookiecutter.project_short_description}}",
"author": "{{cookiecutter.author_name}}",
"license": "BSD-3-Clause",
"dependencies": {
"@jupyter-widgets/base": "^1.1.10"
},
"devDependencies": {
"typescript": "^4.0.0"
}
}
webpack.config.js
这是 Webpack 的配置文件,定义了如何打包 JavaScript 和 TypeScript 文件。
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.ts',
output: {