web-dev-qa-db-ja.com

Webpack：モジュールの依存関係を表現する

Webpackedアプリケーションで bootstrap-webpack モジュールをrequireしようとしています。

バンドルされたjavascriptが次に以下をスローするため、jQueryが必要なようです。

キャッチされないReferenceError：jQueryが定義されていません

この問題を修正するには、jQueryがbootstrap-webpackモジュールの依存関係であることをwebpackに指定するにはどうすればよいですか？それはささいなことのように思えますが、私はそれを理解するのに苦労してきました。

追加しようとしました：

"jquery": "latest"

bootstrap-webpackのpackage.jsonの依存関係に追加されましたが、これは機能しませんでした。 documentation は不完全であり、この問題について多くを見つけることができないようです。ささいなことですよね？助けて！

requirejsamdwebpack
25
eye_mew

2つの可能な解決策があります。

ProvidePluginを使用します：指定された識別子のソースコードをスキャンし、指定されたモジュールへの参照に置き換えます。

_// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ]
};
_

imports-loaderを使用します：require()ステートメントのような準備を付加する可能性を提供します。

_// webpack.config.js
{
    ...
    module: {
        loaders: [
            { test: require.resolve("jquery"), loader: "imports?jQuery=jquery" }
        ]
    }
}
_

その場合、前に_npm install imports-loader --save_を実行する必要があります。

50
Johannes Ewald

このgithubの問題 経由。

_expose-loader_をインストールし、webpack-bootstrapが必要になる直前にrequire('expose?$!expose?jQuery!jquery');をメインのエントリポイントに追加します。

これにより、ウィンドウにjQueryが設定され、どのファイルでもアクセスできるようになります。このメソッドに注意してください。すべてのファイルは、明示的に必要かどうかに関係なく、そのバージョンのjQueryにアクセスできます。

10
Derek Dahmer