web-dev-qa-db-ja.com

ブラウザのES6：SyntaxError：キャッチされていないトークンのインポート

私は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;

どうして？

javascriptmoduleecmascript-6
60
cdarwin

最近の多くのブラウザはES6モジュールをサポートしています。 <script type="module" src="...">を使ってあなたのスクリプト（あなたのアプリケーションへのエントリポイントを含む）をインポートする限り、それは動作するでしょう。

詳しくは caniuse.com をご覧ください。 https://caniuse.com/#feat=es6-module

30
vullnetyy

ES6モジュールはGoogle Chrome Beta（61）/ Chrome Canaryで試すことができます。

Paul Irishによる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>

それが役に立てば幸い！

44
Roopesh Reddy

残念ながら、モジュールは現在多くのブラウザでサポートされていません。

この機能は現時点でブラウザにネイティブに実装され始めたばかりです。 TypeScriptやBabelなどの多くのtranspiler、およびRollupやWebpackなどのバンドルで実装されています。

MDN に見つかりました

25
t3h2mas

それは私のためにうまくいった私のmjsをスクリプトimportにtype="module"を追加する：

<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

6
abernier