लोड करने के लिए वेबपैक का उपयोग करते समय मैं बस वेबपैक का उपयोग करना सीखना शुरू कर रहा हूं (पहले मैं व्यक्तिगत स्क्रिप्ट को अलग से शामिल करने के लिए मैन्युअल तरीके का उपयोग करता हूं)। और मैंने बूटस्ट्रैप लोड करने के लिए bootstrap-loader
का उपयोग किया। यहाँ मेरी webpack.config.js'jquery परिभाषित नहीं किया गया है' बूटस्ट्रैप
var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
module.exports = {
context: __dirname,
entry: './assets/js/index', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs
output: {
path: path.resolve('./assets/bundles/'),
filename: "[name]-[hash].js",
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'})
],
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
{ test: /\.css$/, loader: 'style-loader!css-loader'}, // to transform css
// images
{ test: /\.png$/, loader: 'url-loader?limit=100000'},
{ test: /\.jpg$/, loader: 'file-loader'},
// bootstrap image files
{ test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
],
},
resolve: {
modulesDirectories: ['node_modules', 'bower_components'],
extensions: ['', '.js', '.jsx'],
jquery: './vendor/jquery/jquery.js',
},
}
और यहाँ है मेरी entry.js
global.jQuery = global.$ = require('jquery');
require('bootstrap-loader');
यह काम करने के लिए लगता है। हालांकि, मैंने पहले इसका इस्तेमाल किया था और यह काम नहीं किया:
window.jQuery = window.$ = require('jquery');
मुझे इतने सारे लोगों द्वारा सुझाई गई रेखा मिली। लेकिन पृष्ठ लोड करते समय मुझे बस त्रुटियां मिलती हैं। बस कुछ उदाहरण: some SO question, webpack issue, another SO question।
बाद में मुझे this question, और this question मिला। तो पृष्ठ वास्तव में बूटस्ट्रैप जेएस कार्यक्षमता के साथ काम करता है।
मैं मामले में रूप में अच्छी तरह मेरी package.json जोड़ देगा यह प्रासंगिक है:
{
"author": "franklingu",
"dependencies": {
"babel": "^6.5.2",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"bootstrap-loader": "^1.2.0-beta.1",
"bootstrap-sass": "^3.3.7",
"extract-text-webpack-plugin": "^1.0.1",
"jquery": "^3.1.0",
"node-sass": "^3.8.0",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^4.0.0",
"webpack": "^1.13.1",
"webpack-bundle-tracker": "0.0.93"
},
"devDependencies": {
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"css-loader": "^0.23.1",
"file-loader": "^0.9.0",
"node-sass": "^3.8.0",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.1"
}
}
मैं webpack के लिए नया हूँ, लेकिन मैं जे एस के लिए नया नहीं हूँ। मुझे आश्चर्य है कि क्यों window.$
काम नहीं कर रहा है।
और मुझे आश्चर्य है, webpack के लिए, क्यों कुछ लोग इस प्लग-इन में सुझाव दिया:
new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
'window.$': 'jquery',
})
कुछ लोग इस सुझाव दे रहे हैं (मेरे लिए काम नहीं किया या तो):
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
मैं के साथ खेला थोड़ी देर के लिए नोड और फिर मुझे याद आया कि नोड लोड करने के लिए अनुरोध जेएस का उपयोग करता है (हालांकि मैं आम बनाम आवश्यकता बनाम एएमडी के बीच मतभेदों के बारे में बहुत स्पष्ट नहीं हूं)। लेकिन क्यों कुछ लोग आम जेएस का जिक्र करते हैं?
मैं कुछ समय के लिए बैकएंड विकसित कर रहा था और अभी सामने आया - इतने सारे प्रश्न पॉप-अप हो रहे हैं। यह पर्याप्त होगा यदि आप मुझे पढ़ने के लिए कुछ गाइड के साथ कुछ लिंक प्रदान करते हैं जो मेरे संदेह को साफ़ कर सकता है/मेरी बुनियादी समझ बना सकता है।
मैंने इसे अपने प्रश्न में रखा था। शायद आप इसे फिर से पढ़ सकते हैं। मेरे लिए इस समाधान को –
पर काम नहीं किया है यदि आप इस प्लगइन का उपयोग करते हैं तो इसे काम करना चाहिए और आपको उपनाम सेट करने की आवश्यकता नहीं है .. [इस बीज को जांचें] (https://github.com/jorawarsingh/es6-webpack-bootstrap-material -डिज़ाइन) –
नोट: एक बार जब आपने वेबपैक प्लगइन के साथ jquery प्लग किया है तो आपको इसे आवश्यकतानुसार आयात करने की आवश्यकता नहीं है और आप dev टूल पर जा सकते हैं और jquery लोड होने के लिए $ टाइप कर सकते हैं। मुझे आपके कोड में अजीब कुछ भी नहीं दिख रहा है, इसे सिर्फ काम करना चाहिए :-) –