4

I'm searching a Flask-Assets filter that allows me to uglify javascript and support ES6 syntax. I tried to use uglifyjs-es binary instead of uglifyjs but I can't figure out how to configure my filter to use the uglifyjs-es binary.

I've this: 

my_app_js = Bundle(
    'js/MyApp.js',
    filters='uglifyjs',
    output='my_app_js.js'
)

From the Webassets documentation :

UglifyJS is an external tool written for NodeJS; this filter assumes that the uglifyjs executable is in the path. Otherwise, you may define a UGLIFYJS_BIN setting

Maybe the solution is there but I can't figure out where and how to change that UGLIFYJS_BIN setting, any idea ?

Also, I read here that uglifyjs-es project isn't maintenained anymore. terser seems to be the alternative, but could it be used as a filter too ?

Edit

If you know a good alternative to uglifyjs-es with a code example, you win a bounty ;)

snoob dogg
  • 2,491
  • 3
  • 31
  • 54

3 Answers3

2

If you have installed uglifyjs using npm, it should be in the node_modules folder in your project.

You could configure flask as follows:

app = Flask(__name__)
app.config['UGLIFYJS_BIN'] = 'path/to/node_modules/uglify-js/bin/uglifyjs'

Regarding uglifyjs-es, you know it's unmaintained. But if your code gets minified using it, it's still a good option.

As mentioned here:

  • uglify-js only supports ES5 code as input.
  • uglify-es also supports ES6, but is buggy and has been abandoned.
Evhz
  • 8,852
  • 9
  • 51
  • 69
  • https://github.com/terser/terser seems also to be good option but I guess I need to create my own custom filter in this case – snoob dogg Jan 06 '20 at 19:42
1

Terser's command line is almost as baroque as with ls. I found that easiest for me is to use Rollup with Terser plugin, and there's ready made Rollup filter for webassets. This way all Terser configuration is done in Rollup's config that you specify in filter extra args. Minimal Terser's configuration for ES6 modules:

{
  compress: {ecma: 2015, module: true},
  mangle: {module: true},
  output: {ecma: 2015},
  parse: {ecma: 2015},
  rename: {},
}

With configured Terser plugin you may now use it as if it was both bundle and minify filters applied:

from flask_assets import Bundle
from webassets.filter import register_filter
from webassets_rollup import Rollup

register_filter(Rollup)

all_css = Bundle(
    'css/app.scss', filters='node-scss,cleancss', output='dist/all.%(version)s.min.css',
)

all_js = Bundle(
    'js/main.js', filters='rollup', output='dist/all.%(version)s.min.js',
)
zgoda
  • 12,775
  • 4
  • 37
  • 46
0

Looks like you need to set an environment variable named UGLIFYJS_BIN. See here for Linux instructions, or over here for Windows instructions.

Numilani
  • 346
  • 4
  • 16