pip and npm packages
$ pip install django_compressor PyReact
$ npm install -g babel-cli
[project]/settings.py
...
INSTALLED_APPS = (
...
'compressor',
...
)
...
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'compressor.finders.CompressorFinder',
)
COMPRESS_ROOT = os.path.join(BASE_DIR, 'static')
COMPRESS_PRECOMPILERS = (
...
('text/jsx', 'third_party.react_compressor.ReactFilter'),
...
)
third_party/__init__.py
(empty)
third_party/react_compressor.py
from compressor.filters import FilterBase
from react import jsx
class ReactFilter(FilterBase):
def __init__(self, content, *args, **kwargs):
self.content = content
kwargs.pop('filter_type')
super(ReactFilter, self).__init__(content, *args, **kwargs)
def input(self, **kwargs):
return jsx.transform_string(self.content)
[project]/urls.py
...
from django.conf.urls.static import static
...
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
static/jsx/main.jsx
ReactDOM.render(<h1>Hello World</h1>, document.getElementById('container'))
How to use in templates
{% load staticfiles compress %}
<!DOCTYPE>
<html>
<head>
...
<script src='//fb.me/react-15.0.1.js'></script>
<script src='//fb.me/react-dom-15.0.1.js'></script>
...
</head>
<body>
...
<div id='container'></div>
...
{% compress js %}
<script src='{% static "jsx/main.jsx" %}' type='text/jsx'></script>
{% endcompress %}
</body>
Read More
댓글 없음:
댓글 쓰기