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?

— 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

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:

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

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

Oryginalna odpowiedź poniżej