フロントエンドとバックエンドでTypeScriptのコンパイル方法を切り替える

-pオプションを使用する。
webpackなどの兼ね合いもあるのでフロントを基準にしたほうがいいかと。




フロントエンド(ブラウザ)をトランスパイルする


tsconfig.json
一例(一応webpackを使う想定)
{
  "compilerOptions": {
    "outDir": "./built/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5"
  },
  "include": [
    "./src/**/*"
  ]
}

tsc
コマンドでルートのtsconfig.jsonを元にトランスパイル
./src以下の依存完結を解決して、./built/以下にまとめることを想定。



バックエンド(サーバ)をトランスパイルする



tsconfig_node.json
一例
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true,
    "declaration": true,
    "inlineSources": true,
    "moduleResolution": "node",
    "rootDir": ".",
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ]
  },
  "include": [
    "routes/*",
    "utils/*"
  ]
}

tsc -p tsconfig_node.json
コマンドでtsconfig_node.jsonを元にトランスパイル
Expressなどでroutes, utils以下をファイル単位でコンパイルすることを想定。


本当はもっといい方法があるかもしれない


2018年2月19日月曜日