如何在Flask中对ES6 JavaScript进行代码混淆？

Question

我在寻找一个可以压缩 JavaScript 并支持 ES6 语法的 Flask-Assets 过滤器。我尝试使用 uglifyjs-es 二进制文件替代 uglifyjs，但我不知道如何配置我的过滤器来使用 uglifyjs-es 二进制文件。

以下是要翻译的内容:

我有这个：

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

来自 Webassets 文档：

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

也许解决方案就在那里，但我无法弄清楚在哪里以及如何更改那个 UGLIFYJS_BIN 设置，有什么想法吗？

另外，我在这里读到，uglifyjs-es 项目不再维护了。Terser 似乎是替代方案，但它能用作过滤器吗？

编辑

如果您知道一个好的替代方案 uglifyjs-es 并提供代码示例，您将获得奖励 ;)

- snoob dogg

Answer 1

如果你使用npm安装了uglifyjs，它应该在你的项目的node_modules文件夹中。你可以按照以下方式配置flask：

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

关于uglifyjs-es，您知道它已经停止维护。但如果您的代码使用它进行了混淆，它仍然是一个不错的选择。

正如这里所提到的：

• uglify-js只支持ES5代码作为输入。
• uglify-es也支持ES6，但存在缺陷并已被放弃。

- Evhz

---

https://github.com/terser/terser 似乎也是一个不错的选择，但我想在这种情况下需要创建自己的定制过滤器。 - snoob dogg

Answer 2

Terser的命令行与ls几乎一样复杂。我发现最容易的方法是使用带有Terser插件的Rollup，并且有一个现成的Rollup过滤器用于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',
)

- zgoda

Answer 3

看起来你需要设置一个名为UGLIFYJS_BIN的环境变量。请参考这里获取Linux指令，或者这里获取Windows指令。

- Numilani