loadイベントのhtmlページにes6モジュールをロードする方法

Question

ES6モジュールを初めて使用しています。どのようにWebページ上のES6モジュールから関数をインポートし、その関数を使用できるか教えてくださいボタンのクリックイベントで

これまでのところ、私は（ES6Part3Module.js）と呼ばれるファイルにこのモジュールを定義しています

export function sayHello() { 
return "hi there folks"; 
} 

その後、私のhtmlページに、私は、このようにモジュールをロードした：

`<script src="ES6Part3Module.js" type="module"`>`</script`> 

私はページのボタンのクリックハンドラを作成する方法が必要です。

`<button id="sayHelloButton"`>Say Hello`</click`> 

sayHellを呼び出す私のES6モジュールからのo（）関数

私は自分のページ上のスクリプトをローカル（モジュール）を作成しようとした：

`<script type="module"`> 
import sayHello from "ES6Part3Module.js"; 
window.hello = sayHello; 
`</script`> 

して、負荷上で動作するページにいくつかのjQueryを持つ：

$(function() { 

$("#sayHelloButton").click(function() { 
alert(hello()); 
}); 

}); 

しかし、上のボタンhtmlページがクリックされ、helloが定義されていないというエラーが表示されます。

私が間違っていることを教えてください。

Answer 1

ここでは、system.jsの古いバージョンを使用した回答です。私はsystem.jsの新しいバージョンを使用して答えに興味があります。

<!-- 
ref (https://livebook.manning.com/#!/book/angular-2-development-with-typescript/chapter-2/159, p 159, listing2.7) 
--> 
<!--unpkg is a fast, global content delivery network for everything on npm--> 
<script src="//unpkg.com/es6-promise@3.0.2/dist/es6-promise.js"></script> 
<script src="//unpkg.com/traceur@0.0.111/bin/traceur.js"></script> 
<!--system js, version that was released in 21/08/2016--> 
<script src="//unpkg.com/systemjs@0.19.37/dist/system.src.js"></script> 

<script> 
System.import('./ES6Part3Module.js').then(ES6Part3Module => { 
    window.hello = ES6Part3Module.sayHello; 
}); 
</script> 

<script> 
$(function() { 

$("#sayHelloButton").click(function() { 
alert(hello()); 
}); 

}); 
</script>