使用plotly dash-component-boilerplate 生成自己的组件

plotly 基于dash-component-boilerplate给我们提供了可以快速生成基于使用python 调用的react 组件
以下是一个简单的使用脚手架生成一个组件，同时可以了解组件的工作原理

创建一个简单组件的方法

• 安装依赖

  推荐基于venv 进行环境处理

 

pip install cookiecutter

pip install virtualenv

• clone 脚手架代码
  会有提示组件的名称以及相关信息

cookiecutter https://github.com/plotly/dash-component-boilerplate.git

• 效果

cookiecutter https://github.com/plotly/dash-component-boilerplate.git

You've downloaded /Users/dalong/.cookiecutters/dash-component-boilerplate before. Is it okay to delete and re-download it? [yes]: yes

project_name [my dash component]: appdemo

project_shortname [appdemo]: 

component_name [Appdemo]: 

r_prefix []: 

author_name [Enter your first and last name (For package.json)]: dalongrong

author_email [Enter your email (For package.json)]: 1141591465@qq.com

github_org []: 

description [Project Description]: 

Select license:

1 - MIT License

2 - BSD License

3 - ISC License

4 - Apache Software License 2.0

5 - GNU General Public License v3

6 - Not open source

Choose from 1, 2, 3, 4, 5, 6 [1]: 4

publish_on_npm [True]: false

install_dependencies [True]: false

`install_dependencies` is false!!

Please create a venv in your project root and install the dependencies in requirements.txt

 

 

安装以及构建

• 初始化venv

python3 -m venv venv

source venv/bin/activate

• 安装依赖

  注意构建的时候可能需要先安装webpack-cli ，webpacakge 依赖的

pip install -r requirements.txt

• 构建

yarn build

• 效果

yarn build

yarn run v1.17.3

$ npm run build:js && npm run build:py_and_r

npm WARN lifecycle The node binary used for scripts is /var/folders/gd/md5518_n7cvbfv2zzm1g7xp40000gn/T/yarn--1566807177122-0.022181529109776/node but npm is using /usr/local/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

​

> appdemo@0.0.1 build:js /Users/dalong/mylearning/dash/appdemo

> webpack --mode production

​

Hash: c52fac8690978943e164

Version: webpack 4.36.1

Time: 1285ms

Built at: 2019-08-26 16:13:00

             Asset Size Chunks Chunk Names

    appdemo.min.js 2.74 KiB 0 [emitted] main

appdemo.min.js.map 7.36 KiB 0 [emitted] main

Entrypoint main = appdemo.min.js appdemo.min.js.map

[0] external "PropTypes" 42 bytes {0} [built]

[1] external "React" 42 bytes {0} [built]

[2] ./src/lib/index.js + 1 modules 4.25 KiB {0} [built]

    | ./src/lib/index.js 119 bytes [built]

    | + 1 hidden module

npm WARN lifecycle The node binary used for scripts is /var/folders/gd/md5518_n7cvbfv2zzm1g7xp40000gn/T/yarn--1566807177122-0.022181529109776/node but npm is using /usr/local/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

​

> appdemo@0.0.1 build:py_and_r /Users/dalong/mylearning/dash/appdemo

> dash-generate-components ./src/lib/components appdemo -p package-info.json --r-prefix ''

​

Generated Appdemo.py

Generated appdemo.R

Warning: a URL for bug reports was not provided. Empty string inserted.

Warning: a homepage URL was not provided. Empty string in

 

• 生成的组件内容

 

• 说明
  从官方我们我们也了解到，所有的组件需要转换为一个metadata.json 文件，其中包含了对于组件的描述，同时在__init__.py 中定义了组件
  js 以及css 加载的处理 Appdemo.py 定义了组件的属性信息
• python pip 包生成
  实际上如果运行了python setup.py sdist 会发现有错误，实际上可能是版本的变动，这个有问题，
  简单修改如下：

 

with open(os.path.join('package.json')) as f:

    package = json.load(f)

生成效果

 

参考资料

https://github.com/plotly/dash-component-boilerplate
https://dash.plot.ly/react-for-python-developers