タグ: webpack

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

/ shundroid

こんにちはー。

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

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

brace を使う

 GitHub 
thlorenz/brace
https://github.com/thlorenz/brace
brace - 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 だと、エラーが出てしまい、
テキストエディタ上でのエラー表示機能などが使えませんでした。

webpack-brace-error

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 です。

 Mozilla Developer Network 
Blob
https://developer.mozilla.org/ja/docs/Web/API/Blob
Blob オブジェクトはファイルに似たオブジェクトで、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で使えるようにします。

 webpack.github.io 
https://webpack.github.io/docs/configuration.html#resolve-modulesdirectories
https://webpack.github.io/docs/configuration.html#resolve-modulesdirectories

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

3. 実行してみる

success-webpack-brace

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

Webpackで、CSS、Lessをロードする

/ shundroid

こんにちはー！

Webpack、知っていますか。
require() などでできた、ファイルの依存関係を、簡単にしてくれます！
Browserify に似ていますが、Webpack はスタイルシート、JSON、画像なども一緒にできます！

CSSを読む

というわけで、スタイルシートをロードしましょう！
うまくいかない場合は、このリポジトリを見てください。

 GitHub 
shundroid/webpack-stylesheet-example
https://github.com/shundroid/webpack-stylesheet-example
Contribute to webpack-stylesheet-example development by creating an account on GitHub.

まず、フォルダー内で、次のコマンドを打ってください。

npm i --save-dev webpack

次に、css を読む、loaderを追加します。
その時、css-loader のほかに、style-loader を入れます！ここでハマった・・

npm i --save-dev style-loader css-loader

ファイルの構成は、次のようになります。

  • main.js
  • style.css
  • webpack.config.js
  • index.html

main.jsは、次のように書いてください。

require("./style.css"); // cssを読み込む

// alertとかをしておくと、読み込まれているかがわかりやすい
// alert("hello");

style.css

body {
  background-color: skyblue;
}

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style!css' }
    ]
  }
};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="bundle.js"></script>
</head>
<body>
</body>
</html>

この状態で、Webpackを実行!

$ webpack
Hash: XXX
Version: webpack 2.0.6-beta
Time: 1009ms
    Asset   Size  Chunks             Chunk Names
bundle.js  12 kB       0  [emitted]  main
    + 6 hidden modules

bundle.jsが生成されます。

index.htmlを開くと、水色のページが表示されます。

Lessを読む

less-loaderを使用します。less もいります。

npm i --save-dev less-loader less

先ほどの style.css を、style.less に変更してください。

style.less

@color: orange;
body {
  background-color: @color;
}

Lessが動いているか確かめるので、変数を使いました。

main.jsを編集します。

// require("./style.css"); となっていたところを
require("./style.less"); // にする。

webpack.config.js も編集します。

// { test: /\.css$/, loader: 'style!css' } となっていたところを、
{ test: /\.less$/, loader: 'style!css!less' } // にする。

webpack を実行!

webpack

index.html を開くと、ページがオレンジ色になります。

まとめ

  • css-loader、less-loader を使うと、スタイルをスクリプトに変換して、js、typescipt などと合体できる！
  • css-loader を入れるときは、style-loader も入れる。
  • less-loader を入れるときは、style-loader、less も入れる。