Flask: как использовать модули ES6? - PullRequest
Новая
       8

Flask: как использовать модули ES6?

1 голос
/ 13 июня 2019

У меня есть работающее приложение Flask, которое я пытаюсь реорганизовать для использования импорта ES6.Мне не нужно, чтобы он работал на старых браузерах, а ES6 импортирует работу в современные браузеры без трансплантации, верно?

Я сейчас запускаю это через встроенный сервер Flask.Вместо этого производственное приложение обслуживается через Gevent, но я, очевидно, еще не дошел до этих изменений.

Ниже приведено то, что я пробовал до сих пор.Где я ошибся?

views.py 

@app.route('/home')
def serve_home():
    return render_template('home.html')

formatting.js 

export function formatNumber(...) {
  ...
}

Попытка 1

home.html 

<script type="text/javascript" src="/static/js/main.js"></script>

main.js 

import {formatNumber} from "/static/js/formatting.js";

Ошибка (main.js, строка 1)

Uncaught SyntaxError: Неожиданный токен {

Попытка 2

  • Изменен тип сценария на «модуль»

home.html 

<script type="module" src="/static/js/main.js"></script>

Ошибка (main.js, строка 1)

Не удалось загрузить скрипт модуля: сервер ответил не MIME-типом «text / plain», кроме JavaScript.Строгая проверка типов MIME применяется для скриптов модулей в соответствии со спецификацией HTML.

Попытка 3

  • Изменено расширение каждого из двух файлов Javascript с "js" на "mjs"

home.html 

<script type="module" src="/static/js/main.mjs"></script>

main.mjs 

import {formatNumber} from "/static/js/formatting.mjs";

Ошибка (main.mjs, строка 1)

Не удалось загрузить скрипт модуля: сервер ответил не MIME-типом «JavaScript / application-octet-stream», кроме JavaScript.Строгая проверка типов MIME применяется для скриптов модулей в соответствии со спецификацией HTML.

Ответы [ 2 ]

2 голосов
/ 13 июня 2019

Я почти уверен, что вам понадобится использовать webpack и babel для переноса кода.

Для Flask есть плагин webpack, который может быть полезен https://pypi.org/project/Flask-Webpack/ https://github.com/nickjj/flask-webpack

Вы также можете следовать этим https://itnext.io/a-template-for-creating-a-full-stack-web-application-with-flask-npm-webpack-and-reactjs-be2294b111bd или https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9 учебникам.Просто не обращайте внимания на части о реакции

Этот пост ES6 сборка Python Backend (колба), а не SPA , похоже, похож на ваш.

0 голосов
/ 14 июня 2019

Мне не нужно, чтобы он работал в старых браузерах, а импорт ES6 работает в современных браузерах без трансплантации, верно?

Это зависит от спектра браузеров предполагаемых пользователей приложения.

Документирована поддержка импорта ES6 в современных веб-браузерах.

См. Список поддерживаемых браузеров , чтобы убедиться, что вы просматриваете свое приложение в поддерживаемом браузере.версия.

Расширение сценария должно быть .js, а не .mjs, как описано в приведенной выше ссылке.

Я заметил, что сообщаемая ошибка относится к mimetype.Flask возвращает application/octet-stream для mimetype статического файла, когда он не может угадать mimetype.

Вы можете исправить это, используя шаблонную функцию url_for для построения urlдля файла, указывающего на представление, которое возвращает соответствующий mimetype. 

<script type="module" src="{{ url_for('es6-static', filename='/js/main.js') }}"></script>

@app.route('/es6-static/<path:filename>')
def es6_static(filename):
    return send_from_directory(app.config['ES6_MODULES'],
                               filename, as_attachment=True,
                               mimetype='text/javascript'
    )

Хотя text/javascript является устаревшим mime/type для ресурсов JS, возможно, вам лучше будет поддерживать его в браузерах.

Я настоятельно рекомендую использовать gunicorn или nginx для обслуживания статических файлов, так как вышеизложенное помогает только в разработке.

...