2

一部のパッケージが採用しているrequire関数が、標準的なrequire.jsやcommonjsのそれとは非互換のため、webpackで正しく動かないことが‌​あります。

自分が認識しているのは Raphaël.js と getsentry/raven-js です。

この問題を解決するために、コードの方にパッチを当てるよりも、外部からのrequireでファイル的には連結しつつも、普通のscriptタグで読み込んだ時と同じように、requireポリフィルでラップしない非commonjs環境として読み込みたいケースがあります。どなたかこの方法をご存じないでしょうか。

raw-loaderを使ってテキストとして読み込んだJSをevalすればよいのはわかっていますが、さすがに汚すぎる気がしています。

webpack/raw-loader

2
  • 1
    出だしの部分がわかりにくいので、 「一部のパッケージが採用しているrequire関数が、標準的なrequire.jsやcommonjsのそれとは非互換のため、webpackで正しく動かないことがあります。」 と修正しようと考えているのですがいかがでしょう? @mizchi
    – KoRoN
    Commented 2014年12月16日 6:22
  • 修正しときました。まずそうなら教えてください。
    – KoRoN
    Commented 2014年12月16日 8:48

1 件の回答 1

1

汚いのは変わらないかもしれませんが、以下でどうでしょうか?

Raphaelでしか試していないので、もしかするとライブラリごとに調整が必要かもしれません。

同一ディレクトリに以下の3つのファイルがあるとき: index.js, raphael.js, webpack.config.js

index.js

require('raphael');

var paper = Raphael(10, 50, 320, 200);
var circle = paper.circle(50, 40, 10);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");

webpack.config.js

var fs = require('fs');

module.exports = {
  externals: [
    function(context, request, callback) {
      if (/raphael/.test(request)) {
        var src = fs.readFileSync(request + '.js');
        return callback(null, "(function(module){" + src + "}.bind(window)())");
      }
      return callback();
    }
  ]
};

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。