

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

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

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

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

[webpack/raw-loader](https://github.com/webpack/raw-loader "webpack/raw-
loader")


CC BY-SA 3.0
2014-12-16T02:42:32.937
1638
2014-12-19T12:35:08.630
2014-12-19T12:35:08.630
47
2674
question
javascript
webpackでライブラリを非commonjs環境として読み込みたい


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

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

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

index.js

[code]

    require('raphael');
    
    var paper = Raphael(10, 50, 320, 200);
    var circle = paper.circle(50, 40, 10);
    circle.attr("fill", "#f00");
    circle.attr("stroke", "#fff");
    
[/code]

webpack.config.js

[code]

    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();
        }
      ]
    };
    
[/code]


CC BY-SA 3.0
2014-12-17T15:20:06.597
1937
2014-12-17T15:20:06.597
4726
1638
answer