TypeScriptを最小限の環境構築でブラウザコードとして動かす #JavaScript

Node.js環境でTypeScriptを手軽に動かしたければts-nodeを利用することで簡単に実現できます。
しかし、ブラウザ環境では実行前にコンパイルが必須ですし、工夫しなければ分割されたモジュールの依存を解決できません。

ブラウザ環境で何か軽い検証をしたいときにいちいちWebpackの環境構築などしていられないという人のための記事です。
TypeScriptで記述したコードを最小限の手間で最もシンプルにモジュール分割に対応したブラウザコードとして実行する方法を紹介します。

パッケージは最小限に

最小限がテーマです。typescriptだけを導入しましょう。

npm init
npm install typescript --save

TypeScriptの設定をする

最小限の手間がテーマです。configはテンプレートを活用しましょう。

npx tsc --init

生成されたtsconfig.jsonを下記のように変更してください。
（面倒であればコメント行を消去する必要はありません。）

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",                          
    "module": "amd",                     
    "outDir": "./dist",                        
    "strict": true,                           
    "esModuleInterop": true,                  
    "skipLibCheck": true,                     
    "forceConsistentCasingInFileNames": true  
  }
}

デフォルトから変更しているのは下記２項目のみです。

    "module": "amd",      // 最重要 ブラウザで実行できる形式                     
    "outDir": "./dist",   // 必須ではありませんがディレクトリ汚さないように

ディレクトリ構成

必要性はありませんが、コンパイル前後のファイルがずらりとrootに並んでいると妙なミスをして無駄な時間を過ごしかねません。
最小限には整理したディレクトリ構成にします。

root/
　┣ dist/
　│　└ index.html
　┣ src/
　│　┣ index.ts
　│　└ util.ts
　┣ package.json
　┣ package-lock.json
　└ tsconfig.json

TypeScriptコードの作成

いよいよTypeScriptを書きます。
なんでも良いですが、ここではimport, exportをブラウザコードにコンパイルできていることを確認できるようなコードにします。

util.ts

export function testFunc() {
  window.alert('testFunc');
};

index.ts

import { testFunc } from './util';

(function main(){
  testFunc();
})();

HTMLの作成

記述したtsのコードを実行するためのhtmlファイルを作成します。
Emmetを使えばすぐです。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <h1>Minimum ts env</h1>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
      data-main="./index.js"
      integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg=="
      crossorigin="anonymous"
    ></script>
  </body>
</html>

途中のscriptタグはRequireJSをCDNで読み込んでいます。
AMD形式にコンパイルされたjsであればdata-main属性に指定したファイルをエントリポイントとして依存関係を解決してくれます。

cdnjsのWebサイトでRequireJSを検索し、そこで入手したscriptタグをそのままペーストするだけです。
cdnjs

ビルドする

以下のコマンドでtsをコンパイルします。

npx tsc

watchしたければ-wオプションを与えてください。

動作確認

dist/index.htmlをブラウザで開けば動作確認ができます。

終わりに

tscだけではnode_modulesのパスが解決ができないのでライブラリの利用には工夫が必要です。
ライブラリが使える簡易環境を作るならparcelの活用がオススメです。
（この記事で紹介した手順とさほど変わらない手間でモジュールバンドラーを導入できます）

あくまで簡易なのでできないことは多いですが、サクッと環境作る方法を１つ知っておくだけで色々な検証がやりやすくなります。
自分なりの環境構築を１つ覚えておくと良いでしょう。