Імпорт ES2015 не працює (навіть на верхньому рівні) у Firefox

Question 1

Це мої зразки файлів:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="t1.js"></script>
</head>
<body></body>
</html>

t1.js:

import Test from 't2.js';

t2.js:

export const Test = console.log("Hello world");

Коли я завантажую сторінку у Firefox 46, вона повертає "SyntaxError: декларації про імпорт можуть відображатися лише на верхньому рівні модуля" - але я не впевнений, скільки ще верхнього рівня можна отримати тут. Ця помилка є червоною оселедцем, і імпорт / експорт просто ще не підтримується?

Question 2

Насправді помилка, яку ви отримали, полягала в тому, що вам потрібно чітко вказати, що ви завантажуєте модуль - лише тоді використання модулів дозволено:

<script src="t1.js" type="module"></script>

Я знайшов це в цьому документі про використання імпорту ES6 у браузері . Рекомендована література.

Повністю підтримується у цих версіях браузера (і пізніших версіях; повний список на caniuse.com ):

Firefox 60
Chrome (настільний) 65
Хром (андроїд) 66
Сафарі 1.1

У старих браузерах вам може знадобитися ввімкнути деякі прапори в браузерах:

Chrome Canary 60 - за прапором експериментальної веб-платформи в chrome:flags.
Firefox 54 - dom.moduleScripts.enabledналаштування в about:config.
Edge 15 - за налаштуванням експериментальних функцій JavaScript у about:flags.

Question 3

Це вже не точно. Усі поточні браузери тепер підтримують модулі ES6

Оригінальна відповідь нижче

З importMDN :

На даний момент ця функція не реалізована в жодному браузері. Він реалізований у багатьох перетворювачах, таких як Traceur Compiler, Babel або Rollup.

Браузери не підтримують import.

Ось таблиця підтримки браузера:

Якщо ви хочете імпортувати модулі ES6, я б запропонував скористатися компілятором (наприклад, babel ).

Question 4

Просто використання розширення файлу .js під час імпорту файлів вирішило ту саму проблему (не забудьте встановити type="moduleтег скрипта).

Просто напишіть:

import foo from 'foo.js';

замість

import foo from 'foo';

Question 5

Додайте type=moduleсценарії, які імпортують та експортують модулі, щоб вирішити цю проблему.

Question 6

ви повинні вказати його тип у скрипті, а експорт має бути за замовчуванням .. для ex у вашому випадку це має бути,

<script src='t1.js' type='module'>

для t2.js використовуйте значення за замовчуванням після такого експорту , експортуйте за замовчуванням 'тут ваш вираз йде' (тут не можна використовувати змінну) . Ви можете використовувати таку функцію,

export default function print(){ return console.log('hello world');}

а для імпорту ваш синтаксис імпорту має бути таким, імпортуйте друк із './t2.js' (використовуйте розширення файлу та ./ для того самого каталогу) .. Сподіваюся, це буде корисно для вас!

Question 7

Задля аргументу ...

Можна додати власний інтерфейс модуля до глобального об'єкта вікна. Хоча, це не рекомендується. З іншого боку, DOM вже зламаний і нічого не зберігається. Я використовую це весь час для перехресного завантаження динамічних модулів та передплати користувацьких слухачів. Це, мабуть, не відповідь, але це працює. Переповнення стека тепер має module.export, який викликає подію під назвою 'Spork' - хоча б до оновлення ...

//  spam the global window with a custom method with a private get/set-interface and     error handler... 

window.modules = function(){
  window.exports = {
    get(modName) {
      return window.exports[modName] ? window.exports[modName] : new Error(`ERRMODGLOBALNOTFOUND [${modName}]`)
    },
    set(type, modDeclaration){
      window.exports[type] = window.exports[type] || []
      window.exports[type].push(modDeclaration)

    }
  }

}

//  Call the method
window.modules()

//  assign a custom type and function
window.exports.set('Spork', () => console.log('SporkSporSpork!!!'))


// Give your export a ridiculous event subscription chain type...
const foofaalala = window.exports.get('Spork')

// Iterate and call (for a mock-event chain)
foofaalala.forEach(m => m.apply(this))

//  Show and tell...
window