Webpackを使ってes6-Promiseを読み込む

Posted by Tatsuyano on Wed, Jun 3, 2015
In
Tags nodejs es6 webpack js

最近勉強中のPromiseですが、現段階(15/06/03)ではIE11に対応していません。 PromiseをIEに対応させるためには、es6-promiseというNode.jsのライブラリをフロントエンドで読み込む必要があります。

しかしNode.jsのライブラリは、そのままではフロントエンドで使えないので、 webpackでフロントエンド向けにBuildする必要があります。

-webpackは他にも多くの機能がありますが、ここではNode.jsのモジュールをフロントエンドで使うため方法のみにフォーカスします。-

webpackを使うための準備

まずは本体のインストール。

$ npm install webpack -g

次に適当なディレクトリを作成します。

$ mkdir webpack-sample && cd webpack-sample

今回使うライブラリ(es6-promise)をディレクトリにインストールします。

$ npm install es6-promise

ライブラリはglobalではなく、ディレクトリ直下(/webpack-sample/node_modules)にインストールしてください。

JsのBuild方法

次に(Node.jsの)ライブラリを読み込むJs(main.js)をビルドします。

$ webpack main.js bundle.js
Hash: de7b4a8a87c6e52d026f
Version: webpack 1.9.10
Time: 109ms
    Asset     Size  Chunks             Chunk Names
bundle.js  40.1 kB       0  [emitted]  main
   [0] ./main.js 255 bytes {0} [built]
   + 6 hidden modules

BuildしたJs(bundle.js)は、main.jsが依存しているライブラリ(es6-promise等)も含んだ一つのファイルに圧縮されます。 このJsのみをHTMLに読み込むだけで、Node.jsが利用できるようになります。
<script src="bundle.js"></script>

main.js
'use strict'
var Promise = require('es6-promise').Promise;

var promise = function(code) {
    return new Promise(function (resolve,reject) {
        resolve('Hello Promise !!');
    });
}

promise().then(function (result) {
    console.log(result);
});

### 確認 今回は、node.jsのhttp-serverを使って確認しようと思います。 * [Node.jsのhttp-serverっていうコマンドラインのウェブサーバーが便利](https://firegoby.jp/archives/5706)
$ npm install -g http-server
$ http-server -p 4000

サーバー起動し、IEのconsoleにメッセージが表示されれば、確認OKです。

参考サイト

関連する記事