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

スポンサーリンク

はじめに

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

注意事項

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

環境

OS Windows7 Professional 64ビット
その他 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」と入力した場合は以下のようなファイルが作成されます。

{
  "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用の設定ファイルを作成し中身を以下のように書きます。

{
    "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ファイルとして以下のように書きます。

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/
            }
        ]
    }
};

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

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

npm-scriptsの設定

コンパイルするためにpackage.jsonのscriptsにビルド用のコマンドを追加します。

  {
    "name": "a",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "ts-loader": "^2.0.0",
      "typescript": "^2.1.5",
      "typings": "^2.1.0",
      "webpack": "^1.14.0"
    }
  }

コンパイル

実際にファイルをコンパイルします。srcフォルダ内に空のapp.tsファイルを作成し以下のコマンドを実行します。

>: npm run build

コンパイルが成功しpublicフォルダ内にbundle.jsとbundle.js.mapファイルが作成されます。

  root
    ┣ mode_modules
    ┃   ┣ ts-loader
    ┃   ┣ typescript
    ┃   ┣ typings
    ┃   ┗ webpack
    ┣ public
+   ┃   ┣ bundle.js
+   ┃   ┗ bundle.js.map
    ┣ src
+   ┃   ┗ app.ts
    ┣ package.json
    ┣ tsconfig.json
    ┗ webpack.config.js

まとめ

今回はwebpackを使用してTypeScriptをコンパイルするだけでしたが簡単に環境が作成できました。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする