☰

webpack で jQuery プラグインの依存関係を管理する 質問する

tag-icon • tag-icon javascript jquery amd webpack
webpack で jQuery プラグインの依存関係を管理する 質問する

アプリケーションで Webpack を使用しており、2 つのエントリ ポイント (すべての JavaScript ファイル/コード用の bundle.js、jQuery や React などのすべてのライブラリ用の vendors.js) を作成しています。依存関係として jQuery を持つプラグインを使用し、それらを vendors.js にも含めるにはどうすればよいでしょうか。それらのプラグインに複数の依存関係がある場合はどうなりますか。

現在、私はこのjQueryプラグインを使用しようとしています -https://github.com/mbklein/jquery-elasticWebpackのドキュメントには次のように記載されていますプラグインの提供そして imports-loader です。providePlugin を使用しましたが、jQuery オブジェクトはまだ利用できません。私の webpack.config.js は次のようになります。

var webpack = require('webpack');
var bower_dir = __dirname + '/bower_components';
var node_dir = __dirname + '/node_modules';
var lib_dir = __dirname + '/public/js/libs';

var config = {
    addVendor: function (name, path) {
        this.resolve.alias[name] = path;
        this.module.noParse.push(new RegExp(path));
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jquery: "jQuery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
    ],
    entry: {
        app: ['./public/js/main.js'],
        vendors: ['react','jquery']
    },
    resolve: {
        alias: {
            'jquery': node_dir + '/jquery/dist/jquery.js',
            'jquery.elastic': lib_dir + '/jquery.elastic.source.js'
        }
    },
    output: {
        path: './public/js',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'jsx-loader' },
            { test: /\.jquery.elastic.js$/, loader: 'imports-loader' }
        ]
    }
};
config.addVendor('react', bower_dir + '/react/react.min.js');
config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js');
config.addVendor('jquery.elastic', lib_dir +'/jquery.elastic.source.js');

module.exports = config;

しかし、それにもかかわらず、ブラウザ コンソールにはまだエラーが表示されます。

キャッチされない参照エラー: jQuery が定義されていません

同様に、imports-loaderを使用するとエラーが発生します。

require が定義されていません'

この行では:

var jQuery = require("jquery")

ただし、vendors.js ファイルに追加せず、他の JavaScript コード ファイルを組み込むのと同じように通常の AMD の方法でプラグインを要求すると、同じプラグインを使用できます。

define(
[
    'jquery',
    'react',
    '../../common-functions',
    '../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
    $("#myInput").elastic() //It works

});

しかし、これは私がやりたいことではありません。なぜなら、jquery.elastic.source.js が JavaScript コードとともに bundle.js にバンドルされ、すべての jQuery プラグインが vendors.js バンドルに含まれるようにしたいからです。では、これを実現するにはどうすればよいでしょうか?

ベストアンサー1

従来のベンダー モジュールを組み込む方法について、さまざまなアプローチを組み合わせています。私なら次のように対処します。

1. 縮小されていないCommonJS/AMDを優先するdist

ほとんどのモジュールは、のフィールドdistにバージョンをリンクします。これはほとんどの開発者にとって便利ですが、webpackの場合は、バージョンをエイリアスする方がよいでしょう。これにより、webpackは依存関係をより適切に最適化できます（たとえば、mainpackage.jsonsrcDedupePlugin）。

// webpack.config.js

module.exports = {
    ...
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};

ただし、ほとんどの場合、このdistバージョンでも問題なく動作します。

2. 使用ProvidePlugin暗黙のグローバルを注入する

$ほとんどのレガシー モジュールは、jQuery プラグインがまたはで行うように、特定のグローバルの存在に依存しています。このシナリオでは、グローバル識別子に遭遇するたびにjQuery先頭に追加するように webpack を構成できます。var $ = require("jquery")$

var webpack = require("webpack");

    ...
    
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]

3. 使用インポートローダー設定するthis

いくつかのレガシーモジュールはオブジェクトであることに依存しています。thisこれwindowは、モジュールがCommonJSコンテキストで実行されるときに問題になります。この場合、thismodule.exportsthisインポートローダー。

実行しnpm i imports-loader --save-devて

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?this=>window"
        }
    ]
}

imports-loader はあらゆる種類の変数を手動で挿入するためにも使用できます。ただし、ほとんどの場合、ProvidePlugin暗黙的なグローバル変数の場合の方が便利です。

4. 使用インポートローダーAMDを無効にする

AMD、CommonJS、レガシーなど、さまざまなモジュール スタイルをサポートするモジュールがあります。ただし、ほとんどの場合、最初に をチェックしdefine、次に奇妙なコードを使用してプロパティをエクスポートします。このような場合は、 を設定して CommonJS パスを強制すると役立つ場合がありますdefine = false。

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?define=>false"
        }
    ]
}

5. 使用スクリプトローダー（メンテナンス終了）スクリプトをグローバルにインポートする

グローバル変数を気にせず、レガシー スクリプトを動作させたいだけの場合は、script-loader を使用することもできます。script-loader は、タグ経由でモジュールを含めた場合と同じように、モジュールをグローバル コンテキストで実行します<script>。

6.noParse大きな分布を含めるために使用する

モジュールのAMD/CommonJSバージョンがなく、 をインクルードしたい場合はdist、このモジュールを としてフラグ付けすることができますnoParse。すると、webpackはモジュールを解析せずにインクルードするので、ビルド時間を短縮することができます。つまり、 を必要とする機能はすべてASTは、 と同様にProvidePlugin機能しません。

module: {
    noParse: [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]
}

おすすめ記事