こんにちはー。
Ace、便利ですよねー！
js で作られたテキストエディタで、
Webアプリで「ちょっとコード打つとこ作りたい」とかいうときに使えます。
さて、今回はこれを、Webpack から使って、まとめられるようにしたいと思います。
brace を使う
thlorenz/bracebrace - browserify compatible version of the ace editor.
普通の 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 です。
BlobBlob オブジェクトはファイルに似たオブジェクトで、immutable な生データです。データを表す blob は必ずしも JavaScript ネイティブなフォーマットではありません。 F...
しかし、サポート状況を見てみると、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. 実行してみる
エラーが出ませんでした。
また、テキストエディタ上で、エラーの表示もできるようになりました。
