Блог

Я использую flask-assets, и ни один из доступных фильтров (rjsmin, jsmin, closure_js, uglifyjs и т.д.) Не может минимизировать файл JavaScript ES2016. Уменьшенные файлы приводят к ошибкам в консоли браузера (из-за плохих конверсий) или даже к сбою при выполнении перед использованием ресурсов. Кроме того, я попробовал Babel filter из webassets, и он не вносит никаких изменений в файлы, они просто подаются без изменений.

Мне также не удается принудительно применить closure или babel extra_args для настройки их работы.

Есть какой-нибудь совет или рекомендация?

Пример кода:

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

Вам нужно будет использовать фильтр 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-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 просто кажутся ненужными, потому что они отстают с версиями документов и пакетов, независимо от того, что является последним и лучшим в мире интерфейсов.