$是使用webpack-2捆绑的空对象。

Question

最近，我一直在考虑将构建过程从Grunt转移到webpack-2。我们的代码完全是用AMD格式编写的，使用的是需求。为了演示的目的，我将发布我们正在使用的index.js文件的简约版本。

以下是jQuery-1.6.4的链接，通过提交文件并通过npm加载。请暂时原谅我。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属性，因为它污染了thw window.jQuery，并且当这个库被注入/加载到用户的网站上时，这会破坏目标源上的东西。

请帮帮我!我现在对这个奇怪的jQuery的事情感到沮丧。

Answer 1

这可能是因为您正在使用的jQuery版本是在jQuery AMD修复之前。。使用jQuery 2.2.1和3.0，我将一些大型的AMD代码库移植到ES模块中。我在build中用来通过jQuery的jankiness的主要堆栈溢出帖子是jhhns自己的这个非常彻底的答案。

解决方案的关键，特别是如果您使用jQuery UI之上的jQuery，是使用提供插件，然后有一个“插件”模块，导入您需要的特定模块。特别是如果他们有一个特定的订单，他们需要加载到周围的应用程序其余的问题。

使用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-UI1.10.3和其他一些基于jQuery的插件工作得很好。