WebpackでのjQueryプラグインの依存関係の管理

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

現在、私はこのjQueryプラグインをここで使用しようとしています-https ://github.com/mbklein/jquery-elastic。Webpackのドキュメントでは、providePluginと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;

しかし、それにもかかわらず、ブラウザコンソールでエラーが発生します。

Uncaught ReferenceError：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がbundle.jsのJavaScriptコードと一緒にバンドルされ、すべてのjQueryプラグインをvendors.jsバンドルに含めたいことを意味するためです。これを達成するにはどうすればよいですか？

レガシーベンダーモジュールを含める方法はさまざまです。これは私がそれに取り組む方法です：

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

ほとんどのモジュールdistは、そのmainフィールドでバージョンをリンクしますpackage.json。これはほとんどの開発者にとって便利ですが、srcwebpackは依存関係をより適切に最適化できるため（たとえばを使用する場合DedupePlugin）、webpackのバージョンにエイリアスを付けることをお勧めします。

// webpack.config.js

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

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

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

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

var webpack = require("webpack");

    ...

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

3. imports-loaderを使用するを使用して構成しますthis

一部のレガシーモジュールthisは、windowオブジェクトであることに依存しています。モジュールはCommonJSコンテキストで実行されたとき、これは問題になりthisイコールmodule.exports。この場合this、imports-loaderでオーバーライドできます。

走る 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>タグを介してそれらを含めたかのように、グローバルコンテキストでモジュールを実行します。

6.使用 noParse大きな距離を含めるためにする

AMD / CommonJSバージョンのモジュールがなくdist、を含めたい場合は、このモジュールにとしてフラグを付けることができますnoParse。次に、webpackはモジュールを解析せずに含めるだけで、ビルド時間を改善するために使用できます。これは、のようなASTを必要とする機能が機能しないことを意味しますProvidePlugin。

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

jqueryへのグローバルアクセスには、いくつかのオプションがあります。私の最新のwebpackプロジェクトでは、jqueryへのグローバルアクセスが必要だったので、プラグイン宣言に以下を追加しました。

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

つまり、JavaScriptのソースコード内からグローバル参照$とjQueryを介してjqueryにアクセスできます。

もちろん、npm経由でjqueryもインストールしておく必要があります。

$ npm i jquery --save

このアプローチの実際の例については、githubで私のアプリを自由にフォークしてください

私があなたがやろうとしていることをよく理解しているかどうかはわかりませんが、jQueryがグローバルコンテキスト（ウィンドウ）にあることを必要とするjQueryプラグインを使用する必要がありましたentry.js。

var $ = require('jquery');
window.jQuery = $;
window.$ = $;

私はちょうど私が好きな場所必要としなければならないjqueryplugin.min.jsとwindow.$予想されるように、プラグインで拡張されます。

露出$しながらうまく機能し、jQueryWebpack 3.8.1以降では、グローバル変数として。

プロジェクトの依存関係としてjQueryをインストールします。@3.2.1最新バージョンのインストールを省略したり、別バージョンを指定したりできます。

npm install --save jquery@3.2.1

expose-loaderまだインストールされていない場合は、開発依存関係としてインストールします。

npm install expose-loader --save-dev

jQueryをロードして公開するようにWebpackを構成します。

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  entry: [
    // entry bits
  ],
  output: {
    // output bits
  },
  module: {
    rules: [
      // any other rules
      {
        // Exposes jQuery for use outside Webpack build
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      }
    ]
  },
  plugins: [
    // Provides jQuery for other JS bundled with Webpack
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

これをwebpack.config.jsのプラグイン配列に追加します

new webpack.ProvidePlugin({
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
})

その後、jqueryを通常必要とします

require('jquery');

他のスクリプトがそれを見るのに苦痛が続く場合は、（エントリjsで）グローバルコンテキストに明示的に配置してみてください

window.$ = jQuery;

webpack.config.jsファイルに以下を追加します。

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

npmを使用してjQueryをインストールします。

$ npm i jquery --save

app.jsファイルに次の行を追加します。

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

これでうまくいきました。:)

私は提供された回答のいくつかを試しましたが、どれもうまくいかなかったようです。それから私はこれを試しました：

new webpack.ProvidePlugin({
    'window.jQuery'    : 'jquery',
    'window.$'         : 'jquery',
    'jQuery'           : 'jquery',
    '$'                : 'jquery'
});

私が使用しているバージョンに関係なく動作するようです

これはwebpack 3で機能します。

webpack.config.babel.jsファイル内：

resolve: {
    alias: {
         jquery: "jquery/src/jquery"
    },
 ....
}

そして、ProvidePluginを使用します

new webpack.ProvidePlugin({
        '$': 'jquery',
        'jQuery': 'jquery',
    })

私が見つけた最良の解決策は：

https://github.com/angular/angular-cli/issues/5139#issuecomment-283634059

基本的に、typings.d.tsにダミー変数を含め、コードから "import * as $ from 'jquery"を削除してから、jQueryスクリプトへのタグをSPA htmlに手動で追加する必要があります。この方法では、webpackが邪魔にならず、すべてのスクリプトで同じグローバルjQuery変数にアクセスできるはずです。

これはwebpack.config.jsで私のために働きます

    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),

別のJavaScriptまたはHTMLに追加：

global.jQuery = require('jquery');

編集：独自のコードを整理しておくために、単純なWebプロジェクトのモジュールバンドルとして単にWebpackを使用したい場合があります。次の解決策は、モジュール内で外部ライブラリが期待どおりに機能することを望んでいる人向けです。多くの時間をWebpack設定に費やすことなく使用できます。（-1の後に編集）

まだ苦労している場合、または外部設定/追加のWebpackプラグイン設定を回避したい場合は、すばやく簡単な（es6）ソリューション：

<script src="cdn/jquery.js"></script>
<script src="cdn/underscore.js"></script>
<script src="etc.js"></script>
<script src="bundle.js"></script>

モジュール内：

const { jQuery: $, Underscore: _, etc } = window;