Angular2 WEB WEBフロントエンド開発

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

投稿日:2017年5月19日 更新日:

当セクションでは前回の『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.使用するパッケージの説明

(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の引数に、同時に実行したいコマンドをダブルクオーテーションでくくって列挙するだけです。

 

2.プロジェクトディレクトリの作成

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

 

 

3.package.jsonの作成

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

 

 

4.パッケージのインストール

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

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

 

 

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

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

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

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

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

 

 

6.webpackの設定ファイル作成とビルド

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

  • entryはビルドの起点となるファイルのパスを指定します。複数設定可能ですが、今回は1つです。
  • 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が出力されれば成功です。

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

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

 

 

7.lite-serverの環境を構築

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

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

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

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

 

 

8.開発で使用するnpm-scriptsを定義する。

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

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

 

 

9.ファイル構成

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

ディレクトリ ファイル 説明
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   インストールされたパッケージ

 

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

 

スポンサーリンク

スポンサーリンク

-Angular2, WEB, WEBフロントエンド開発

執筆者:

関連記事

Angular2のプロジェクト作成から開発をしてIISにデプロイまで

当セクションではAngular2のプロジェクト作成し、プロジェクト開発を行い、IISへのデプロイまでを説明したいと思います。 angular-cliでAngular2の開発環境を構築している事が前提と ...

TypeScriptのソールファイル分割

TypeScriptのソールファイル分割の方法についてまとめました       1. <reference>によるグローバルモジュールによる方法 (1)ソース ...

Reactに関するメモ

    1.ReactでComponentのRenderが行われるタイミング ReactでComponentのRenderが行われるのは以下2つのタイミングのみ stateを更新す ...

SystemJSを使ったWEBフロントエンド開発

当セクションはSystemJSを使ったWEBフロントエンド開発について説明します。JavaScriptをロードするための最も基本的な方法はscriptタグで実現することですが、SPAを構築するフロント ...

Apache2のモジュール設定

Apache2のモジュール設定について Apache2はデフォルトでGCIモジュール(CGID)が無効になっている。 Apache2のモジュールの有効化/無効化の設定は、a2enmodコマンド(有効化 ...