2017-01-18 27 views
15

私はES6(ECMAScriptの6)に新たなんだ、と私は、ブラウザでそのモジュールシステムを使用したいと思います。私はES6は、FirefoxとChromeでサポートされていますが、私はexportES6:キャッチされないでSyntaxError:予期しないトークン輸入

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;  

なぜですか?

+0

ES6 *モジュール*はまだブラウザでサポートされていません。また、モジュールではなくスクリプトを読み込んでいます。 – Bergi

+2

私はまだスクリプトとモジュールの違いを理解していません – cdarwin

+0

[ここ](http://stackoverflow.com/a/39652842/1048572) – Bergi

答えて

14

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

+0

この機能はSofの質問で実装されていますが、実際にはMDNソースがより信頼性が高いと読んでいます。 – cdarwin

+0

次のリンクによると、Chrome 61はインポートをサポートする必要があります。 https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7 – Marc

16

に見つかり

This feature is only just beginning to be implemented in browsers natively at this time. It is implemented in many transpilers, such as TypeScript and Babel, and bundlers such as Rollup and Webpack.

あなたは、Google Chromeのベータ版(61)/クロームカナリアでES6モジュールを試すことができます。ポール・アイルランドによる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>

はそれが役に立てば幸い!

+9

そうです...私が気づくようになった重要な部分は、 '' ' ''それを追加しないとエラーが発生します。 '' '故意にクロムがフラグの付いていないES6モジュールをサポートすると言われていたので、ブラウザに指定するためにtype属性が必要であることに気付きました。これはES6モジュールです。 –

関連する問題