如何在烧瓶中缩小ES2016或转换为ES2015?

Question

我正在使用flask-assets，并且没有可用的过滤器(rjsmin，jsmin，closure_js，uglifyjs等)能够缩小ES2016 JavaScript文件。缩小的文件会在浏览器控制台上产生错误(由于转换错误)，甚至在提供资源之前执行时崩溃。 另外，我已经尝试了来自网络资产的 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 过滤器与babel-presets-env一起使用。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 您的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似乎没有必要，因为它们落后于前端世界中最新和最伟大的文档和软件包版本。