【问题标题】：Trying to require parts of jquery with webpack尝试使用 webpack 要求部分 jquery
【发布时间】：2016-03-08 20:34:37
【问题描述】：

我是 using this article 只导入我需要的 jquery 部分。

但是，我在使用此代码时遇到了问题：

let $ = require('jquery/src/core');
require('jquery/src/core/init');
require('jquery/src/css');
console.log($);

我收到此错误：

ERROR in ./~/jquery/src/selector-sizzle.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../external/sizzle/dist/sizzle in /home/vamsi/Do/highland-fun/bacon-form/node_modules/jquery/src
 @ ./~/jquery/src/selector-sizzle.js 1:0-14:3

这是我的webpack.config.js 文件：

module.exports = {
    entry:'./app',
    output:{
      filename:'./bundle'
    },
    modules:{
      loaders:[
        {
           test:/jquery[\\\/]src[\\\/]selector\.js$/,
           loaders:['amd-define-factory-patcher-loader']
        }
      ]
    }
}

我已尝试使用resolve.alias 来解决此问题：

resolve:{                                                                
  alias:{                                                                
   '../external/sizzle/dist/sizzle':'./node_modules/sizzle/dist/sizzle.js'
  }                                                                      
}

但它仍然会抛出与以前相同的错误。

【问题讨论】：

标签： javascript jquery webpack

【解决方案1】：

问题

我是using this article，只导入我需要的 jquery 部分。

这篇文章是在 jquery 2.2.0 发布之前写的。

在 jquery 2.1.x 中：

// jquery/src/selector-sizzle.js

define([
    "./core",
    "sizzle"
], function( jQuery, Sizzle ) {
  //...
})

所以sizzle被解析为<base-dir>/node_modules/sizzle

但是在 jquery 2.2.x 中：

// jquery/src/selector-sizzle.js

define([
    "./core",
    "../external/sizzle/dist/sizzle" // <- missing
], function( jQuery, Sizzle ) {
  //...
})

如果您查看<base-dir>/node_modules/jquery，您会发现缺少<base-dir>/node_modules/jquery/external。该目录存在于 jquery repo 中，但在 jquery npm 包中被忽略。

解决方案

不幸的是，我无法通过 webpack 的 resolve.alias 以任何方式解决这个问题。或者，其中一种解决方案对您有用：

使用 jquery 2.1.4 -> "jquery": "~2.1.4"
继续使用 jquery 2.2.x 并使用 string-replace-loader 作为预加载器，将 "../external/sizzle/dist/sizzle" 替换为 "sizzle"：

npm i string-replace-loader --save-dev

// webpack.config.js

module.exports = {
    //...
    module: {
        preLoaders: [{
            test: /jquery[\\\/]src[\\\/]selector-sizzle\.js$/,
            loader: 'string-replace',
            query: {
                search: '../external/sizzle/dist/sizzle',
                replace: 'sizzle'
            }
        }]
    }
    //...
};

注意：在这两种解决方案中，您都必须npm i sizzle --save

【讨论】：