使用 `widget-cookiecutter` 创建自定义 Jupyter 小部件项目

使用 widget-cookiecutter 创建自定义 Jupyter 小部件项目

widget-cookiecutterA cookiecutter template for creating a custom Jupyter widget project.项目地址:https://gitcode.com/gh_mirrors/wi/widget-cookiecutter

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: {

widget-cookiecutterA cookiecutter template for creating a custom Jupyter widget project.项目地址:https://gitcode.com/gh_mirrors/wi/widget-cookiecutter