こんにちはー。
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;
1行です。ブラウザで実装されている 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. 実行してみる
エラーが出ませんでした。
また、テキストエディタ上で、エラーの表示もできるようになりました。