ES6 bundled files approach in django

Question

im stuck trying to work with a js library (ifc.js) inside my django project, I installed django-compressor and django-compressor-toolkit with default values, ifc.js uses rollup to bundle files, the npm package conf file is

{
 "name": "a_viurb",
 "version": "1.0.0",
 "description": "funcionamiento ifc js",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "rollup -c ./a_viurb/static/ifc/rollup.config.js",
   "watch": "rollup -w -c ./a_viurb/static/ifc/rollup.config.js"
 },
 "author": "fcr",
 "license": "ISC",
 "devDependencies": {
   "@babel/core": "^7.17.9",
   "@babel/preset-env": "^7.16.11",
   "@babel/preset-react": "^7.16.7",
   "@rollup/plugin-node-resolve": "^13.1.3",
   "autoprefixer": "^7.1.2",
   "babel-core": "^6.26.3",
   "babel-loader": "^8.2.4",
   "babel-preset-es2015": "^6.24.1",
   "babelify": "^7.3.0",
   "browserify": "^14.5.0",
   "css-loader": "^6.7.1",
   "node-sass": "^4.14.1",
   "postcss-cli": "^4.1.0",
   "rollup": "^2.70.1",
   "webpack": "^5.72.0",
   "webpack-cli": "^4.9.2"
 },
 "dependencies": {
   "three": "^0.139.2",
   "web-ifc-three": "0.0.110"
 },
 "presets": [
   "@babel/preset-env",
   "@babel/preset-react"
 ]
}

my settings.py configuration

STATICFILES_FINDERS = (
    'compressor.finders.CompressorFinder',
)

COMPRESS_CSS_FILTERS = [
    'compressor.filters.css_default.CssAbsoluteFilter',
    'compressor.filters.cssmin.CSSMinFilter',
    'compressor.filters.template.TemplateFilter'
]
COMPRESS_JS_FILTERS = [
    'compressor.filters.jsmin.JSMinFilter',
]
COMPRESS_PRECOMPILERS = (
    ('module', 'compressor_toolkit.precompilers.ES6Compiler'),
    ('css', 'compressor_toolkit.precompilers.SCSSCompiler'),
)

COMPRESS_LOCAL_NPM_INSTALL = True 

and i got these error message

SyntaxError: /home/fcr/anaconda3/envs/gda/a_viurb/a_viurb/static/ifc/bundle.js: Unexpected token (87230:6)
  87228 |       throw new Error(nullIfcManagerErrorMessage);
  87229 |     const modelConfig = {
> 87230 |       ...config,
        |       ^
  87231 |       modelID: this.modelID

it seems like a pre compiling error, not recognizing the spread operator, I dont know how to approach this, how to fix babel configuration or the required requirements, is there another way to make js buldles work in django?, or only load the this kind of js files?

thanks

Answer 1

I fuound a way to make it work

install memcached

sudo apt-get install memcached

(env install) pip install python-memcached

(env install) pip install django-htmlmin

settings.py

  CACHES = {
        'default': {
            'BACKEND': 
    'django.core.cache.backends.memcached.MemcachedCache',
            'LOCATION': '127.0.0.1:11211',
        }
    }

    MIDDLEWARE = [
        # add these below 3 middleware at the first position
        'django.middleware.gzip.GZipMiddleware',
        'htmlmin.middleware.HtmlMinifyMiddleware',
        'htmlmin.middleware.MarkRequestMiddleware',

    STATICFILES_FINDERS = (
        'django.contrib.staticfiles.finders.FileSystemFinder',
        'django.contrib.staticfiles.finders.AppDirectoriesFinder',
        
        'compressor.finders.CompressorFinder',
    )

remove django compressor toolkit configuration and add this

 COMPRESS_ENABLED = True
    COMPRESS_CSS_HASHING_METHOD = 'content'
    COMPRESS_FILTERS = {
        'css':[
            'compressor.filters.css_default.CssAbsoluteFilter',
            'compressor.filters.cssmin.rCSSMinFilter',
        ],
        'js':[
            'compressor.filters.jsmin.JSMinFilter',
        ]
    }
    HTML_MINIFY = True
    KEEP_COMMENTS_ON_MINIFYING = True