2016-08-08 11 views
16

लोड करने के लिए वेबपैक का उपयोग करते समय मैं बस वेबपैक का उपयोग करना सीखना शुरू कर रहा हूं (पहले मैं व्यक्तिगत स्क्रिप्ट को अलग से शामिल करने के लिए मैन्युअल तरीके का उपयोग करता हूं)। और मैंने बूटस्ट्रैप लोड करने के लिए 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" 
    } 
} 

मैं के साथ खेला थोड़ी देर के लिए नोड और फिर मुझे याद आया कि नोड लोड करने के लिए अनुरोध जेएस का उपयोग करता है (हालांकि मैं आम बनाम आवश्यकता बनाम एएमडी के बीच मतभेदों के बारे में बहुत स्पष्ट नहीं हूं)। लेकिन क्यों कुछ लोग आम जेएस का जिक्र करते हैं?

मैं कुछ समय के लिए बैकएंड विकसित कर रहा था और अभी सामने आया - इतने सारे प्रश्न पॉप-अप हो रहे हैं। यह पर्याप्त होगा यदि आप मुझे पढ़ने के लिए कुछ गाइड के साथ कुछ लिंक प्रदान करते हैं जो मेरे संदेह को साफ़ कर सकता है/मेरी बुनियादी समझ बना सकता है।

उत्तर

34

प्लगइन

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

के रूप में इस जोड़ें और आप अपने पूरे परियोजना में jQuery के लिए सक्षम होना चाहिए।

यदि समस्या प्लगइन जोड़ने के बाद जारी रहती है, तो अपने nodejs सर्वर को पुनरारंभ करने का प्रयास करें। npm install --save jquery का उपयोग कर jquery इंस्टॉल करना याद रखें।

+0

मैंने इसे अपने प्रश्न में रखा था। शायद आप इसे फिर से पढ़ सकते हैं। मेरे लिए इस समाधान को –

+0

पर काम नहीं किया है यदि आप इस प्लगइन का उपयोग करते हैं तो इसे काम करना चाहिए और आपको उपनाम सेट करने की आवश्यकता नहीं है .. [इस बीज को जांचें] (https://github.com/jorawarsingh/es6-webpack-bootstrap-material -डिज़ाइन) –

+1

नोट: एक बार जब आपने वेबपैक प्लगइन के साथ jquery प्लग किया है तो आपको इसे आवश्यकतानुसार आयात करने की आवश्यकता नहीं है और आप dev टूल पर जा सकते हैं और jquery लोड होने के लिए $ टाइप कर सकते हैं। मुझे आपके कोड में अजीब कुछ भी नहीं दिख रहा है, इसे सिर्फ काम करना चाहिए :-) –

6

प्लगइन की आवश्यकता नहीं है। बस प्रविष्टि के रूप में निम्नलिखित का उपयोग करें:

entry: [ 
    'jquery', //will load jquery from node_modules 
    './assets/js/index', 
] 

फिर ES6 + फ़ाइल उपयोग में:

import $ from "jquery"; 
+0

क्या यह वेबपैक 2 में काम करता है? क्या यह सुनिश्चित करता है कि 'jquery' निष्पादित होने तक' अनुक्रमणिका 'निष्पादित नहीं की जाएगी? – Flimm

+0

@ फ़्लेमम वेबपैक 2 में 'एंट्री' भाग पर कोई बदलाव नहीं है, इसलिए वहां भी काम करना चाहिए। –

+0

@ फ़्लेमम अच्छा, पहले रिकॉर्ड के रूप में 'jquery' डालें :)। मैंने अपना जवाब अपडेट किया। –

4

मैं जानता हूँ कि यह एक सा पुराना है, लेकिन मुझे लगता है कि जैसे यह करने में कामयाब रहे:

वैश्विक।jQuery = आवश्यकता है ('jquery'); की आवश्यकता है ('बूटस्ट्रैप');

संबंधित मुद्दे