Import z ES2015 nie działa (nawet na najwyższym poziomie) w Firefoksie

90

Oto moje przykładowe pliki:

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

Kiedy ładuję stronę w przeglądarce Firefox 46, zwraca ona „SyntaxError: deklaracje importu mogą pojawiać się tylko na najwyższym poziomie modułu” - ale nie jestem pewien, o ile więcej najwyższego poziomu może uzyskać tutaj instrukcja import. Czy ten błąd to czerwony śledź i czy import / eksport po prostu nie jest jeszcze obsługiwany?

javascript html firefox ecmascript-6 es6-modules Christoph Burschka
źródło
2
Moduły ES6 nie są jeszcze obsługiwane w przeglądarkach.
Felix Kling
2
Nieprawda Felix. Nawet w 2016 r. Nieobsługiwane przez „wszystkie” przeglądarki byłoby dokładniejsze.
Andrew S

Odpowiedzi:

128

Właściwie otrzymałeś błąd, ponieważ musisz wyraźnie stwierdzić, że ładujesz moduł - tylko wtedy użycie modułów jest dozwolone:

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

Znalazłem to w tym dokumencie o używaniu importu ES6 w przeglądarce . Rekomendowane lektury.

W pełni obsługiwane w tych wersjach przeglądarek (i nowszych; pełna lista na caniuse.com ):

  • Firefox 60
  • Chrome (komputer) 65
  • Chrome (Android) 66
  • Safari 1.1

W starszych przeglądarkach może być konieczne włączenie niektórych flag w przeglądarkach:

  • Chrome Canary 60 - za flagą Experimental Web Platform w chrome:flags .
  • Firefox 54 - dom.moduleScripts.enabledustawienie wabout:config .
  • Edge 15 - za ustawieniem eksperymentalnych funkcji JavaScript w programie about:flags.
Tomáš Zato - Przywróć Monikę
źródło
1
Dzięki; wydaje się, że to nowa informacja (porównaj tabelę obsługi przeglądarki z poprzedniej odpowiedzi z developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… ), więc przełączam się na twoją odpowiedź, która importnie jest już nieobsługiwana.
Christoph Burschka,
1
działa teraz bez żadnych flag / ustawień w edge 16299 i chrome 64. Jedno zastrzeżenie trzeba zaimportować ścieżkę, a nie plik, więc w t1.js: import Test from './t2.js';
Catweazle
@Catweazle Czy na pewno tak './t2.js'i nie './t2'bez .js?
fredoverflow
@fredoverflow Tak, należy podać pełną nazwę, w przeciwieństwie do Node.js.
Tomáš Zato - Przywróć Monikę
potrzebuje pełnego przykładu, nie tylko importu
bharal
14

To już nie jest dokładne. Wszystkie obecne przeglądarki obsługują teraz moduły ES6

Oryginalna odpowiedź poniżej

Od importdnia MDN :

Ta funkcja nie jest obecnie zaimplementowana w żadnej przeglądarce natywnie. Jest zaimplementowany w wielu transpilerach, takich jak Traceur Compiler, Babel czy Rollup.

Przeglądarki nie obsługują import.

Oto tabela obsługiwanych przeglądarek:

wprowadź opis obrazu tutaj

Jeśli chcesz zaimportować moduły ES6, sugerowałbym użycie transpilera (na przykład babel ).

Josh Beam
źródło
Czy możesz włączyć te funkcje za pomocą flagi (na przykład w Chrome)?
evolutionxbox,
4
@evolutionxbox: Jeśli funkcje nie są ulepszone , nie ma też flagi.
Bergi
1
Jeśli funkcje nie są zaimplementowane, dlaczego nie pojawia się błąd składni lub błąd informujący, że nie zostały zaimplementowane? To nie ma sensu.
Tomáš Zato - Przywróć Monikę
@ TomášZato, zależy tylko od tego, jaką przeglądarkę używasz, zdecydowała się to obsłużyć
Josh Beam
1
Właściwie w moim kodzie wystąpił błąd i działa dobrze. Nie wiem, dlaczego Twoja odpowiedź została pozytywnie oceniona. Przeglądarki, które nie obsługują importu, zgłaszają to. Błędy takie jak ten, o którym mowa, są rzeczywistymi błędami podczas importu.
Tomáš Zato - Przywróć Monikę
2

Samo użycie rozszerzenia .js podczas importowania plików rozwiązało ten sam problem (nie zapomnij ustawić type="modulew tagu script).

Po prostu napisz:

import foo from 'foo.js';

zamiast

import foo from 'foo';
krmld
źródło
1

Dodaj type=moduleskrypty, które importują i eksportują moduły, rozwiązałyby ten problem.

Abhishek Khatri
źródło
0

musisz określić jego typ w skrypcie i eksport musi być domyślny ... na przykład w twoim przypadku powinien być,

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

dla t2.js użyj domyślnego po wyeksportowaniu w ten sposób, eksportuj domyślne „tutaj twoje wyrażenie” (nie możesz tutaj użyć zmiennej) . możesz użyć takiej funkcji,

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

a do importu składnia importu powinna wyglądać następująco: importowanie wydruku z „./t2.js” (użyj rozszerzenia pliku i ./ dla tego samego katalogu) .. Mam nadzieję, że to będzie przydatne dla Ciebie!

SK Biswas
źródło
0

Dla argumentu...

Można dodać niestandardowy interfejs modułu do globalnego obiektu okna. Chociaż nie jest to zalecane. Z drugiej strony DOM jest już uszkodzony i nic nie pozostaje. Używam tego przez cały czas do krzyżowego ładowania modułów dynamicznych i subskrybowania niestandardowych słuchaczy. To prawdopodobnie nie jest odpowiedź - ale działa. Przepełnienie stosu ma teraz module.export, które wywołuje zdarzenie o nazwie `` Spork '' - przynajmniej do odświeżenia ...

//  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
Paul Fabing
źródło