NodeJSでSystemJSを使ってES6を試す

SystemJSとは、ES6やAMD等の汎用的なモジュールシステム。 SystemJSを使うとどんなふうにロードされるのかを試した。

インストール

npm install --save systemjs

基本的な使い方

良い感じローディングするためには初期設定が必要。 require で呼び出すんだけど、うーん・・・ coffee-script.register()だと思えばまぁ・・・

importの返り値はpromiseなので、exportしている場合は、 .then で受け取れる。

index.js:

var System = require("systemjs");

System.import("./lib/example"); // ./lib/example.js を読んでくれる

ベースのパスを指定して ./lib の指定をなくす

baseURLにURLを指定することでそこを基点にファイルを探査してくれるらしい。 windowsではパスの先頭に file: の指定が必要とのこと。

index.js:

var path   = require("path");
var System = require("systemjs");
System.config({
  baseURL: path.resolve("./lib");
});
System.import("example");

node_modulesの読み込み

これまじかよって思った。

index.js

var path   = require("path");
var System = require("systemjs");
System.config({
  baseURL: path.resolve("./lib");
});
System.map['lodash'] = "../node_modules/lodash/index"; // `./lib` からの相対パス
System.import("example");

lib/example.js

import _ from "lodash"; // 相対パスを指定するか、mapに登録する必要がある様子
// any script

まとめ

SystemJSを使ったES6の簡単なサンプルの紹介でした。 npmライブラリはおとなしく require 使いつつ自作ライブラリに関してはimport使うとかするのがいいのかな。

issuesとか眺めながら様子みたい。

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