Web paketi ile jQuery nasıl yapılandırılır ve kullanılır

Question

Web jQuery işlevini web paketi ile test etmek için çok basit bir projem var. Ancak paket adımında hatalarla karşılaştım. İşte hatalar şunlardır: Burada

ERROR in ./~/jQuery/lib/node-jquery.js 
Module not found: Error: Cannot resolve module 'jsdom' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib 
@ ./~/jQuery/lib/node-jquery.js 5:13-29 

ERROR in ./~/jQuery/lib/node-jquery.js 
Module not found: Error: Cannot resolve module 'xmlhttprequest' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib 
@ ./~/jQuery/lib/node-jquery.js 8:28-53 

ERROR in ./~/jQuery/lib/node-jquery.js 
Module not found: Error: Cannot resolve module 'location' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib 
@ ./~/jQuery/lib/node-jquery.js 13:24-43 

ERROR in ./~/jQuery/lib/node-jquery.js 
Module not found: Error: Cannot resolve module 'navigator' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib 
@ ./~/jQuery/lib/node-jquery.js 17:25-45 

benim yapılandırma dosyaları

şunlardır:
package.json

{ 
    "name": "frontend", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.jsx", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.17.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-es2015": "^6.16.0", 
    "babel-preset-react": "^6.16.0", 
    "jquery": "^2.2.2", 
    "react": "file:node_modules/react", 
    "react-dom": "file:node_modules/react-dom", 
    "webpack": "^1.13.2", 
    "webpack-dev-server": "^1.16.2" 
    } 
} 

webpack.config.js

var webpack = require('webpack') 
var path = require('path') 

var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js', 
    publicPath: 'public', 
    }, 
    module: { 
    loaders: [ 
     { 

     test: /\.jsx?/, 
     include: APP_DIR, 
     loader: 'babel' 
     }, 
     { 
     test: /\.css/, 
     include: APP_DIR, 
     } 
    ] 
    }, 

}; 

module.exports = config; 

index.jsx:

import React from 'react' 
import {render} from 'react-dom' 
import $ from 'jQuery' 


(function() { 

    $(document).ready(function() { 
     console.log("It works!"); 
    }); 

})(); 

Belirtilen modülleri (jsdom, xmlhttprequest, ..) yüklerseniz, hatalar çok uzun hatalarla değiştirilir.

Answer 1

jQuery öğesini genel bir tanımlayıcı olarak çözmek için webpack.ProvidePlugin kullanabilirsiniz. ProvidePlugin'u kullandığınızda, global değişken olarak kullanılabilir olacağından, jQuery'u modüllere aktarmak istemezsiniz.

şey bu yardımcı olabilecek

plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 
]