Попытка потребовать части jquery с webpack

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 разрешен в <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.

Solutions

К сожалению, мне не удалось решить эту проблему с 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