Django 加载 ES6 javascript 文件

Question

我想在 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)

我得到的错误：

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

更新 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: Google Chrome 是最新的版本 71.0.3578.98（正式版）（64 位）

更新四： 我想使用

<!-- 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

这是我仍然遇到的错误：

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

这是我得到的内容类型：

Answer 1

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

在settings.py中添加这个

STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), ]
在模板中使用这个并将 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>

Answer 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)

然后我得到错误：

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

我看到了这个：

Django 加载 ES6 javascript 文件

Django load ES6 javascript file

django

django-templates

django-staticfiles

ecmascript-6

es6-modules