SystemJSを使ってブラウザで動的にtypescriptをロード、コンパイルして実行する方法、簡単なサンプルを作成して確認しています。
※目次をクリックすると目次の下部にコンテンツが表示されます。
SystemJSを使って動的にロード、コンパイルして実行
SystemJS、unpkgを使ってブラウザで動的にtypescriptをロード、コンパイルして実行する方法を確認しました。
１）unpkgの概要
https://unpkg.com/#/
・npmに登録されているパッケージをコンテントデリバリーネットワーク（CDN）で利用できる。
○パッケージの指定方法
https://unpkg.com/パッケージ名@バージョン/fileのパス
例）
https://unpkg.com/react@15.3.1/dist/react.min.js
https://unpkg.com/react-dom@15.3.1/dist/react-dom.min.js
https://unpkg.com/history@4.2.0/umd/history.min.js
○パッケージ内のファイルを探したい場合
以下のように入力する。
https://unpkg.com/パッケージ名/
例）
https://unpkg.com/lodash/
https://unpkg.com/modernizr/
https://unpkg.com/react/
２）サンプルコード作成
①CDNサービス（unpkg）のSystemJSのパスを確認
https://unpkg.com/systemjs@0.20.13/dist/system.src.js
②CDNサービス（unpkg）のTypeScriptのパスを確認
https://unpkg.com/typescript@2.3.4/lib/typescript.js
③HTML
１）unpkgの概要
https://unpkg.com/#/
・npmに登録されているパッケージをコンテントデリバリーネットワーク（CDN）で利用できる。
○パッケージの指定方法
https://unpkg.com/パッケージ名@バージョン/fileのパス
例）
https://unpkg.com/react@15.3.1/dist/react.min.js
https://unpkg.com/react-dom@15.3.1/dist/react-dom.min.js
https://unpkg.com/history@4.2.0/umd/history.min.js
○パッケージ内のファイルを探したい場合
以下のように入力する。
https://unpkg.com/パッケージ名/
例）
https://unpkg.com/lodash/
https://unpkg.com/modernizr/
https://unpkg.com/react/
２）サンプルコード作成
①CDNサービス（unpkg）のSystemJSのパスを確認
https://unpkg.com/systemjs@0.20.13/dist/system.src.js
②CDNサービス（unpkg）のTypeScriptのパスを確認
https://unpkg.com/typescript@2.3.4/lib/typescript.js
③HTML
<html>
<head>
<title>Hello World!</title>
<script src="https://unpkg.com/systemjs@0.20.13/dist/system.src.js"></script>
<script>
System.config({
map: {
"ts": "https://unpkg.com/plugin-typescript@7.0.6/lib/plugin.js",
"typescript": "https://unpkg.com/typescript@2.3.4/lib/typescript.js"
},
transpiler: 'ts',
meta: {
'typescript': {
"exports": "ts"
}
}
});
System.import('js/systemjs-sample.ts')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<h1 id="message"></h1>
</body>
</html>
④TypeScript
（systemjs-sample.ts）
export class Greeter {
constructor(message) {
this.message = message;
}
greet() {
var element = document.querySelector('#message');
element.innerHTML = this.message;
}
};
var greeter = new Greeter('Hello, world!');
greeter.greet();
SystemJSとtypescriptでモジュールをエクスポート、インポート
●systemjsを使ってモジュールをインポートするサンプル
〇systemjsの設定
<script src="https://unpkg.com/systemjs@0.20.13/dist/system.src.js"></script>
<script>
System.config({
map: {
"systemjs-sample-export": "./js/systemjs-sample-export.ts",
"ts": "https://unpkg.com/plugin-typescript@7.0.6/lib/plugin.js",
"typescript": "https://unpkg.com/typescript@2.3.4/lib/typescript.js"
},
transpiler: 'ts',
meta: {
'typescript': {
exports: "ts"
}
}
});
System.import('js/systemjs-sample1.ts')
.then(null, console.error.bind(console));
</script>
〇TypeScriptサンプルコード
（systemjs-sample-export.ts）
export class Greeter {
constructor(message) {
this.message = message;
}
greet() {
var element = document.querySelector('#message');
element.innerHTML = this.message;
}
};
（systemjs-sample1.ts）
import {Greeter as Sample} from './systemjs-sample-export';
var greeter = new Sample('Hello, world!');
greeter.greet();