Webpack で Ace（Brace）を使うとエラーが出る

こんにちはー。

Ace、便利ですよねー！
js で作られたテキストエディタで、
Webアプリで「ちょっとコード打つとこ作りたい」とかいうときに使えます。

さて、今回はこれを、Webpack から使って、まとめられるようにしたいと思います。

brace を使う

普通の ace を、Browserify で使えるようにしたそうです。

インストール

$ npm install --save brace

bower からインストールしたくて、探しましたがなかったです。

webpack.config.js

node_modulesをbundleできるようにします。

module.exports = {
// ...
  resolve: {
    modulesDirectories: ["node_modules"]
  },
  plugins: [new webpack.ResolverPlugin(
    new webpack.ResolverPlugin
      .DirectoryDescriptionFilePlugin("package.json", ["main"])
  )]
};

しかしエラー

これで、Browserify ならうまくいくらしいのですが、
Webpack だと、エラーが出てしまい、
テキストエディタ上でのエラー表示機能などが使えませんでした。

Could not load worker TypeError: Argument 1 is not valid for any of the 2-argument overloads of URL.createObjectURL.
スタックトレース:
WorkerClient@file:///.../bundle.js:16481:21
this.createWorker@file:///.../bundle.js:21703:23
this.$startWorker@file:///.../bundle.js:8833:29
this.$onChangeMode@file:///.../bundle.js:8789:14
this.setMode/<@file:///.../bundle.js:8770:18
exports.loadModule@file:///.../bundle.js:3766:27
this.setMode@file:///.../bundle.js:8759:10
@file:///.../bundle.js:53:2
__webpack_require__@file:///.../bundle.js:20:12
@file:///.../bundle.js:40:18
@file:///.../bundle.js:1:11

どうやら、w3c-blob という module でエラーが起きています。
これは、Blob が使えないブラウザ用に、Blob を実装している module です。

しかし、サポート状況を見てみると、IEでも10以上、結構多くのブラウザがサポートしています。

ということで、この w3c-blob という module を、
webpack の alias 機能を利用して、
ブラウザの Blob を使うようにしていきます。

1. webpack.config.js があるフォルダに、「alias」フォルダを作成

webpack.config.js があるフォルダに、「alias」フォルダを作成し、
このフォルダの中に、blob.js というファイルを作成します。

blob.js

module.exports = Blob;

１行です。ブラウザで実装されている Blob を使うようにします。

2. webpack.config.js にaliasを登録

4行目-7行目を変更してください。

webpack.config.js

module.exports = {
// ...
  resolve: {
    modulesDirectories: ["node_modules", "alias"],
    alias: {
      "w3c-blob": "blob.js"
    }
  },
  plugins: [new webpack.ResolverPlugin(
    new webpack.ResolverPlugin
      .DirectoryDescriptionFilePlugin("package.json", ["main"])
  )]
};

4行目では、alias フォルダをaliasで使えるようにします。

6行目では、w3c-blob の aliasとして、blob.js（aliasフォルダ内）を登録し、上書きします。

3. 実行してみる

エラーが出ませんでした。
また、テキストエディタ上で、エラーの表示もできるようになりました。