481

私は自分のアプリケーションで 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 が私の JavaScript コードと一緒に bundle.js にバンドルされていることを意味し、すべての jQuery プラグインを vendors.js バンドルに入れたいからです。では、これを達成するにはどうすればよいですか？

4

11 に答える 11

94

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

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

これは、グローバル参照 $ および jQuery を介して、JavaScript ソース コード内から jquery にアクセスできることを意味します。

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

$ npm i jquery --save

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

于 2015-12-18T11:11:06.467 に答える
33

Webpack 3.8.1以降を使用して、グローバル変数を公開$している間、うまく機能するようになりました。jQuery

プロジェクトの依存関係として 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'
    })
  ]
}
于 2017-10-25T16:39:45.043 に答える
7

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

webpack.config.babel.js ファイルで:

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

そしてProvidePluginを使う

new webpack.ProvidePlugin({
        '$': 'jquery',
        'jQuery': 'jquery',
    })
于 2017-07-30T21:12:41.700 に答える
3

編集: webpack を単純な web プロジェクトのモジュールバンドラーとして使用したい場合があります-独自のコードを整理しておくためです。次の解決策は、外部ライブラリがモジュール内で期待どおりに機能することだけを望んでいる人のためのものです - 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;
于 2017-09-30T05:59:05.503 に答える