webpack + TypeScript の環境を作成する (Windows)

はじめに

webpack を使用して、TypeScript をコンパイル(トランスパイル)する環境を作成します。

注意事項

コマンドプロンプトから npm を実行するために、node.js がインストールされている必要があります。

環境

OS : Windows 7 Pro 64bit
その他 : npm 2.14.20, webpack 1.14.0, typescript 2.1.5

webpack とは

webpack はモジュールバンドラのひとつで、依存関係のあるモジュールから静的なファイル(アセット)を作成します。
今回は TypeScript をコンパイルするために webpack を使用します。

TypeScriptとは

TypeScript は、Japascript に静的型付けを追加したスーパーセットのひとつで、コンパイルすることで素の Javascript ファイルが作成されます。

環境の作成

npm をアップデート

npm を利用してツールをインストールするために、npm をアップデートしておきます。

> npm update -g

package.json を作成する

作業フォルダに移動し、以下のコマンドを入力すると、対話形式での入力で packege.json ファイルが作成されます。とりあえず、最初は name と description 以外は何も入力せず Enter でも OK です。

> npm init

name: (www)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

name に test、description に test project と入力した場合は、以下のようなファイルが作成されます。

package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "test project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

作業フォルダ内は以下のようになります。

root
  ┗ package.json

webpack をインストールする

webpack を、package.json の devDependencies に追加するために、--save-dev オプションを付けてインストールします。

> npm install --save-dev webpack

作業フォルダにモジュールがインストールされます。

  root
+   ┣ mode_modules
+   ┃   ┗ webpack
    ┗ package.json

TypeScript をインストールする

TypeScript と ts-loader をインストールします。

> npm install --save-dev typescript ts-loader

モジュールがインストールされます。

  root
    ┣ mode_modules
+   ┃   ┣ ts-loader
+   ┃   ┣ typescript
    ┃   ┗ webpack
    ┗ package.json

typings をインストールする

TypeScript の型定義ファイルを管理するツールである typings をインストールしておきます。

> npm install --save-dev typings

  root
    ┣ mode_modules
    ┃   ┣ ts-loader
    ┃   ┣ typescript
+   ┃   ┣ typings
    ┃   ┗ webpack
    ┗ package.json

tsconfig.json ファイルを作成する

ルート直下に、typescript 用の設定ファイルを作成し、中身を以下のように書きます。

tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "outDir": "public",
        "rootDir": ".",
        "sourceMap": false
    },
    "exclude": [
        "node_modules"
    ]
}

フォルダ構成は以下のようになります。

  root
    ┣ mode_modules
    ┃   ┣ ts-loader
    ┃   ┣ typescript
    ┃   ┣ typings
    ┃   ┗ webpack
    ┣ package.json
+   ┗ tsconfig.json

webpack.config.js を作成する

webpack 用の設定ファイルを作成します。今回は入力を src フォルダ内の app.ts ファイル、出力を public フォルダ内の bundle.js ファイルとして、以下のように書きます。

webpack.config.js
const path = require('path');

module.exports = {
    entry: [
        './src/app.ts'
    ],
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    resolve: {
        extensions: ["", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    }
};