Модуль ES6 не работает в Safari Mobile (iOS14.6)

Я экспериментирую с модулями Javascript как на рабочем столе (последняя версия Chrome), так и на мобильных устройствах (Safari с iOS 14.6), и мой код отлично работает на рабочем столе (стандартный браузер или режим мобильной эмуляции), но не работает на моем iPhone. Импортированный код JS, использующий <script type="module">, просто не выполняется, несмотря на то, что он поддерживается, начиная с Safari iOS 11 и выше, в соответствии с https://caniuse.com/?search=modules

Приведенный ниже тестовый код адаптирован из Как обслуживать модули ES6 в Safari? , размещен на веб-сервере в моей локальной сети, доступном как для мобильных, так и для настольных клиентов. Для мобильной отладки я использую локально скопированную версию https://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/ для отображения команд console.log на мобильных устройствах.

test_ios.html

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
      console.log("Start of test_ios.html...");
    </script>
    <title>TESTS IOS</title>
    <script src="/static/hnl.mobileConsole.1.3.js"></script>
    <script nomodule src="/static/fallback.js"></script>
    <script type="module">
        console.log("Starting the main script.");
      
        // The following line seems to cause an error in Safari only
        import { TestClass } from './static/test_module.js';
      
        // The rest is not executed due to the error
        let test_class = new TestClass;
        console.log("Done.");
    </script>
    <script>
        console.log("End of test_ios.html...");
    </script>
    <body>
    </body>
</html>

/static/test_module.js

export class TestClass {
    constructor() {
      console.log("Created a test class in test_module.js");
      document.body.append("test_module.js");
    }
  }

/static/fallback.js

console.log("Fallback.js");
document.body.append("Fallback");

Результат на рабочем столе, как и ожидалось

Тестовая строка test_module.js записывается на веб-страницу, а в консоли отображаются следующие строки:

--==## Mobile Console v1.3.5 active ##==--
End of test_ios.html...
Starting the main script.
Created a test class in test_module.js
Done.

Результат в iOS 14 — ни модуль JS, ни резервный вариант не выполняются

Страница пустая (document.body.append(...) не выполнялось) и в консоли только следующие строки:

--==## Mobile Console v1.3.5 active ##==--
End of test_ios.html...

Дальнейшие проверки уже сделаны:

  1. Я понюхала сеть и вижу, что /static/test_module.js запрашивает мобильное устройство (нет запроса на fallback.js).
  2. Тип содержимого /static/test_module.js, возвращаемый веб-сервером, кажется последовательным (application/javascript; charset=utf-8).
  3. Переименование test_module.js в test_module.mjs не помогает (тот же результат, что и выше)

javascript mobile-safari ecmascript-6 es6-module-loader
person AlexN    schedule 13.07.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я обнаружил проблему: следующая библиотека прервала выполнение JS в Mobile Safari, как только был сделан вызов console.log:

    <script src="/static/hnl.mobileConsole.1.3.js"></script>

Удаление этой библиотеки и/или замена всех вызовов console.log на alert заставили вышеприведенный код работать должным образом. В примере кода также есть небольшие ошибки (например, отсутствие закрытия </head>), но это не основная проблема.

Я проверил, поймает ли jshint его в режиме ES6, к сожалению, безуспешно.

Вывод на следующий раз в случае проблем с Mobile Safari: засорите свой код JS окнами предупреждений, чтобы увидеть, когда и где он сломается :(

person AlexN    schedule 14.07.2021