Wijmoクイックスタート − webpackでモジュールをバンドルする

JavaScriptアプリケーションにおいて、モジュールは非常に重要な要素です。一連の機能をモジュールとして分離することで、保守性の向上、名前空間や変数名の競合防止、機能の再利用、依存関係の管理などのメリットがあります。

また、webpackはモジュールバンドラと呼ばれるツール／ライブラリで、複数のモジュールを1つのファイルにバンドル（結合）して、リクエスト数を減らすことによりWebアプリの読み込み速度を向上させることができます。

webpack.js.org

ここでは、webpackを使用してWijmoモジュールをバンドルする方法を紹介します。

プロジェクトの作成

コマンドプロンプト／ターミナルでプロジェクトのフォルダを作成して、フォルダに移動します。

mkdir sample
cd sample

npm initコマンドを実行して、package.jsonファイルを作成します。

npm init

webpackのインストールと設定

webpackをインストールします。また、Wijmoではモジュールの他にcss／jsファイルをバンドルする必要があるため、他に3つのローダーパッケージもインストールします。

npm install --save-dev webpack style-loader css-loader script-loader

webpackの設定ファイル（webpack.config.js）を作成して、下記のコードを追加します。

module.exports = {
entry: "./app.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
module: {
rules: [
{
test: /wijmo\.culture/,
use: [ 'script-loader' ]
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
}
};

package.jsonファイルに、webpackのバンドル処理を実行するための設定を追加します。

"scripts": {
"build": "webpack && cp index.html dist/index.html"
},

Wijmoのインストール

Wijmoパッケージをプロジェクトにインストールします。Wijmo製品版を使用する場合は、製品版のNpmImagesフォルダを参照します。

# 製品版の場合
npm install --save xxx/NpmImages/wijmo-amd-min/
# トライアル版の場合
npm install --save http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20172.359.tgz

CDNまたはWijmo製品版から下記の2つのファイルを取得して、プロジェクトに追加します。

アプリケーション処理の実装

index.htmlファイルを作成して、Wijmoコントロールを表示するためのdiv要素と、webpackバンドルファイルの参照を追加します。

<body>
<div id="inputDate"></div>
<script src="bundle.js"></script>
</body>

app.jsファイルを作成して、下記のコードを追加します。

import './wijmo/wijmo.min.css';
import './wijmo/wijmo.culture.ja.min.js';
import * as wijmoInput from 'wijmo/wijmo.input';
var inputDate = new wijmoInput.InputDate('#inputDate');

バンドルと実行

下記のコマンドを実行してwebpackのバンドル処理を実行すると、distフォルダにファイルが生成されます。

npm run build

dist/index.htmlファイルを開くと、Wijmoコントロールを表示できることと、index.htmlとbundle.jsの2つのファイルだけ読み込まれていることが確認できます。

f:id:ComponentOne_JP:20170928115104p:plain

まとめ

webpackでバンドルしたファイルは、webpackを使用せず個別にモジュールファイルを読み込む場合と比べて、読み込む合計データサイズはほぼ同じです。しかし、この例では読み込むファイル数は5から2に減少するため、リクエスト数の削減により読み込み速度を向上させることができます。

webpackはAngularやReactなどのライブラリで広く利用されており、Webフロントエンド開発において必須のツールになりつつあります。Wijmoモジュールのバンドル処理は非常に簡単に行うことができますので、ぜひwebpackと一緒にWijmoをご利用ください。

さいごに

製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼この記事をシェアする／