【初心者向け】Gulp + Webpack + TypeScriptの設定

8383 ワード
gulp jQuery TypeScript JavaScript webpack JavaScript テキストリンク

環境

・Mac ターミナル(WindowsでもCygwinなどでOK）
・SublimeText（こちらもjsonファイルを編集できるソフトがあればOK）

目次

  1. Node.jsのインストール
  2. package.jsonの作成
  3. 各種モジュールのインストール
  4. tsconfig.jsonの作成
  5. TSファイルの作成
  6. webpack.config.jsの編集
  7. gulpfile.jsを作成
  8. gulpの実行

基本はTypeScript+Gulp+WebPack+jQueryで開発環境を構築なので、まずは一読されることをオススメします。

更新履歴

2018.03.04：
・グローバルインストールから「typings」を削除しました。
・「jQueryの型定義ファイルのインストール」の項目も併せて削除しました。
（TypeScript 2.0から「typings」の使用は非推奨のようです。）

2018.05.01：
・「tsconfig.json」ファイルの「files」箇所を修正しました。
・「config.ts」ファイルの「ENV」箇所を修正しました。

2018.07.14：
・各種モジュールのインストール箇所 ローカルインストールにjqueryを追加しました。

1.Node.jsをインストール

Node.jsの公式サイトよりダウンロード、インストールを行ってください。
Node.js

インストール後は、ターミナル(or Cygwin)でバージョンの確認を行っておきましょう。

ターミナル
node -v
ターミナル
npm -v

2. package.jsonの作成

package.jsonファイルは必要なパッケージをインストールするために必要なファイルです。
適用するフォルダに作成してください。

ターミナルで直接フォルダ（プロジェクトルート）を開く方法が便利です。
参考：Finderから直接その場所のターミナルを開く方法

ターミナル
npm init -y

プロジェクトルートに「package.json」ファイルが出来上がっているはずです。

実行するとpackage.jsonが出来上がります。
後述しますが、このファイルに記載されたライブラリ全てをnpm installで
インストールできるようになりますので、他の人に配布時に環境構築が簡単にできます。

3. 各種モジュールのインストール

npmで必要な各種モジュールのインストールをします。

モジュールのインストールには「グローバルインストール」と「ローカルインストール」があります。
Gulpを使う場合、グローバル・ローカル両方のインストールが必要になります。

まず、「グローバルインストール」。
-gが「グローバルインストール」のオプションです。

ターミナル
npm i -g typescript gulp webpack-stream

次に「ローカルインストール」。
-Dが「ローカルインストール」のオプションです。

ターミナル
npm i -D typescript gulp webpack webpack-stream ts-loader jquery @types/jquery del

補足：@types/jqueryはjQueryの型定義ファイルです。
詳しい説明は「TypeScript2.0時代の、型定義ファイル」をお読みください。

念のため、インストール後にモジュールの確認をしておくといいです。

ターミナル
npm ls --depth=0

４.tsconfig.jsonの作成

ターミナル
tsc --init

先人に習い、TypeScriptのコンパイル情報を記載する、「tsconfig.json」を以下のように書き換えます。

tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false
    },
    "files": [
        "ts/app.ts",
        "ts/model.ts",
        "ts/config.ts",
    ]
}

「tsconfig」の詳細は公式サイトをご覧ください。
TypeScript公式サイト

5. TSファイルの作成

tsディレクトリを作り、config.ts, model.ts, app.tsの3つのファイルを作っていきます。

config.ts

config.ts
'use strict';
namespace Config {
    export const ENV:string = "dev";

}
export default Config;

model.ts

model.ts
'use strict';
import Config from './config';

namespace Model {
    export class Person {
        constructor(private name:string = 'dummy') {
        }

        public getName():string {
            if (Config.ENV != 'production') {
                return this.name
            } else {
                return this.name + 'さん';
            }
        }
    }
}
export default Model;

app.ts

app.ts
'use strict';
import Model from './model';
import $ = require("jquery");
var user = new Model.Person("Mike");
$(() => {
    $("#name").html(user.getName());

});

6. webpack.config.jsの編集

プロジェクトルートに、webpackの設定ファイルであるwebpack.config.jsを作成します。

webpack.config.js
'use strict';
var path = require('path');
var webpack = require('webpack');
var env = process.env.NODE_ENV;
let config = {
    entry: {
        app :'./ts/app.ts'
    },
    output: {
        filename: '[name].js'
    },
    resolve: {
        extensions:['.ts', '.webpack.js', '.web.js', '.js']
    },
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts-loader' }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV' : JSON.stringify(env)
        }),
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
};

if (env === 'production') {
    config.output.filename = '[name].min.js';
    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }));
} else {
    config.devtool = 'source-map';
}

module.exports = config;

7. gulpfile.jsを作成

プロジェクトルートに、Gulpの実行ファイルであるgulpfile.jsを作ります。

gulpfile.js
var gulp = require('gulp');

// webpack
var webpack = require('webpack');
var webpackStream = require('webpack-stream');
var webpackConfig = require('./webpack.config.js');
var del = require('del');

var TS_SRC = './ts/**/*.ts';
var JS_DEST = './dist/js/';

gulp.task('clean', function() {
    del([JS_DEST]);
});

gulp.task('webpack', function () {
    return gulp.src([TS_SRC])
        .pipe(webpackStream(webpackConfig, webpack))
        // エラーが発生した時に終了させない
        .on('error', function(error) {
                this.emit('end');
        })
});

gulp.task('watch', function () {
    gulp.watch(TS_SRC, ['webpack']);
});

gulp.task('default', ['webpack', 'watch']);

8. gulpの実行

プロジェクトルートで以下コマンドを実行してください。

ターミナル
gulp

「8. gulpfile.jsを作成」で設定したdist/js/フォルダにapp.jsファイルが出来上がります。
あとは、htmlでapp.jsファイルを読み込めば使えるはずです。

C++11こまごました知識のセクション
客観的事物から類を抽象化する例