やること
TypeScript, Gulp, WebPack, jQueryを組み合わせて、簡単なWebアプリケーションを作ってみます。
TypeScriptは型が書けたりクラスが書けたりする、AltJS（コンパイルしてjsにして使用する物）です。
TypeScriptはコンパイルしてjsにすることで、ブラウザで使用できるようになります。
今回使う他のツールです。
- Gulp: タスクランナーです。Gruntよりも最近は人気があります。
- Webpack: 各種jsファイルの依存関係を解決し、1つに結合するモジュールバンドラーです。Browserifyなどもこの仲間になります。
- jQuery: 説明不要かと思いますが、楽にDOM操作が出来るライブラリです。
開発環境
- Mac OS X High Sierra
- Gulp 3.9.1
- TypeScript 2.9.1
- Webpack 4.10.2
- jQuery 3.3.1
Node.jsをインストール
必要なモジュールはnpm(Node Package manager)でインストールが出来ます。
まずはNode.jsをインストールします。
brew install node
これでnpmが使えるようになります。
プロジェクトの作成
まずは任意のディレクトリを作成し、その中で以下コマンドを実行してプロジェクトを作成します。
-yオプションをつけないと、各種項目について都度聞かれます。
-yを付けずにそのままEnterを連打してもかまいません。
$ npm init -y
実行するとpackage.jsonが出来上がります。
後述しますが、このファイルに記載されたライブラリ全てをnpm installで
インストールできるようになりますので、他の人に配布した際に環境構築が簡単にできます。
ディレクトリ構成
今回は以下のようなディレクトリ構成を実現します。
TypeScriptファイルはtsディレクトリに置き、コンパイルしたjsはdistに置きます。
dist
└── main.js
node_modules
└── typescriptなど
ts
├── index.ts
└── model.ts
gulpfile.js
index.html
package.json
tsconfig.json
webpack.config.js
各種モジュールのインストール
npmで必要な各種モジュールのインストールをします。
まず、開発時に必要なモジュールをインストールします。
$ npm install --save-dev typescript webpack webpack-cli webpack-stream ts-loader gulp gulp-stream del jquery @types/jquery
npm WARN deprecated gulp-util@3.0.8: という文言などが表示されますが、無視して構いません。
これでnode_modulesディレクトリが出来ます。
各モジュールの説明です。
- typescript: TypeScriptです。
- gulp: Gulpです。
- webpack: Webpackです。
- webpack-stream: Gulpにおいて、Webpackを使用するためのものです。
- ts-loader: Webpackにおいて、TypeScriptを使用するためのものです。
- del: ファイルの削除を行うためのものです。
- jquery: jQueryです。
--save-devを付けるとpackage.jsonのdevDependenciesに記載されます。
npm installを実行すると、devDependenciesに書かれたライブラリがnode_modulesにインストールされます。
そのためgit管理からはnode_modulesディレクトリは外して問題ありません。
--saveを付けるとdependenciesに記載されます。
なお、インストールされたモジュールはnpm lsで確認が可能です。
ただ、依存モジュールも全て表示されてしまいますので、
npm ls --depth=0と実行すると依存モジュールが除外され見やすいと思います。
不要なモジュールはnpm remove モジュール名でアンインストールが出来ます。
tsconfig.jsonの作成
以下のコマンドで、TypeScriptのコンパイル情報を記載する、tsconfig.jsonを作成します。
$ npx tsc --init
tsファイルの作成
tsディレクトリを作り、その中にtsファイルを作っていきます。
model.ts, index.ts の2つのファイルを作っていきます。
model.ts
Modelというネームスペースを使用し、Personクラスをexportしてネームスペースの外から参照できるようにします。
'use strict';
namespace Model {
export class Person {
constructor(private name:string = 'dummy') {
}
public getName():string {
return this.name
}
}
}
export default Model;
index.ts
このファイルにメインの挙動を記載します。
model.tsとjQueryをインポートして使用します。
'use strict';
import Model from './model';
// tsconfig.json の esModuleInterop がtrueであれば以下の記述も可能
// import * as $ from 'jquery';
import $ = require('jquery');
let user = new Model.Person("Mike");
$(() => {
$("#name").html(user.getName());
});
webpack.config.jsの作成
プロジェクトルートに、Webpackの設定ファイルであるwebpack.config.jsを作成します。
'use strict';
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: {
app :'./ts/index.ts'
},
output: {
path: `${__dirname}/dist`,
filename: 'main.js'
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: {
loader: 'ts-loader'
}
}
]
},
resolve: { extensions: ['.ts'] }
};
gulpfile.jsの作成
プロジェクトルートに、Gulpの実行ファイルである、gulpfile.jsを作ります。
'use strict';
const gulp = require('gulp');
const webpackStream = require('webpack-stream');
const webpackConfig = require('./webpack.config.js');
const webpack = require('webpack');
const del = require('del');
const TS_SRC = './ts/**/*.ts';
const JS_DEST = './dist/*';
gulp.task('clean', function() {
del([JS_DEST]);
});
gulp.task('webpack', function() {
return webpackStream(webpackConfig, webpack)
.pipe(gulp.dest("dist"));
});
gulp.task('watch', function () {
gulp.watch(TS_SRC, ['webpack']);
});
gulp.task('default', ['webpack']);
gulpは実行時に引数を与えることが可能で、上記task関数の第一引数に相当します。
gulp webpackと実行した場合は、上記のtask('webpack'～が実行されます。
gulpと実行した場合は、defaultと見なされます。
今回は以下のようなタスクを定義しました。
- clean: delを使って、jsファイルを削除します。引数は配列形式で複数のディレクトリの指定が可能です。
- webpack: tsファイルをコンパイルし、distに設置するバッチ処理が起動します。終了されるときはCtrl+Cを押してからYです。
- watch: tsファイルを監視し、変更されたら、時自動的にwebpackコマンドを実行します。
- default: webpackを実行します。
index.htmlの作成
プロジェクトルートに、ブラウザでアクセスするファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TypeScriptのテスト</title>
<script src="dist/main.js"></script>
</head>
<body>
<div id="name"></div>
</body>
</html>
動作確認
Webpackの動作確認
$ npx webpack
dist/main.js が作成されれば成功です。
Gulpの動作確認
$ npx gulp clean
dist/main.js が削除されれば成功です。
$npx gulp
dist/main.js が作成されれば成功です。
ブラウザで動作確認
index.htmlを開き、 Mike と表示されれば成功です。