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

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

SystemJSを使ってブラウザで動的にtypescriptをロード、コンパイルして実行する方法、簡単なサンプルを作成して確認しています。

※目次をクリックすると目次の下部にコンテンツが表示されます。

SystemJSを使って動的にロード、コンパイルして実行
SystemJS、unpkgを使ってブラウザで動的にtypescriptをロード、コンパイルして実行する方法を確認しました。
 
1)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/
 
2)サンプルコード作成
 
①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();
モバイルバージョンを終了