ブラウザに自分のモジュールが表示されないのはなぜですか？

Google Chromeの58.0.3029.110（64ビット）
のECMAScript 6ブラウザに自分のモジュールが表示されないのはなぜですか？

私はJavaScriptを学び、理解のECMAScript 6本を読みました。 ECMAScript 6はモジュールの概念を定義しています。

私はカップルjsファイルを書いて、それらを私のhtmlファイルに添付しました。それらの1つはスクリプトであり、その他はモジュールです。しかし、Google Chromeには私のjs-moduleは表示されません。それはなぜ起こるのですか？

これは私のhtmlです：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'/> 
    <title>Sandbox</title> 
    <script src='./js/module.js' type='module'></script> 
    <script src='./js/script.js' type='text/javascript'></script> 
</head> 
<body> 
</body> 
</html>

これは私のスクリプトです：

/* ECMAScript 6 
* ./js/script.js 
*/ 

function scriptFunction(){ 
    console.log('I am script function!'); 
}

これは私のモジュールです：

/* ECMAScript 6 
* ./js/module.js 
*/ 

function internalFunction(){ 
    console.log('I am internal!'); 
} 

export function exportedFunction(){ 
    console.log('I am exported!'); 
}

これが結果です：

出典

2017-05-20 Andrey Bushman

モジュールにエクスポートがあるということは、グローバルスコープにエクスポートするという意味ではありません。実際、グローバルに輸出するという考え方は、モジュールの目的に反しています。 – estus

私はモジュールがまだブラウザでサポートされているとは思わない。もし私がこれを正しく読んでいるのであれば、クロム60までは利用できません.... https://www.chromestatus.com/feature/5365692190687232 –

私はあなたのコードを最初に蒸散させるためにバベルを使わなければならないと思いますあなたはes6/es2015を使っています〜彼らはその本で説明していないのですか？ – sheriffderek

モジュールは、ほとんどのブラウザではまだサポートされていません。 Safari 10.1はそれらを実装しています。 Chrome Canaryでは@SkinnyJの説明に従ってサポートを有効にする必要があります。

しかし、それでもまだ、あなたのコード内でいくつかの問題を修正する必要があります：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'/> 
    <title>Sandbox</title> 
    <script src='./js/module.js' type='module'></script> 
    <script src='./js/script.js' type='module'></script> 
</head> 
<body> 
</body> 
</html>

/* ECMAScript 6 
* ./js/module.js 
*/ 

function internalFunction() { 
    console.log("I am internal!"); 
} 

export function exportedFunction() { 
    internalFunction(); 
    console.log("I am exported!"); 
}

/* ECMAScript 6 
* ./js/script.js 
*/ 

import {exportedFunction} from "./module.js"; 

function scriptFunction() { 
    console.log("I am script function!"); 
} 
scriptFunction(); 
exportedFunction();

これは、クロムとサファリ10.1とChromeカナリアで動作します：//フラグ/＃イネーブル実験-web-platform-featuresが有効になっています。

出典

2017-05-20 21:51:49

ES6モジュールは現在、「Experimental Web Platform」フラグの背後にあるChrome Canaryで利用できます。それらは「安定した」Chromeでは利用できません。

出典

2017-05-20 21:33:57

ブラウザに自分のモジュールが表示されないのはなぜですか？

答えて

関連する問題