Jestem nowy w ES6 (ECMAScript 6) i chciałbym używać jego systemu modułów w przeglądarce. Czytałem, że ES6 jest obsługiwany przez przeglądarki Firefox i Chrome, ale pojawia się następujący błąd podczas używaniaexport
Uncaught SyntaxError: Unexpected token import
Mam plik test.html
<html>
<script src="test.js"></script>
<body>
</body>
</html>
i plik test.js
'use strict';
class Test {
static hello() {
console.log("hello world");
}
}
export Test;
Czemu?
<script type="module"></script>upewnienie się, że dodasz, że w przeciwnym razie otrzymasz ten błąd. Uderzałem głową w ścianę bez przerwy robiąc <script>import ... </script>świadomie, że teraz mówi się, że chrome obsługuje moduły ES6 bez flag, potem zauważyłem, że atrybut type był potrzebny, aby wskazać przeglądarce, że jest to moduł ES6, bez którego dokładnie to uzyskasz błąd.
Odpowiedzi:
Wiele nowoczesnych przeglądarek obsługuje teraz moduły ES6. O ile importujesz swoje skrypty (w tym punkt wejścia do aplikacji) przy użyciu<script type="module" src="..."> nich będzie działać.
Zajrzyj na caniuse.com, aby uzyskać więcej informacji: https://caniuse.com/#feat=es6-module
Możesz wypróbować moduły ES6 w Google Chrome Beta (61) / Chrome Canary.
Implementacja referencyjna ToDo MVC autorstwa Paula Irisha - https://paulirish.github.io/es-modules-todomvc/
Mam podstawowe demo -
//app.js
import {sum} from './calc.js'
console.log(sum(2,3));
//calc.js
let sum = (a,b) => { return a + b; }
export {sum};
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>ES6</h1>
<script src="app.js" type="module"></script>
</body>
</html>
Mam nadzieję, że to pomoże!
<script type="module"></script>, którą zauważyłem, jest upewnienie się, że dodasz, że w przeciwnym razie otrzymasz ten błąd. Uderzałem głową w ścianę, ciągle <script>import ... </script>wiedząc, że teraz mówi się, że chrome obsługuje moduły ES6 bez flag, a potem zauważyłem, że atrybut type był potrzebny, aby wskazać przeglądarce, że jest to moduł ES6.
jsźródła).
Niestety, wiele przeglądarek nie obsługuje obecnie modułów.
Obecnie ta funkcja dopiero zaczyna być implementowana w przeglądarkach natywnie. Jest zaimplementowany w wielu transpilerach, takich jak TypeScript i Babel, oraz w pakietach, takich jak Rollup i Webpack.
Znaleziono na MDN
zadziałało dla mnie, dodająctype="module" do skryptu importmoje mjs:
<script type="module">
import * as module from 'https://rawgit.com/abernier/7ce9df53ac9ec00419634ca3f9e3f772/raw/eec68248454e1343e111f464e666afd722a65fe2/mymod.mjs'
console.log(module.default()) // Prints: Hi from the default export!
</script>
Zobacz demo: https://codepen.io/abernier/pen/wExQaa