（webpack2）TypeScriptとWebpackを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になります。以前に紹介した『TypeScriptを使った超簡単なWEBフロントエンドの開発環境を構築する』と類似するプロジェクトになりますので、そちらの方も合わせてご確認下さい。

記載した実行環境は以下の通りです。Node.jsのインストールについては、『Angular2の開発環境を構築（angular-cli）』を参考にして下さい。

OS : Windows 7 Home Premium
Node.js : V6.9.4
npm : V3.10.10

また、記載したコード等をコピー＆ペーストする場合には円マークに注意して下さい。コード中の円マークは「U+00A5」で表現しています。『円マークとバックスラッシュ』を参考にして下さい。

１．使用するパッケージの説明

（1）webpack

JavaScriptファイルの依存関係を解決するためのモジュール管理を行うビルドツールです。2系を使用します。

（2）ts-loader

TypesScript ファイルを処理できるようにwebpack 用のloaderをインストールします。

（3）TypeScript

TypeScriptのパッケージです。

（4）lite-server

軽量のローカルWEBサーバです。BrowserSyncが内蔵されており、js、html、cssなどのソースファイルの変更を監視し、自動的にブラウザのリロードを行ってくれます。

（5）concurrently

concurrentlyを使用すると、複数のnpm-scriptコマンドを同時に実行することが可能になります。使い方は、concurrentlyの引数に、同時に実行したいコマンドをダブルクオーテーションでくくって列挙するだけです。

２．プロジェクトディレクトリの作成

最初にプロジェクトで使用するディレクトリを作成します。今回は「c:\ng2test\easy05」をプロジェクトディレクトリとして使用します。プロジェクトディレクトリの下にソースを格納するsrcフォルダと結合したJavaScriptを出力するdistフォルダも作成して下さい。

　 
C:¥ng2test>mkdir easy05    ※プロジェクトディレクトリ作成

C:¥ng2test>cd easy05

C:¥ng2test¥easy05>

C:¥ng2test¥easy05>mkdir src   ※ソース格納ディレクトリ作成

C:¥ng2test¥easy05>mkdir dist  ※出力ディレクトリ作成

C:¥ng2test>mkdir easy05 ※プロジェクトディレクトリ作成

C:¥ng2test>cd easy05

C:¥ng2test¥easy05>

C:¥ng2test¥easy05>mkdir src ※ソース格納ディレクトリ作成

C:¥ng2test¥easy05>mkdir dist ※出力ディレクトリ作成

３．package.jsonの作成

パッケージのインストールやnpm-scripts実行のためのeasy05\package.jsonを作成します。[-y]オプションを指定して実行して、デフォルト値で作成します。作成後は必要に応じて、name、version、description等の項目をエディタで編集して下さい。

　
C:¥ng2test¥easy05>npm init -y

C:¥ng2test¥easy05>npm init -y

４．パッケージのインストール

webpack、ts-loader、typescript、lite-server、concurrentlyのパッケージをローカルインストールします。[--save-dev]オプションをつけてパッケージ情報をdevDependenciesにバージョン付きでpackage.jsonに書き込みます（開発時のみに利用するライブラリのバージョンを管理します）。

　　
C:¥ng2test¥easy04>npm install webpack --save-dev
C:¥ng2test¥easy04>npm install ts-loader --save-dev
C:¥ng2test¥easy04>npm install typescript --save-dev
C:¥ng2test¥easy04>npm install lite-server --save-dev
C:¥ng2test¥easy04>npm install concurrently --save-dev

C:¥ng2test¥easy04>npm install webpack --save-dev

C:¥ng2test¥easy04>npm install ts-loader --save-dev

C:¥ng2test¥easy04>npm install typescript --save-dev

C:¥ng2test¥easy04>npm install lite-server --save-dev

C:¥ng2test¥easy04>npm install concurrently --save-dev

ワーニング表示される場合があるかもしれませんが、とりあえずOKとして良いと思います。インストールバージョンは以下のようになります。

  "devDependencies": {
    "concurrently": "^3.4.0",
    "lite-server": "^2.3.0",
    "ts-loader": "^2.0.3",
    "typescript": "^2.3.2",
    "webpack": "^2.5.1"
  }

"devDependencies": {

"concurrently": "^3.4.0",

"lite-server": "^2.3.0",

"ts-loader": "^2.0.3",

"typescript": "^2.3.2",

"webpack": "^2.5.1"

}

５．TypeScriptファイルの作成とコンパイル環境を構築

以下の手順に従い、TypeScriptファイルの作成とコンパイル環境を構築します。

（1）最初にeasy05\src\tsconfig.jsonを作成します。tsconfig.jsonはTypeScriptのコンパイル方法の指定やTypeScriptコード同士の依存関係を解決します。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"moduleResolution": "node",

"sourceMap": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"lib": [ "es2015", "dom" ],

"noImplicitAny": true,

"suppressImplicitAnyIndexErrors": true

}

（2）次にTypeScriptファイルを作成します。今回はジュール管理ツールの機能把握が主目的なので、2つのファイルを作成して結合するようにします。まずは、easy05\src\main.tsを新規作成します。DogクラスをインポートするTypeScriptファイルです。ファイルはUTF-8で作成して下さい。

import Dog from "./dog";

var objDog = new Dog("小梅");
objDog.say();

import Dog from "./dog";

var objDog = new Dog("小梅");

objDog.say();

（3）続いてeasy05\src\dog.tsを新規作成します。Dogクラスを格納するTypeScriptファイルです。ファイルはUTF-8で作成して下さい。

export default class Dog {
    public Name:string;
    constructor(name:string) {
        this.Name = name;
    }
    
    public say():void {
        document.write("Hello " + this.Name + "!");
    }
}

export default class Dog {

public Name:string;

constructor(name:string) {

this.Name = name;

}

public say():void {

document.write("Hello " + this.Name + "!");

}

６．webpackの設定ファイル作成とビルド

（1）以下のように、webpackSの設定ファイル（easy05\webpack.config.js）を作成します。

module.exports = {
  entry: {
      app :'./src/main.ts',
  },
  
  output: {
     path: __dirname + '/dist',
     filename: 'bundle_test.js'
  },
  
  resolve: {
       extensions:['.js', '.ts']
  },
  
  module: {
      loaders: [
          { test: /\.ts$/, loader: 'ts-loader' }
      ]
  },
  
  // chromeの開発者ツールでコンパイル前のソースコードを見れるようにする
  devtool: 'source-map'
};

module.exports = {

entry: {

app :'./src/main.ts',

output: {

path: __dirname + '/dist',

filename: 'bundle_test.js'

resolve: {

extensions:['.js', '.ts']

module: {

loaders: [

{ test: /\.ts$/, loader: 'ts-loader' }

]

// chromeの開発者ツールでコンパイル前のソースコードを見れるようにする

devtool: 'source-map'

};

entryはビルドの起点となるファイルのパスを指定します。複数設定可能ですが、今回は１つです。
outputのpathは出力先のパスをfilenameは出力ファイル名を指定します。出力ファイル名を省略した場合はbundle.jsがデフォルトになります。
resolve.extentionsの指定で、requireやimportを記述する時に拡張子を省略できるようになります。
module.loadersの指定で対象のファイルを変換するためにloaderを指定します。上記ではTypeScriptのLoaderを指定しています。
devtool: 'source-map'でソースマップを出力します。

（2）webpackを実行してTypescriptをコンパイルしてビルドを開始します。easy05\distディレクトリにbundle_test.jsとbundle_test.js.mapが出力されれば成功です。

　
C:¥ng2test¥easy04>node_modules¥.bin¥webpack

C:¥ng2test¥easy04>node_modules¥.bin¥webpack

（3）今度はファイル変更監視＆ビルドの実行を行います。[--watch]オプションは常駐してtsファイルの変更を監視し、tsファイルの変更が発生すると自動でビルド処理を実行します。

　
C:¥ng2test¥easy04>node_modules¥.bin¥webpack --watch

C:¥ng2test¥easy04>node_modules¥.bin¥webpack --watch

マンド実行後にmain.tsファイルを何かしら変更して保存してみて下さい。コマンドプロンプト画面を観察ていると、実行プログラムが常駐しており、tsファイルの変更保存で再ビルドが自動実行される様子を確認する事ができます。生成されたjsファイルの中身を確認してもtsファイルの変更で再コンパイルが実行され、jsファイルが再生成された事が認識できると思います。CTRL+Cキーで常駐を停止します。

７．lite-serverの環境を構築

以下の手順に従い、lite-serveの実行環境を構築します。

（1）アプリケーションルートとなるeasy05\dist\index.htmlを作成します。<script>タグでwebpackで出力されたJavaScriptファイルを指定しています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript" src="bundle_test.js" charset="utf-8"></script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

（2）easy05\bs-config.jsonを新規作成します。lite-serverの[-c]オプションで、bs-config.jsonを指定する事によって、lite-serverの実行時の動作オプションを指定する事が出来ます。

{
  "server": {
    "baseDir": "dist",
    "routes": {
      "/node_modules": "node_modules"
    }
  }
}

{

"server": {

"baseDir": "dist",

"routes": {

"/node_modules": "node_modules"

}

（3）lite-serverをテスト実行します。以下のコマンドの実行で標準ブラウザが起動して、http://localhost:3000にアクセスされます。main.tsのDocクラスのnameプロパティが表示されればOKです。

　
C:¥ng2test¥easy04>node_modules¥.bin¥lite-server -c bs-config.json

C:¥ng2test¥easy04>node_modules¥.bin¥lite-server -c bs-config.json

８．開発で使用するnpm-scriptsを定義する。

package.jsonのscript部にnpm-scriptsを定義します。今までのように「node_modules¥.bin¥・・・」のように長い相対パスをいちいち入力することなく、「npm run コマンド名」のように簡潔なコマンドを記述することが可能になります。コピペする時は『円マークとバックスラッシュ』に中止して下さい。

  "scripts": {
    "test": "echo ¥"Error: no test specified¥" && exit 1",
    "serve": "lite-server -c=bs-config.json",
    "webpack": "webpack",
    "webpack:watch": "webpack --watch",
    "serve": "lite-server -c=bs-config.json",
    "start": "concurrently ¥"npm run webpack:watch¥" ¥"npm run serve¥"  "
  },

"scripts": {

"test": "echo ¥"Error: no test specified¥" && exit 1",

"serve": "lite-server -c=bs-config.json",

"webpack": "webpack",

"webpack:watch": "webpack --watch",

"serve": "lite-server -c=bs-config.json",

"start": "concurrently ¥"npm run webpack:watch¥" ¥"npm run serve¥" "

開発実行時はコマンドプロンプトから「npm run start」を実行することで開発を行う事ができます。srcディレクトリ以下のjs、html、cssなどのソースファイル変更を監視し、自動的にTypeScriptのコンパイルが実行されブラウザのリロードを行ってくれます。

９．ファイル構成

最終的に以下のようなファイル構成になります。

ディレクトリ	ファイル	説明
easy05	package.json	プロジェクト定義ファイル
easy05	bs-config.json	Lite-Serverの動作設定ファイル
easy05	webpack.config.js	webpackの設定ファイル
easy05\dist	index.html
easy05\dist	bundle_test.js	webpackのビルドで出力
easy05\dist	bundle_test.js.map	webpackのビルドで出力
easy05\src	tsconfig.json	TSコンパイル定義ファイル
easy05\src	main.js	JavaScriptファイル
easy05\src	doc.js	JavaScriptファイル
easy02\node_modules		インストールされたパッケージ

以下、参考にさせて頂いたページです。ありがとうございました。