试图要求使用webpack jQuery的部分

Question

我是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' 
    }                  
} 

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

Answer 1

的问题

I am using this article to import only the parts of jquery that I would need.

这篇文章的作者发布的jQuery 2.2.0之前。

在的jQuery的2.1.x：

// jquery/src/selector-sizzle.js 

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

所以sizzle然而在jQuery的2.2.x的解析为<base-dir>/node_modules/sizzle

：

// 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作为预装载机"sizzle"更换"../external/sizzle/dist/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