最近勉強中の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です。
