TypeScript と webpack( +yarn)でWebアプリ開発環境を構築していきます。
webpackとは？yarnとは？という方は以下の記事をご参照ください。
yarnプロジェクトの作成からTypeScript + webpackの開発環境構築まで記載します。 ソースはコピペできますので、まずは簡単に環境構築してTypeScript + webpackへの理解を深めていきましょ。
TypeScriptのローカル環境構築
最終的なフォルダ構成
最終的なフォルダ構成は以下のようになります。
├── dist // index.htmlを格納
├── node_modules // yarnでインストールしたモジュールが入る
├── package.json // パッケージを管理
├── src // 作成するtsファイルを入れるディレクトリ
├── tsconfig.json // TSファイルをJSファイルにコンパイルするための設定ファイル
├── webpack.config.js // webpackの設定ファイル
└── yarn.lock // インストールしたパッケージ情報が書かれたファイル
yarn init
まず、yarn initで初期化処理を行い、package.jsonを生成します。
// 実行するコマンド
yarn init上記コマンドを実行すると、ターミナル上で色々聞かれますが、全てエンターキーを押せばOKです。
webpackとtypescriptのインストール
以下のコマンドでwebpackとtypescriptをインストールします
// 実行するコマンド
yarn add webpack webpack-cli webpack-dev-server typescript ts-loader -Dwebpack設定
webpackの設定ファイル「webpack.config.js」を作成します。
「webpack.config.js」に記載する内容は以下の通りです。
const path = require('path');
const outputPath = path.resolve(__dirname, "public");
module.exports = {
mode: 'development',
entry: './src/index.ts',
output: {
filename: 'bundle.js',
path: `${outputPath}`
},
devServer: {
static: "dist",
open: true
},
module: {
rules: [{
test: /\.ts/,
use: 'ts-loader',
exclude: /node_modules/,
}, ],
},
resolve: {
extensions: ['.ts', '.js'],
}
};
tsconfig.jsonの作成
tsconfig.jsonファイルを作成します。
tsconfig.jsonファイルは、TSファイルをJSファイルにコンパイルするための設定ファイルです。
「tsconfig.json」に記載する内容は以下の通りです。
{
"compilerOptions": {
"sourceMap": true,
"target": "ES5",
"module": "ES2015",
"strict": true,
"moduleResolution": "node"
}
}HTMLファイルの作成
まず、HTML格納用のディレクトリを作成します。
// 実行するコマンド
mkdir dist次にdist直下にindex.htmlというファイルを作成します。
index.htmlに記載する内容は以下の通りです。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>hello world</title>
</head>
<body>
<div style="width:50%;">
<div id="sample"></div>
</div>
<script src='bundle.js'></script>
</body>
</html>TypeScriptファイルの作成
「hello world」とブラウザに出力するTypeScriptファイルを作成します。
まず、TypeScript格納用のディレクトリを作成します。
// 実行するコマンド
mkdir src次にsrc直下にindex.tsというファイルを作成します。
index.tsに記載する内容は以下の通りです。
window.onload = function()
{
var elem = document.getElementById('sample')!;
elem.innerHTML = 'hello world';
}動作確認
以下のコマンドでローカルサーバを起動します。
// 実行するコマンド
yarn run webpack-dev-serverブラウザ上で、「hello world」と表示されればOKです。
まとめ
簡単にTypeScript と webpack( + yarn)でWebアプリ開発環境を構築できたと思います。
環境はできたので、あとはTypeScriptの理解を深めていきてたいところです。
TypeScriptの関連記事です。
