のらねこの気まま暮らし

技術系だけど、Qiita向きではないポエムとかを書くめったに更新されないヤツ

EC6のimport及びexportを使いたい

jspm関連でEC6を使おうとしたけど、moduleの管理の仕方いろいろあってどうすればいいのかわからなかったので調べた。 SystemJSを使ってブラウザでもEC6のコードを利用できます。

SystemJSのI/Fで利用

ファイルをimportする

<script src="system.js"></script>
<script>
System.import("runtime-hoge");
</script>

ファイルをimportして処理を行う

<scirpt src="system.js"></script>
<script>
System.import("promise-hoge").then((hoge) => {
  // exportした`hoge`が引数に渡される
  console.log(hoge);
});
</script>

pollyfillを使う

<scirpt src="system.js"></script>
<script type="module">
import {hoge} from 'hoge';
console.log(hoge);
</script>

Polyfillを使ったmoduleシステムの利用

名前付きでエクスポート

fuga.js:

export var fuga = 'hoge';

index.js:

import {fuga} from 'fuga';
console.log(fuga); // hoge

名前付きでエクスポート

fuga.js:

var fuga = 'hoge';
export {fuga};

index.js:

import {fuga} from 'fuga';
console.log(fuga); // hoge

名前を指定しないでエクスポート

fuga.js:

export default var fuga = 'hoge';

index.js:

import fuga from 'fuga';
console.log(fuga); // hoge

エクスポートしないでcodeだけ実行する

fuga.js:

console.log('fuga');

index.js:

import 'fuga'; // fuga