如何缩小ES2016或转换为烧瓶中的ES2015？

Question

我正在使用flask-assets并且没有可用的过滤器（rjsmin，jsmin，closure_js，uglifyjs等）能够缩小ES2016 JavaScript文件。缩小的文件在浏览器控制台上产生错误（由于错误的转换），甚至在提供资源之前执行时崩溃。此外，我已经尝试过来自webassets的Babel过滤器，我没有对文件进行任何更改，它们只是在没有更改的情况下提供。

我也无法设法强制执行闭包或babel extra_args来自定义其操作。

任何提示或建议？

示例代码：

from flask_assets import Bundle
page_js = Bundle(
    'js/code_with_es2016.js',
    filters='rjsmin',
    output='public/js/code.min.js'
)

Answer 1

您将需要使用带有babel-presets-env的babel过滤器。 webassets文档稍微落后于最近的开发，考虑到javascript世界中的事物发展速度，这并不奇怪。

首先，您需要在全球范围内安装babel-cli：

npm install -g babel-cli

现在您需要在本地安装babel-preset-env，因此在您的项目目录中执行：

npm install --save babel-preset-env

最后，这是如何使用flask-assets设置您的包：

from flask_assets import Bundle, Environment
from webassets.filter import get_filter

assets = Environment()
assets.init_app(app)
babel = get_filter('babel', presets='babel-preset-env')
assets.register('js_all', Bundle(
    'js/code_with_es2016.js',
    output='public/js/code.min.js',
    filters=[babel, 'rjsmin']
))

你也可以通过指定它的绝对路径或相对路径告诉babel你的babel-preset-env的安装位置：

preset_location = './path/to/node_modules/babel-preset-env'
babel = get_filter('babel', presets=preset_location)
assets.register('js_all', Bundle(
    'js/code_with_es2016.js',
    output='public/js/code.min.js',
    filters=[babel, 'rjsmin']
))

最后一件事，这只是（比如）我的观点，我强烈建议切换到基于javascript / node的构建过程为你的前端资产（你已经使用了babel！）。根据您正在开发的内容，gulp或webpack可以很好地用于您的前端构建。 Flask-assets / webassets似乎没有必要，因为它们落后于文档和软件包版本，无论前端世界中最新和最好的是什么。