Модулі ES6 у браузері: Uncaught SyntaxError: Несподіваний імпорт маркера

85

Я не знаю ES6 (ECMAScript 6), і я хотів би використовувати його модульну систему у браузері. Я прочитав, що ES6 підтримується Firefox та Chrome, але я отримую таку помилкуexport

Uncaught SyntaxError: Unexpected token import

У мене є файл test.html

<html>
    <script src="test.js"></script>
<body>
</body>
</html>

і файл test.js

'use strict';

class Test {

    static hello() {
        console.log("hello world");
    } 
}

export Test;

Чому?

— cdarwin
джерело

Модулі ES6 ще не підтримуються у браузері. Також ви все ще завантажуєте скрипт, а не модуль.

— Бергі,

3

Я досі не розумію різниці між сценарієм та модулем

— cdarwin

Дивіться тут

— Бергі

20

Важливо, що я помітив, <script type="module"></script>обов’язково додайте, що інакше ви отримаєте цю помилку. Я стукав головою об стіну, постійно <script>import ... </script>усвідомлюючи, що зараз, як кажуть, chrome підтримує модулі ES6 без прапорів, тоді я помітив, що атрибут type потрібен, щоб вказати браузеру, що це модуль ES6, без якого ви отримаєте саме це помилка.

— Еммануель Махуні

1

Я використовую Chrome 68, я все ще бачу цю помилку, коли ми використовуємо import * from

— Integration

66

Зараз багато сучасних браузерів підтримують модулі ES6. Поки ви імпортуєте свої сценарії (включаючи точку входу у вашу програму), використовуючи їх, <script type="module" src="...">це буде працювати.

Подивіться на caniuse.com для отримання додаткової інформації: https://caniuse.com/#feat=es6-module

— вулнетий
джерело

53

Ви можете спробувати модулі ES6 у Google Chrome Beta (61) / Chrome Canary.

Довідкове впровадження ToDo MVC Полом Ірландським - https://paulirish.github.io/es-modules-todomvc/

Я маю базову демонстрацію -

//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>

Сподіваюся, це допоможе!

— Рупеш Редді
джерело

33

Правильно ... Важливою частиною, яку я помітив, є <script type="module"></script>обов’язкове додавання, що інакше ви отримаєте цю помилку. Я стукав головою об стіну, постійно <script>import ... </script>усвідомлюючи, що зараз хром, як кажуть, підтримує модулі ES6 без прапорів, тоді я помітив, що атрибут type потрібен, щоб вказати браузеру, що це модуль ES6.

— Еммануель Махуні,

1

{"message": "Uncaught SyntaxError: Несподіваний маркер {", "filename": " stacksnippets.net/js ", "lineno": 24, "colno": 8}

— hoogw,

4

Я отримав помилку вище, запустивши фрагмент коду вище, використовуйте chrome v67, чому?

— hoogw

@hoogw Stackoverflow додав, що автоматично запускати фрагмент коду. Цей код не може бути виконаний як є. Вам потрібно скопіювати код до index.html та відокремити файли .js, як показано вище, та спробувати у браузері!

— Руппеш Редді

Дякую за корисну відповідь. Я видалив для вас фрагмент фрагментів. (Як я бачив, фрагменти StackOverflow не можуть мати більше одного jsджерела).

— Мір-Ісмаїлі,

25

На жаль, зараз багато модулів не підтримують модулі.

Наразі ця функція лише починає впроваджуватися у браузерах. Він реалізований у багатьох перекладачах, таких як TypeScript та Babel, та в пакетах, таких як Rollup та Webpack.

Знайдено на MDN

— t3h2mas
джерело

Я прочитав, що ця функція була реалізована в запитанні Sof, але джерело MDN насправді є більш надійним.

— cdarwin

Відповідно до наведеного нижче посилання Chrome 61 повинен підтримувати імпорт - це не так. medium.com/dev-channel/…

— Марк

4

Ви повинні додати type = "module" до вашого тегу сценарію.

— smohadjer

10

це спрацювало для мене, додавшиtype="module" до сценарію importing 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>

Див. Демо: https://codepen.io/abernier/pen/wExQaa

— аберньє
джерело