django+react拼图的缺失部分
django-cra-helper的Python项目详细描述
Django CRA助手
简介
django cra helper是django和create react app之间缺少的链接。通过将其添加到django项目中,您几乎可以毫不费力地将react组件注入django模板,并通过django上下文变量初始化组件属性。
这个包的最终目标是将这两个项目集成起来,对开发过程中通常使用的工作流进行最小的更改。从npm start
到python manage.py collectstatic
,您的命令应该按预期工作,这样您就可以忘记实现,回到开发!
注意:在本自述文件中,缩写词cra将用于指代create react app
安装
此软件包可通过pip
:
pip install django-cra-helper
设置和配置
一旦安装了django cra helper,就需要在settings.py中的
已安装的应用程序中添加
cra helper
:
INSTALLED_APPS=['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','cra_helper','django.contrib.staticfiles',]< Buff行情>
注意:cra_helper
必须放在列表中的django.contrib.staticfiles
上方!
将cra_helper.context_processors.static
添加到templates['options']['context_processors']
:
TEMPLATES=[{# ...snip...'OPTIONS':{'context_processors':[# ...snip...'cra_helper.context_processors.static',],},},]
此外,还需要将以下staticfiles\u finders
列表添加到settings.py
:
STATICFILES_FINDERS=[# Django defaults'django.contrib.staticfiles.finders.FileSystemFinder','django.contrib.staticfiles.finders.AppDirectoriesFinder',# A finder to pull in asset-manifest.json'cra_helper.finders.CRAManifestFinder',]
最后一个必要的设置是包含CRA项目文件的文件夹的名称,相对于django项目的基本目录(包含manage.py
的文件夹):
CRA_APP_NAME='cra-app'
如果由于某种原因CRA LiveServer不在本地主机或端口3000上运行,则可以在settings.py
中添加以下设置以指定其实际主机和端口:
CRA_HOST='0.0.0.0'CRA_PORT=9999< Buff行情>
注意:如果您没有为cra_host
设置值,那么django cra helper将默认为host'localhost'
注意:如果未设置CRA_port
的值,则django CRA helper将默认为port3000
最后,运行cra的npm run build
命令一次以生成build/
目录。django cra helper需要包含在中的build/asset manifest.json
文件来帮助加载任何react组件中可能使用的非js和非css资产。在项目中添加新的非js或非css资源时,应重新运行此命令。
一旦一切就绪,django cra helper将使以下操作成为可能:
从CRA LiveServer实时访问React组件
如果在通过python manage.py runserver启动django的开发服务器之前,cra项目的liveserver是通过npm start启动的,那么react代码库中的代码更改也将在django视图中立即更新。
当cra liveserver运行时,django cra helper添加一个bundle\u js
模板变量,该变量可以插入到django视图的模板中,以加载包含所有当前js和css的liveserver的中间bundle.js
文件。每当对react代码进行编辑时,liveserver会动态重新编译此文件。此文件可以添加到django模板,如下所示:
{% if bundle_js %}<scripttype="text/javascript"src="{{ bundle_js }}"></script>{% endif %}< Buff行情>
注意:此处不要使用static
模板标记!此文件需要从CRA LiveServer加载。
在生产中访问react组件
django cra helper还负责确保django的collectStatic
命令拉入由CRA的NPM run build
命令构建的生产就绪包。
首先,使用典型的cranpm
build命令为生产准备react文件:
npm run build
这将把捆绑的、缩小的javascript和css以及资产输出到cra项目文件夹中的/build/
文件夹。
完成此命令后,运行以下django命令收集静态文件,包括编译的react资产:
python manage.py collectstatic --no-input
react资产将包含在settings.static_root
目录中的其他静态资产中,在django生产环境中通常使用。一个asset manifest.json
文件也将被拉入。django cra helper需要此cra生成文件的内容来帮助引用在生成过程中向其文件名添加了唯一散列的react文件。
类似于前面提到的bundle_js
模板变量,django cra helper在cra liveservernot运行时包含许多其他模板变量。最重要的两个是main\u js
和main\u css
。可以通过对模板中{%static%}
的典型调用将它们注入页面:
pip install django-cra-helper0
pip install django-cra-helper1
通过将/code>替换为
/
和(句点),可以在模板中访问由cra捆绑的其他资产,包括图像资产。django cra helper将
asset manifest.json
中的每个条目添加到基本上下文中,使用这些替换规则来容纳django的static
标记。
例如,cra项目中的logo.svg文件可以包含在django模板中,如下所示:
pip install django-cra-helper2 < Buff行情>
注意:这是可选的!静态资产仍然可以包含在django应用程序的/static/
目录中,并照常加载。只有在重用特定组件之外的react资产时,才需要上述特殊替换。
通过django模板上下文访问react组件
当django提供视图时,cra项目将需要进行一点重新架构,以准备接受django的输入值。下面是对cra项目的src/index.js
文件进行一些小的调整后,如何为django建立一个简单的api来与绑定的react代码库通信的示例:
pip install django-cra-helper3
基本上,index.js
会更新为读取设置为window.component
、window.props
和window.reactroot
的值,并使用这些值呈现组件。这三个"输入"中的每一个都将允许django轻松地指定每个视图要初始化的组件:
window.component
:指向页中的组件项的字符串
window.props
:包含要传递到组件中的道具的对象window.reactroot
:一个document.getelementbyid的实例
注意:设置这些值是可选的。上述模板中指定的默认值允许组件在从CRA LiveServer查看时按预期呈现。
既然"api"已经就位,django视图可以通过它们传递给模板的上下文包含这些输入的值:
pip install django-cra-helper4
下面是django应用程序的index.html
模板,它将呈现上下文:
pip install django-cra-helper5
上下文的组件
和道具
分别绑定到window.component
和window.props
。
注意在设置windows.props时使用json
过滤器!{%load cra_helper_tags%}
提供此筛选器,以便轻松清理和转换python代码>到javascript对象。因此,上面准备的视图上下文呈现为以下典型的javascript对象:
pip install django-cra-helper6
最后,window.reactroot
指定应将react组件呈现到的容器元素。仅当容器的id
是而不是"根"(在CRA项目的index.html
中分配给容器<;div>;
的同一ID)时,才需要设置此值。
显示的回报
当所有这些都完成后,react组件现在应该可以在cra liveserver和通过django服务时呈现和查看。下面是一个稍加修改的craa p p
组件的示例,显示在django(左)和cra(右):
待办事项
- 了解如何让django在代码更新后在cra liveserver重新加载时自动重新加载。