TypeScriptのbuild
buildとは,コンパイル、トランスパイル,バンドル,webpak,cra,vite,node/ブラウザ環境の差異,ESM/CJS, tscのソース,ts-node, サーバーサイドでのビルド、nestjs,tsconfig,ts(x)ファイルがjsファイルになるまで、ソースマップ,testファイル,ts-jest
最終的に記事にしたい
tscコンパイラ
使い方
$ yarn add tsc
$ yarn tsc --init / あるいはtsconfig.jsonファイルを作成し、コンパイルオプションを書き込んでいく
をしてプロジェクト内にtsconfig.jsonを用意する必要がある
$ yarn tscコマンドにオプションを付けて実行することでコンパイルを行う
tsconfig.(*.)jsonを読み込んでコンパイルを行う
tsconfig.build.json や tsconfig.node.json などを準備して用途の合わせて使うことがある
$ yarn tsc -p(--project) ./tsconfig.hoge.json とすれば、./tsconfig.hoge.json の設定でコンパイルを行う
省略時のデフォルトが ./tsconfig.json となっている
設定(一部)
target
変換後のコードのECMAScriptのバージョンを指定する
サーバの場合
使用するnodeのバージョンに合ったものを設定する
ex: Node.js 14を使う場合 target: "ES2020"
フロントの場合
サポート対象のブラウザがサポートしているECMAScriptバージョンに合わせる
古いブラウザをサポート対象とする場合は"ES3"または"ES5"を設定する
"ES3"を設定すると変換後に動かないコードになる可能性がある。"ES5"でも起こりうる。
tsconfigのlibにサポートしているバージョンを含めることによって使えるようになるぽい(未実行)
module
出力されるJavaScriptがどのようにモジュールを読み込むか
サーバーサイドとフロントでモジュールの読み込み方が異なるため、合うものを設定する
サーバー(node): commonjs形式
フロント: ESModule形式
サーバやCLIアプリ(node環境)だけで使う場合、commonjsにすればOK
craで作成したtsconfigを見る
code:json
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"module": "esnext",
コンパイル後はes5のコードになることが読み取れる
noEmit: true になっているため、craではtscによって型・構文チェックをしているにすぎなそう
No Emit -
noEmit
Do not emit compiler output files like JavaScript source code, source-maps or declarations.
This makes room for another tool like Babel, or swc to handle converting the TypeScript file to a file which can run inside a JavaScript environment.
You can then use TypeScript as a tool for providing editor integration, and as a source code type-checker.
babelあたりでts→jsにコンパイルしているっぽい
viteのcliで作成したtsconfig
code:json
"target": "ESNext",
"module": "ESNext",