ローカルにTypeScriptの動作確認環境をNode.jsで作成したメモ
TypeScriptの動作確認を簡単にするなら、TypeScript Playground をブラウザから使うのが簡単
ではあるんだけれど、軽くローカルでも動かしたいので設定したのだが、ちょっと面倒だったのでメモ。
Node.js と TypeScript は設定しておく。
1.TypeScriptとNode.jsの環境作成
1.1 npm package.json ファイルを生成
プロジェクトディレクトリ(今回はsample)を作成し、以下のコマンドで、package.jsonファイルが生成される
$ npm init -y Wrote to /Users/hirotoyagi/Workspaces/Node/sample/package.json:
{
“name”: “sample”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}
1.2 TypeScriptのインストールと動作確認
TypeScript をインストールして、tsc コンパイラが呼び出せるか確認
$ npm install –save-dev typescript $ node_modules/.bin/tsc –version Version 3.9.7
1.3 package.json を編集してTypeScriptをコンパイルできるように
“scripts”: {
“build”: “tsc”,
“watch”: “tsc –watch”
},
1.4 プロジェクトディレクトリをTypeScriptに初期化する
tsconfig.json が作成される
$ node_modules/.bin/tsc –init message TS6071: Successfully created a tsconfig.json file.
1.5 Node.jpの型定義のインストール
$ npm install –save @types/node
1.6 いったんTypeScriptをコンパイルしてNode.jsのファイルが生成できるようになった
(1) app.ts ファイルを作成し以下を記述
console.log(“test”);
(2) ビルド
TypeScriptをNode.jsにコンパイルする
$ npm run build
app.js が生成される。
(3) 実行
以下で、Node.jsアプリケーションとして実行する
$ node app
2.ブラウザで動かす準備
2.1 Http Serverのインストール
$ npm install -g http-server
2.2 TypeScriptの設定
tsconfig.json
- lib に、DOM を指定。
- WebWorkerの動作確認をしたいのでWebworkerも追加
- tsをコンパイルしてできるjsファイルをpublicに指定する
- ルートは srcディレクトリ
{
“compilerOptions”: {
“target”: “es5”,
“module”: “commonjs”,
“lib”: [“DOM”, “WebWorker”, “ES5”],
“outDir”: “./public”,
“rootDir”: “./src”,
}
}
2.3 package.json で起動コマンドを追加する
- del_script : スクリプトをいったん削除
- build、watch : コンパイルまえに、del_script を指定し、いったんスクリプトを消す
- start：Http Serverを起動する
“scripts”: {
“del_script”: “rm ./public/scripts/.”,
“build”: “npm run del_script && tsc”,
“watch”: “npm run del_script && tsc –watch”,
“start”: “http-server -o”
},
3.構造と実行
3.1構造
- /src/scripts に TypeScriptのファイルを置く
- コンパイルすると /public/scripts にNode.js(JavaScriptファイルが生成される)
- /public 直下にブラウザで起動するための index.htmlを置いとく
3.2 コンパイルと実行
コンパイル
$ npm run build
ブラウザで実行
$ npm run start
ブラウザで、で動作確認用に記述した、WebWorkerのプログラムが動作した！
