jaysonsantos / jinja-assets-compressor

A Jinja extension (compatible with Flask and other frameworks) to compile and/or compress your assets.
Other
93 stars 10 forks source link

es6 (babel) compressor? #51

Open d9k opened 7 years ago

d9k commented 7 years ago

Do the es6 compressor exist?

alanhamlett commented 7 years ago

Not yet, but we could use an es6 transpiler and minifier for the JavaScript compressor instead of using jsmin.

d9k commented 7 years ago

@jaysonsantos, @alanhamlett, hope to see it soon :wink:

alanhamlett commented 7 years ago

I don't have the resources to build it right now, but we're open to pull requests.

jaysonsantos commented 7 years ago

@d9k If you know how to transpile manually, write the steps here so someone or I can pick it up to do.

d9k commented 7 years ago

Got to work with local node_modules installation.

1) At your app folder: npm install --save babel-cli babel-preset-es2015 babel-preset-react babel-preset-stage-0 2) manual run to test babel installation: node_modules/.bin/babel --presets=es2015,stage-0,react

input:

let a = 5; console.log(a);

after new empty line press Ctrl+D (EOF)

Expected output:

"use strict";

var a = 5;
console.log(a);

3) create babel_compressor.py from this gist: https://gist.github.com/d9k/651a7f926e85cbbfbf32631983529ea2 4) usage (at your web app entry point):

# change your.path.to.babel_compressor to actual path
from your.path.to.babel_compressor import BabelCompressor
from jac.config import Config as JacDefaultConfig

# . . . . .
# right before app initialization:

    # check paths with debugger!
    BabelCompressor.binary = os.path.abspath(os.path.join(os.path.dirname(__file__), '..', 'node_modules', '.bin', 'babel'))
    BabelCompressor.cwd_for_presets_search = os.path.abspath(os.path.join(os.path.dirname(__file__), '..'))
    jac_default_config = JacDefaultConfig()
    # get jinja2_env. In Pyramid you can get it this way:
    # `jinja2_env = pyramid_jinja2.get_jinja2_environment(config)`
    jinja2_env.compressor_classes = jac_default_config.get('compressor_classes')
    jinja2_env.compressor_classes['text/babel'] = BabelCompressor

5) at your jinja2 template code:

    {% compress 'js' %}
    <script type="text/babel">
        let a = 5;
        console.log(a);
    </script>
    {% endcompress %}
jaysonsantos commented 7 years ago

Hi @d9k, it looks good. Do you want to wrap it in a pull request with the proper tests? If you have Babel in your path you don't have to change BabelCompressor.binary and I think you can use uri_cwd instead of cwd_for_presets_search. Thanks for the help!

d9k commented 7 years ago

@jaysonsantos, thanks for advices! I would be happy to make pull request.Maybe later, I'm out of time for now.