वेबपैक

Question

के साथ jQuery को कॉन्फ़िगर और उपयोग करने के लिए मेरे पास वेबपैक के साथ रन jQuery फ़ंक्शन का परीक्षण करने के लिए एक बहुत ही सरल प्रोजेक्ट है। हालांकि मैं बंडल चरण में त्रुटियों में भाग गया। यहाँ त्रुटियाँ हैं:

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 

यहाँ मेरी config फ़ाइलें हैं:

{ 
    "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
package.json

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!"); 
    }); 

})(); 

यदि मैं निर्दिष्ट मॉड्यूल स्थापित करता हूं (jsdom, xmlhttprequest, ..), त्रुटियों को बहुत लंबी त्रुटियों से प्रतिस्थापित किया जाएगा।

Answer 1

आप वैश्विक पहचानकर्ता के रूप में jQuery को हल करने के लिए webpack.ProvidePlugin का उपयोग कर सकते हैं। जब आप ProvidePlugin का उपयोग करते हैं तो आप मॉड्यूल में jQuery आयात नहीं करना चाहते हैं क्योंकि यह वैश्विक चर के रूप में उपलब्ध होगा।

की तरह कुछ

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