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