たまに、TypeScriptでブラウザアプリを作成するときに、HelloWorldするまでの準備に手間取る(というか手順を忘れる)ので備忘録のために書いとく。私は、IntellJ派ですが、TypeScriptの時だけはVSCodeを使うので今回もそれに習った手順でHelloWordがブラウザに出力されるまで。あくまでも我流です。
目次
シェルプロジェクトフォルダ等、初期設定
mkdir ts-sample #プロジェクトフォルダの作成
cd ts-sample
mkdir src
mkdir dist
npm init #ひたすらリターン. 最後にyes
npm install --save-dev webpack webpack-cli ts-loader html-webpack-plugin webpack-dev-server
tsc --init # npm install typescript されている前提
VSCodeで残りの設定
上のシェルでの作業が終わったら $ code . にてVSCodeを作成 (codeで起動できない場合は単にVSCodeを立ち上げてプロジェクトフォルダを開けばOK
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack", # <---追加
"build:serve": "webpack serve" # <---追加
},
{
"compilerOptions": {
...
"sourceMap": true,
...
"outDir": "./dist",
...
},
"include": ["./src/**/*.ts"]
}
compilerOptions の中の sourceMap, outDir をコメントアウトして編集, include を追加.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/Main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader",
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/
}
]
},
resolve: {
modules: [
"node_modules",
],
extensions: [
'.ts',
'.js'
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
index: "index.html",
port: 9223,
historyApiFallback: true,
}
};
プロジェクト直下に webpack.confg.js を作成してこのままコピペ
src/index.htmlを配置します。サンプルなのでシンプルなものでOK. コンパイルして出力されるbundls.jsは HtmlWebpackPlugin の方で自動でheaderタグの末尾に defer付きで読み込むコードを自動挿入してくれるので書く必要はありません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TypeScript Sample</title>
</head>
<body>
<div id="hello"></div>
</body>
</html>
src/Main.tsを配置します。 せっかくなのでモジュールもサンプルとして用意します
import Hello from "./Hello"
window.onload = (e: any) => {
console.log("Hello TypeScript World")
const hello = new Hello("hiyuzawa")
document.getElementById("hello")!.innerHTML = hello.get_hello()
}
export default class Hello {
name: string
constructor(name: string) {
this.name = name
}
get_hello(): string {
return "hello " + this.name + " from Hello Module"
}
}
実行 (ブラウザで動作確認)
VScodeで Command + Shift + B で表示されるビルドタスク選択から npm: build serve を選択します。リターンをおしたあと「タスクの出力をスキャンせ実行」のまま再度リターンを押します

実行後、VSCodeの画面下部ターミナルに色々出力される。エラーならここに赤字で文字が出てくるので何かおかしいので調査するが問題ないと以下のようになるはず。

出力前半に書かれているURL ( http://localhost:9223 ) にアクセス(マウスオーバでリンクポインタがでるので便利)すると無事に動作確認できました。

ビルド
この段階でビルドする必要はないが、一応。 Control + Shift + B で npm: build を選択するとビルドを行う。ビルドが完了するとdistフォルダ内に、 bundle.js と index.html が出力される。