如何使用 Flask 丑化 ES6 javascript？答案

【问题标题】：How to uglify ES6 javascript with Flask?如何使用 Flask 丑化 ES6 javascript？
【发布时间】：2020-01-05 17:53:57
【问题描述】：

我正在搜索一个 Flask-Assets 过滤器，它允许我丑化 javascript 并支持 ES6 语法。我尝试使用uglifyjs-es 二进制而不是uglifyjs，但我不知道如何配置我的过滤器以使用uglifyjs-es 二进制。

我有这个：

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

来自Webassets documentation：

UglifyJS 是为 NodeJS 编写的外部工具；这个过滤器假设 uglifyjs 可执行文件在路径中。否则，您可以定义 UGLIFYJS_BIN 设置

也许解决方案在那里，但我不知道在哪里以及如何更改 UGLIFYJS_BIN 设置，知道吗？

另外，我读到here uglifyjs-es 项目不再维护。 terser 似乎是另一种选择，但它也可以用作过滤器吗？

编辑

如果您通过代码示例知道uglifyjs-es 的一个很好的替代方案，您将赢得赏金；)

【问题讨论】：

标签： javascript python flask uglifyjs flask-assets

【解决方案1】：

如果你使用 npm 安装了 uglifyjs，它应该在你项目的 node_modules 文件夹中。

您可以按如下方式配置烧瓶：

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

关于 uglifyjs-es，你知道它是无人维护的。但是，如果您的代码使用它被缩小，它仍然是一个不错的选择。

如上所述here：

uglify-js 只支持 ES5 代码作为输入。
uglify-es 也支持 ES6，但有 bug，已被废弃。

【讨论】：

github.com/terser/terser 似乎也是不错的选择，但我想在这种情况下我需要创建自己的自定义过滤器

【解决方案2】：

Terser 的命令行几乎和ls 一样具有巴洛克风格。我发现对我来说最简单的方法是使用带有 Terser 插件的 Rollup，并且有现成的 Rollup filter for webassets。这样，所有 Terser 配置都在您在过滤器额外参数中指定的 Rollup 配置中完成。 ES6 模块的最小 Terser 配置：

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

使用已配置的 Terser 插件，您现在可以像应用捆绑和缩小过滤器一样使用它：

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',
)

【讨论】：

【解决方案3】：

看来您需要设置一个名为UGLIFYJS_BIN 的环境变量。请参阅here 了解 Linux 说明，或参阅over here 了解 Windows 说明。

【讨论】：