VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

SystemJSを使ってTypeScriptを動的に実行

wp-admin

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 
<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();
モバイルバージョンを終了