使用webpack-2捆綁時，$是一個空對象

Question

最近，我一直在考慮將構建過程從Grunt轉移到webpack-2 。 我們的代碼完全使用requirejs以AMD格式編寫。 為了演示的目的，我將發布我們正在使用的index.js文件的簡約版本。

這是提交文件並通過npm加載所使用的jQuery-1.6.4的鏈接。 請暫時原諒。 的jQuery-1.6.4

index.js

define(['jQuery', 'arrayUtils'], function ($, arrayUtils) {
  'use strict';
  console.log($); 
  console.log(arrayUtils);

});

對應的require-config.js文件：

(function () {
    'use strict';

    require.config({
        baseUrl: '../../src',
        waitSeconds: 0,
        paths: {
            jQuery: '/path to/jquery-1.6.4',
            urlUtils: '/path to/urlUtils',
            // ...
        },
        shim: {
            jQuery: {
                exports: '$'
            },
            urlUtils: {
                exports: 'urlUtils'
            },
            // ...
        }
    });
})();

我嘗試使用我們的AMD方法，但想使用webpack-2捆綁所有內容。 我瀏覽了文檔和各種博客，並遇到了配置，除了舊式jQuery外，其他所有配置都像魅力一樣。

這是webpack.config.js

var webpack = require('webpack');
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

// Import the plugin:
var path = require('path');
var env = require('yargs').argv.mode;
var outputFile;

var options = {
  target: 'this'
};
var libOptions = {
  name: 'heatmap-inject',
  version: JSON.stringify(require("./package.json").version)

};

var plugins = [];


if (env === 'build') {
  plugins.push(new UglifyJsPlugin({
    sourceMap: true,
    minimize: true
  }));
}

// At the end of the file:
module.exports = {
  entry: __dirname + '/src/library.js',
  devtool: 'source-map',
  output: {
    path: __dirname + '/dist/webpack',
    library: 'library.js',
    filename: libOptions.name + '.js', // libOptions.name + (options.target ? '.' + options.target : '') + (env === 'build' ? '.min.js' : '.js')
    libraryTarget: options.target || 'umd',
    umdNamedDefine: true
  },
  module: {
    rules: [{
      test: /(\.js)$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015'],
          plugins: []
        }
      }
    }, {
      enforce: 'pre',
      test: /(\.js)$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'eslint-loader',
        options: {}
      }
    }, { test: /jQuery/, loader: 'exports-loader?$'
    }, { test: /urlUtils/, loader: 'exports-loader?urlUtils'
    }]
  },
  resolve: {
    alias: {
     'jQuery': 'heatmaps/vendor/jquery-1.6.4',
     'urlUtils': 'lib/heatmap/UrlUtils'
    },
    modules: [
      'src/**/*.js',
      'src/bower_components',
      path.resolve('./src')
    ],
    extensions: ['.js']
  },
  plugins: plugins
};

由webpack-2生成的文件會拋出一個錯誤，即未定義$.fn即不是$作為jQuery函數，而是一個普通的空對象。 雖然定義了window。$並返回了正確的jQuery函數，但是為什么我沒有為$得到相同的結果。 對於AMD，我得到了正確的結果，因為$處於閉包狀態並返回1.6.4 jQuery。 使用webpack，它表現得很奇怪。

!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(1), __webpack_require__(13) ], __WEBPACK_AMD_DEFINE_RESULT__ = function ($, urlUtils) { ... }

我還嘗試了哪些其他方法：

1. { test: /jQuery/, loader: 'expose-loader?$'
2. { test: /jQuery/, loader: 'exports-loader?jQuery=jQuery,$=jQuery,this=>window'
3. { test: /jQuery/, loader: 'exports-loader?this=>window'
4. { test: /jQuery/, loader: 'expose-loader?$=jQuery'

不能使用externals屬性，因為它污染了window.jQuery並且由於此庫已在用戶的網站上注入/加載，這將破壞目標源上的內容。

請幫我！ 我現在對這個奇怪的jQuery感到沮喪。

Answer 1

這可能是因為您使用的jQuery版本早於jQuery AMD修復程序 。 使用jQuery 2.2.1和3.0，我將許多大型AMD代碼庫移植到了ES模塊上。 我曾經在構建環境中解決jQuery的混亂的主要堆棧溢出問題是jhhns自己的非常詳盡的回答 。

解決方案的關鍵，特別是如果您在jQuery之上使用jQuery UI時，則是使用Provide插件，然后使用一個“插件”模塊來導入所需的特定模塊。 尤其是如果他們有特定的訂單，則需要在相關應用程序的其余部分中加載它們。

使用ES模塊（AMD也可以）：

// jquery-plugins.js
// import $ from 'jquery' is implicit because of the provide plugin
import 'jquery-ui'
import 'malihu-custom-scrollbar'
import 'datatables'

對於所有依賴項，首先（或接近第一個）導入此模塊將為您提供以后需要的jQuery命名空間。

Answer 2

我在舊代碼中使用jQuery 1.9.1，並將其與Webpack 4捆綁在一起。我遇到了類似的問題。

經過一整天的努力，通過遵循@SamirAguiar的解決方案和https://webpack.js.org/configuration/other-options/#amd ，我在我的webpack配置中找到了一種可行的方法：

{
  resolve: {
    alias: {
      'jquery': 'jquery/jquery', // -> node_modules/jquery/jquery.js
      // ...
    },
  },
  amd: {
    jQuery: true
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery', // legacy code tend to use $ without requiring it
      jQuery: 'jquery'
    }),
    // ...
  ]
}

這與jquery-ui 1.10.3和其他基於jQuery的插件很好地配合。