Django 加载 ES6 javascript 文件答案

【问题标题】：Django load ES6 javascript fileDjango 加载 ES6 javascript 文件
【发布时间】：2019-06-04 07:18:46
【问题描述】：

我想在 django 的 index.html 中使用 ES6 中的导入功能。

为了浏览器兼容性，我不想编译为 ES5。我想假设所有用户都将拥有 ES6 兼容的浏览器。

因此我不需要像 Babel 这样的 ES6 到 ES5 编译器：https://github.com/kottenator/django-compressor-toolkit

如果可以的话，我只是想提供 ES6 Javascript 和浏览器来编译它。

我试过了：

<!-- Index.html -->
<script type="module" src="{% static 'app.js' %}"></script>

//app.js
(function(){
  console.log("Hello from App.js");
})();

# settings.py
if DEBUG:
    import mimetypes
    mimetypes.add_type("module", ".js", True)

我得到的错误：

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

更新 1： 我试过了：

<script type="module" src="{% static 'app.js' %}"></script>
<script nomodule  src="{% static 'app.js' %}"></script>
<script type="module">import "{% static 'main.mjs' %}";</script>

https://developers.google.com/web/fundamentals/primers/modules

更新 2：是否可以不使用预编译器？

https://github.com/kottenator/django-compressor-toolkit

更新 3：我找到了

https://module-script-tests-sreyfhwvpq.now.sh/mime

这就是我所拥有的：

我使用 Chrome： 谷歌浏览器是最新的版本 71.0.3578.98（正式版）（64 位）

更新 4： 我想使用

<!-- index.html -->
<script type="module"> instead of <script type="text/javascript">

因为我希望能够导入模块：

<!-- index.html -->
<script type="application/javascript" src="{% static 'app.js' %}"></script>

//app.js
import { print } from "{% static 'component.js' %}"

目前报错：

Uncaught SyntaxError: Unexpected token {

更新 5：

这是我的文件结构：

这是我的索引：

{% extends 'base.html' %}
{% block content %}
{% load static from staticfiles %}
<h1>Index</h1>
{% include 'component.html' %}
<script type="module" src="{% static 'app.js' %}"></script>
{% endblock %}

这是我的 base.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Index</title>
    {% load static from staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>

这是我的 app.js：

import {A} from "./component.js"
console.log("A" + A)

这是我的 component.js：

export const A = 42

这是我仍然得到的错误：

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

这是我得到的内容类型：

【问题讨论】：

django-compressor-toolkit 允许您在 Django 项目中启用 ES6。我使用这个项目启用 ES6。
是的，但是压缩器工具包用于将 ES6 转换为 ES5。我不应该在现代浏览器中转换它吗？我想简单地运行 ES6 html 代码。

标签： django ecmascript-6 django-templates es6-modules django-staticfiles

【解决方案1】：

我在本地环境中进行了测试。它工作正常。我遵循以下步骤：

在settings.py添加这个

STATICFILES_DIRS = [ os.path.join(BASE_DIR, "静态"), ]
在模板中使用这个并将app.js 保存在PROJECT_DIRECTORY/static/ 文件夹中。
我的app.js 代码写自https://raw.githubusercontent.com/benmvp/learning-es6/master/examples/es6/block-scoping.js

我的html：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript" src="{% static 'app.js' %}"></script>
</body>
</html>

更新： 我在static文件夹中创建了一个JS文件test.js，代码如下：

export const A = 42

我用以下代码更新了我之前的app.js：

import {A} from "./test.js"

console.log("A" + A)

然后在模板中：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="module" src="{% static 'app.js' %}"></script>
</body>
</html>

【讨论】：

你有 text/javascript 类型而不是模块，这就是它为什么起作用的原因。但是您不能导入模块。我希望能够在 app.js 中调用 import * from 'mymodule.js'
我得到了解决，并在我给出的答案中进行了解释。我一直使用 mimetypes 有正确的解决方案。但是更新settings.py时我没有正确调试

【解决方案2】：

我终于搞定了。

这是我需要添加到设置中的内容。

if DEBUG:
    import mimetypes
    mimetypes.add_type("application/javascript", ".js", True)

我犯的错误是我在调试时正在刷新但没有清除缓存。

如果您调试网络内容，请务必确保在测试时按 ctrl+F5。

如果我评论 mimetype：

if DEBUG:
    import mimetypes
    #mimetypes.add_type("application/javascript", ".js", True)

然后我得到错误：

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

我看到了这个：

【讨论】：