Flask：如何使用 ES6 模块？

Question

我有一个可用的 Flask 应用程序，我正在尝试重构它以使用 ES6 导入。 我不需要它在旧浏览器上运行，而 ES6 导入无需转译即可在现代浏览器中运行，对吗？

我目前只是通过 Flask 的内置服务器运行它。 生产应用程序是通过 gevent 提供的，但我显然还没有进行这些更改。

以下是我迄今为止尝试过的。 我哪里错了？

视图.py

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

格式化.js

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

尝试 1

主页.html

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

主文件

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

错误（main.js，第 1 行）

未捕获的语法错误：意外的标记 {

尝试 2

• 将脚本类型更改为“模块”

主页.html

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

错误（main.js，第 1 行）

加载模块脚本失败：服务器以“text/plain”的非 JavaScript MIME 类型响应。 每个 HTML 规范对模块脚本执行严格的 MIME 类型检查。

尝试 3

• 将两个 Javascript 文件的扩展名分别从“js”更改为“mjs”

主页.html

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

主文件

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

错误（main.mjs，第 1 行）

加载模块脚本失败：服务器以“application/octet-stream”的非 JavaScript MIME 类型响应。 每个 HTML 规范对模块脚本执行严格的 MIME 类型检查。

Answer 1

对于那些收到错误的人：

The server responded with a non-JavaScript MIME type [...]

...您需要确认 python 正在返回您的 JS 文件的预期 mimetype。

>>> import mimetypes
>>> mimetypes.guess_type("notExists.js")
('text/javascript', None)

对于我自己，使用 Windows 平台托管来自（例如 Flask 的开发服务器）的 Web 服务器，我发现我需要更新注册表以将文件扩展名与text/javascript相关联。

例如，在注册表编辑器中：

1. 在 HKEY_CLASSES_ROOT 下，找到.js （如果使用，则找到.mjs ）
2. 查看“内容类型”的值。 它必须说text/javascript ，而不是text/plain或application/octet-stream等。

Answer 2

这对我有用：

import mimetypes
mimetypes.add_type('application/javascript', '.mjs')

在启动烧瓶之前添加了此代码

Answer 3

我很确定你需要使用 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 后端（flask）而不是 SPA 的帖子似乎与您的类似。

Answer 4

我不需要它在旧浏览器上运行，而 ES6 导入无需转译即可在现代浏览器中运行，对吗？

这取决于您的预期应用程序用户的浏览器范围。

在现代 Web 浏览器中有对 ES6 导入的文档支持。

查看支持的浏览器列表以确保您在支持的浏览器版本中查看您的应用程序。

脚本扩展名应该是.js而不是.mjs如上述链接中所述。

我注意到报告的错误与 mimetype 相关。 Flask 正在为静态文件的 mimetype 返回一个application/octet-stream ，它无法猜测 mimetype。

您可以使用url_for模板函数为指向返回适当 mimetype 的视图的文件构建 url 来更正此问题。

<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是不推荐使用的 JS 资源的mime/type ，但您可能在浏览器中对它有更好的支持。

我强烈建议使用 gunicorn 或 nginx 来提供静态文件，因为上述仅有助于开发。