import・export を利用している TypeScript コードを HTML 上で動作させる方法

前回の続き。TypeScript コード内で import や export を用いていると、デフォルトの設定ではブラウザ上でそのコードが利用できないことを話した。

今回はこの対応方法を紹介する。

なお、今回の目的は「TypeScript の素振り環境として楽に構築できること」なので、Webpack などのバンドルツールを用いるのではなく、可能な限り素に近い状態から HTML 上で利用できるようにしてみる。

目次

AMD or UMD 形式でトランスパイルして RequireJS を使う

まずは、AMD か UMD の形式で TypeScript コードをトランスパイルして、ブラウザ上で AMD 形式のファイルを動かせるライブラリ「RequireJS」を利用する方法。

RequireJS は、CDN で読み込んでも良いし、素振り環境なら npm install しておいても良いだろう。

# 現時点では v2.3.5 がインストールされた
$ npm install -S requirejs

npm パッケージの CDN サービスは、Yarn のページから確認しやすい。

次に、tsconfig.json のモジュール指定を "commonjs" から "amd" もしくは "umd" に変える。

"module": "amd",

// もしくは
"module": "umd",

UMD は AMD + CommonJS な仕様なので、どちらを指定しても変わらない。tsconfig.json の指定を変えたら再度コンパイルすること (watch 中なら tsconfig.json の変更自体も検知して再コンパイルしてくれる)。

HTML 側では以下のように実装することで、前回の記事で紹介した parent.js と、そこからインポートしている child.js が動くようになる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TypeScript on HTML Practice 1</title>
    <!-- CDN 利用時は "https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js" のように指定する -->
    <script src="../node_modules/requirejs/require.js" data-main="../dist/parent.js"></script>
  </head>
  <body></body>
</html>

data-main 属性で指定するのはエントリポイント、つまり全てのファイルの中で最初に呼ばれる中心となるファイル。このファイルからインポート関係をたどっていってくれる。

シンプルなやり方で良い感じ。

難アリ : ESModules 形式にして直接利用する

次に、最近登場した ESModules の仕組みを利用する方法を試してみた。しかしコチラは現状難アリ。

tsconfig.json を "module": "es2015" に書き換え、以下のような HTML を用意する。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TypeScript on HTML Practice 2</title>
    <script type="module" src="../dist/parent.js"></script>
  </head>
  <body></body>
</html>

これで上手くいきそうな気がするが、「dist/child なんてファイルないよ」といエラーが出てしまう。

よくよく dist/parent.js を見てみると、import 文がおかしい。

import { Child } from './child';

ESModules の仕様では、import 文は拡張子を含めて正確にファイルを指定しないといけない。なのでこれだと「dist/child なんてファイルないよ」とエラーになってしまう。

dist/parent.js の import 文を以下のように直せば構文上は正しくなる。

import { Child } from './child.js';

しかし、このように直しても、ローカルで動かすには難がある。直接 HTML ファイルをブラウザで開くだけでは、Chrome や Firefox の場合 CORS 不正を疑われてしまい上手く動かない。オプション引数を指定して起動するか、http-server でも入れてローカルサーバを立てないといけない。

# Windows の場合
> chrome.exe --disable-web-security --user-data-dir

# Macの場合
$ open /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir

TypeScript の対応どうなっとるんだ？と思ったら、今のところ「トランスパイル時に import 文への拡張子付与とかしないんで」ってことみたい。tsc コマンド単体でのトランスパイルで ESModules を実現するのはまだ厳しそう。

一応、http-server を立て、import 文を手動で直したら、Chrome で動作させられることは確認できた。

失敗 : SystemJS を使って TypeScript をそのまま動作させる

最後に、SystemJS というライブラリを使って、ブラウザ上で TypeScript をトランスパイルして動かしてみる方法があったので、試してみた。

コチラに沿って SystemJS を用意してみたが、どうもトランスパイラを特定できないとかで上手くいかず断念。

結論 : AMD (UMD) 形式で出力して RequireJS を使おう

色々試したが、結局最初に紹介した RequireJS を使う方法が一番安全にできた。

Angular CLI から TypeScript に入ったので、Webpack もロクにいじらず、素の TypeScript の動かし方がイマイチ分かっていなかったが、これで少しは TypeScript の実行環境を気にすることができたと思う。