Django загрузить файл ES6 javascript - PullRequest
Новая
       26

Django загрузить файл ES6 javascript

0 голосов
/ 09 января 2019

Я хотел бы использовать функцию импорта в ES6 в index.html в django.

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

Поэтому мне не нужен компилятор от ES6 до ES5, такой как Babel: https://github.com/kottenator/django-compressor-toolkit

Я просто хотел бы использовать Javascript и браузер ES6 для его компиляции, если это возможно.

Я пытался: 

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

Я получаю ошибку:

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

Обновление 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: Возможно ли НЕ использовать прекомпилятор?

enter image description here

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

Обновление 3: Я нашел

https://module -script-tests-sreyfhwvpq.now.sh / мим

enter image description here enter image description here

И вот что у меня есть: enter image description here

Я использую Chrome: Google 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: Неожиданный токен {

Обновление 5:

Это моя файловая структура:

Update 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

Это ошибка, которую я все еще получаю:

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

1114 * *

Это то, что я получаю для типа контента:

enter image description here

Ответы [ 2 ]

0 голосов
/ 09 января 2019

Я наконец-то заработал.

Это то, что мне нужно было добавить в настройки. 

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

Ошибка, которую я сделал, заключалась в том, что я обновлял, но не очищал кеш во время отладки.

Если вы отлаживаете сетевое содержимое, всегда проверяйте Ctrl + F5 при тестировании.

enter image description here

Если я прокомментирую mimetype: 

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

Тогда я получаю ошибку:

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

И я вижу это:

enter image description here

0 голосов
/ 09 января 2019

Я тестировал в своей локальной среде. Работает нормально. Я следую за этими шагами:

  1. В settings.py добавить это

    STATICFILES_DIRS = [ os.path.join (BASE_DIR, "static"), ]

  2. В шаблоне используйте это и сохраните app.js в папке PROJECT_DIRECTORY/static/.

  3. Мой 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>

Обновление: Я создаю файл JS test.js в папке static со следующим кодом: 

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