のWebPACKを使用して、特定の依存関係をインポートするとき、私は取得「エラー： 『』モジュールを見つけることができません」

Question

最小限バベル+ WebPACKのセットアップを使用して、ちょうど1外部依存（ansi_up）を含みます。

コンパイルすると、私は警告を取得：

$ webpack 
Hash: f9bff237cfd206599eed 
Version: webpack 3.0.0 
Time: 119ms 
    Asset  Size Chunks    Chunk Names 
bundle.js 17.6 kB  0 [emitted] main 
    [0] ./main.js 80 bytes {0} [built] 
    [2] ./node_modules/ansi_up 160 bytes {0} [built] 
    + 1 hidden module 

WARNING in ./node_modules/ansi_up/ansi_up.js 
9:20-27 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted 

をそして実行するとき、私はこのエラーを取得する：

$ node bundle.js 
/Users/chris/src/webpack-ansi-up/bundle.js:93 
     v = factory(!(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()), exports); 
                                    ^

Error: Cannot find module "." 
    at webpackMissingModule (/Users/chris/src/webpack-ansi-up/bundle.js:93:65) 
    at subst (/Users/chris/src/webpack-ansi-up/bundle.js:93:143) 
    at Object.webpackEmptyContext.keys (/Users/chris/src/webpack-ansi-up/bundle.js:107:3) 
    at __webpack_require__ (/Users/chris/src/webpack-ansi-up/bundle.js:20:30) 
    at Object.<anonymous> (/Users/chris/src/webpack-ansi-up/bundle.js:72:66) 
    at __webpack_require__ (/Users/chris/src/webpack-ansi-up/bundle.js:20:30) 
    at Object.defineProperty.value (/Users/chris/src/webpack-ansi-up/bundle.js:63:18) 
    at Object.<anonymous> (/Users/chris/src/webpack-ansi-up/bundle.js:66:10) 
    at Module._compile (module.js:570:32) 
    at Object.Module._extensions..js (module.js:579:10) 

例のレポはこちらです：https://github.com/doughsay/webpack-question

この依存関係と間違って何それはこのように振る舞うのですか？そして、これを解決するために私が輸入業者として行うことができることは何ですか？それとも、依存関係の終わりで修正する必要がありますか？

EDIT：明確にするために、ここではエラーを明確に示すためにノードを使用しています。実際には、ブラウザでバンドルを使用する予定です。ブラウザにも同様の問題が発生します。

Answer 1

Webpackがこのライブラリで何をするのか理解できないため、エラーが発生しています。この修正は、図書館の作者に共通のUMDパターンに従うように依頼することです。現在のansi_upはであり、近いうちにですが、それほど適切ではありません。

https://github.com/drudru/ansi_up/blob/29ce78cf55cc87e8f221fc0f28150fa293a9c3e3/ansi_up.js#L20

はそのようなrequire機能を渡すべきではありません。それを渡すことによって、Webpackはモジュールが使用する依存関係について推論することができなくなります。 Webpackはそれを理解することができないので、代わりにエラーを引き起こすコードを挿入します。

bettern UMDパターンの例はrequireがであることをhttps://github.com/umdjs/umd/blob/master/templates/commonjsStrict.js

注で見つけることができと呼ばれますが、機能自体はどこにでも引数として渡されることはありません。