https://github.com/eadwincode/django-compressor-parceljs
Simply enables VueJs, ReactJs, SCSS, LESS, Typescript etc on your Django project
https://github.com/eadwincode/django-compressor-parceljs
django django-compressor django-parceljs django-react django-vue minify-css minify-javascript parceljs
Last synced: 23 days ago
JSON representation
Simply enables VueJs, ReactJs, SCSS, LESS, Typescript etc on your Django project
- Host: GitHub
- URL: https://github.com/eadwincode/django-compressor-parceljs
- Owner: eadwinCode
- License: other
- Created: 2019-11-06T17:47:16.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-02T06:55:56.000Z (almost 3 years ago)
- Last Synced: 2025-09-24T23:46:11.166Z (about 1 month ago)
- Topics: django, django-compressor, django-parceljs, django-react, django-vue, minify-css, minify-javascript, parceljs
- Language: Python
- Homepage:
- Size: 148 KB
- Stars: 27
- Watchers: 2
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.rst
- License: LICENSE
- Authors: AUTHORS
Awesome Lists containing this project
README
.. image:: https://static.pepy.tech/personalized-badge/django-compressor-parceljs?period=total&units=international_system&left_color=black&right_color=green&left_text=Downloads
:target: https://pepy.tech/project/django-compressor-parceljs
Django Compressor Parceljs
=====================================
django-compressor-parceljs is base on Django-Compressor_. It provides additional support to bundles and minifies your typescript, vue, react, scss etc, in a Django template into cacheable static files using parceljs_.
For more information on how django-compressor-parceljs really works visit Django-Compressor_
Quickstart
----------
Install django-compress::
pip install django-compressor-parceljs
Install parcel-bundler::
npm install -g parcel
Add it to your `INSTALLED_APPS`:
.. code-block:: python
INSTALLED_APPS = (
...
'compressor',
...
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# other finders..
'compressor.finders.CompressorFinder',
)
Other Configurations
--------------------
To minify your code for production, you need to set COMPRESS_ENABLED and COMPRESS_OFFLINE to true in settings.py.
From django-compressor settings, the value of COMPRESS_ENABLED = !DEBUG, in settings.py.
.. code-block:: python
COMPRESS_ENABLED = True
COMPRESS_OFFLINE = True
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
Then run,
.. code-block:: python
python manage.py compress --setting path-to-your-production-settings
For more information on django-compressor-settings_
Usage
-----
In your template, load compress ``{% load compress %}``
then use ``{% compress parcel %} {% endcompress %}`` to load a script. for example:
.. code-block:: html
{% load static %}
{% load compress %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Django Testing</title>
</head>
<body>
....
{% compress parcel file myts %}
<script src="{% static 'js/index.ts' %}">
{% endcompress %}
....
{% compress parcel file myts %}
{% endcompress %}
....
{% compress parcel file myjs %}
{% endcompress %}
.......
Add the ``type="text/x-scss"`` for django-compressor to use the precompiler options to compile the asset.
There is alittle drawback with parceljs css url resolver. There is no configuration for parceljs to ignore resolving css url since django will always resolve static urls automatically. Read more this issue_
A solution is to use ``///..`` on the url path followed by ``/static/(path_to_file)``
.. code-block:: scss
body{
background-color: lightblue;
background-image: url(///../static/img/ssd/avatar1.png);
button{
font-size: .8rem;
}
}
Using typescript directly in django template
--------------------------------------------
Add lang attribute to the script tag ```` ::
npm init --yes
npm install -D @babel/core, @babel/preset-env, typescript
.. code-block:: ts
{% load static %}
{% load compress %}
Vue Django Testing
....
{% compress parcel file myts %}
interface IUser {
name: string,
age: number
}
class User implements IUser{
constructor(user:IUser){
this.name = user.name
this.age = user.age
}
name: string
age: number
get_name = () => {
return this.name
};
}
const Peter = new User({name:'Peter', age:32})
console.log(Peter)
{% endcompress %}
...
.. _Django-Compressor: https://github.com/django-compressor/django-compressor
.. _parceljs: https://parceljs.org
.. _django-compressor-settings: https://django-compressor.readthedocs.io/en/latest/settings/
.. _precompilers: https://django-compressor.readthedocs.io/en/latest/settings/#django.conf.settings.COMPRESS_PRECOMPILERS
.. _issue: https://github.com/parcel-bundler/parcel/issues/1186/
.. _django_vue: https://github.com/eadwinCode/django_vue
.. _react: https://github.com/eadwinCode/django_react