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

86

Я новичок в 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;

Почему?

javascript html ecmascript-6 module es6-modules cdarwin
источник
Модули ES6 пока не поддерживаются в браузере. Кроме того, вы все еще загружаете сценарий, а не модуль.
Берги
3
Я до сих пор не понимаю разницы между скриптом и модулем
cdarwin
Смотрите здесь
Берги
20
Важная часть, на которую я обратил внимание, - <script type="module"></script>убедитесь, что вы добавили, что в противном случае вы получите эту ошибку. Я бился головой об стену, постоянно <script>import ... </script>зная, что теперь говорят, что хром поддерживает модули 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 (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 ", "lineo": 24, "colno": 8}
hoogw 02
4
Я получил ошибку выше, запустив фрагмент кода выше, используйте Chrome v67, почему?
hoogw 02
@hoogw Stackoverflow добавил, что запускать фрагмент кода автоматически. Этот код не может быть выполнен как есть. Вам нужно скопировать код в index.html и разделить файлы .js, как показано выше, и попробовать в браузере!
Рупеш Редди 08
Благодарю за полезный ответ. Я удалил для вас фрагмент бегуна. (Как я видел, фрагменты StackOverflow не могут иметь более одного jsисточника).
Мир-Исмаили
25

К сожалению, в настоящий момент многие браузеры не поддерживают модули.

В настоящее время эта функция только начинает реализовываться в браузерах. Он реализован во многих транспиляторах, таких как TypeScript и Babel, и таких сборщиках, как Rollup и Webpack.

Найдено на MDN

t3h2mas
источник
Я читал, что эта функция была реализована в вопросе Sof, но источник MDN на самом деле более надежен.
cdarwin
Согласно следующей ссылке Chrome 61 должен поддерживать импорт - это не так. medium.com/dev-channel/…
Marc
4
Вы должны добавить type = "module" в свой тег скрипта.
smohadjer
10

это сработало для меня, добавивtype="module" в скрипт importмои 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

абернье
источник