2014-04-16 25 views
8

मैं एक परियोजना है कि AngularJS, Browserify और एक उत्कृष्ट डेवलपर अनुभव के लिए Gulp इस्तेमाल करता है, एक है कि एक वितरण योग्य 'का उत्पादन बनाने का प्रयास कर रहा है के साथ browserify में JQuery के लिए वैश्विक और AngularJS से निपटने मॉड्यूल '(कोणीय parlance में)। विचार है कि एक स्व-दस्तावेज परियोजना है, जैसे Angular Bootstrap, जो कि किसी अन्य एप्लिकेशन में उपयोग के लिए उपभोग योग्य वितरण भी बनाती है।"मॉड्यूल 'jQuery' नहीं मिला" - Gulp

हमारे पास Gulp के साथ अच्छे परिणाम हुए हैं, लेकिन हमें browserify/browserify-shim के साथ समस्या हो रही है। इसके अलावा, दुर्भाग्यवश, वहां के अधिकांश उदाहरण या तो गल्प का उपयोग नहीं करते हैं, या gulp-browserify का उपयोग करते हैं, जिन्हें ब्लैकलिस्ट/समाप्त कर दिया गया है।

हम AngularJS और JQueryGoogle CDN से <script> टैग के रूप में शामिल कर रहे हैं और "angular" : "global:angular" और package.json में हमारे browserify-shim config में "jquery" : "global:$" घोषणा की है, लेकिन हम "cannot find module" हो रही है जब हम उपयोगकर्ता var angular = require('angular') को var $ = require('jquery') हमारे browserified-कोड के अंदर (कोशिश करते हैं और एक बार यह ब्राउज़र में चलाता है)।

मैंने एक नमूना प्रोजेक्ट बनाया है जो इसे न्यूनतम के करीब बंद कर देता है।

A sample repository of the code is available at

एक बार क्लोन, आप multi-browserify फ़ोल्डर की जड़ से 'npm install' चलाने होगा, तो 'bower install', तो 'gulp' फ़ाइलें पैदा करते हैं और परीक्षण सर्वर को चलाने के लिए।

घूंट चल साथ

, आप http पर लाइव एचटीएमएल उपयोग कर सकते हैं: //: 4000/gulp.html

किसी भी मदद की बहुत सराहना की जाएगी - अगर हम एक बग/मुद्दे का सामना करना पड़ा मैं सोच रहा हूँ गल्प, ब्राउज़र, vinyl-source-stream, आदि के चौराहे के साथ, या अधिक संभावना है, हम अभी तक इसे काफी नहीं मिला है।

+0

मैं करने के लिए https://github.com/ryan-kimber/multi-browserify पर परीक्षण भंडार को नवीनीकृत किया है इसे बहुत नंगे बनाओ और मैंने एक README.md प्रदान किया है जो इस मुद्दे को बताता है, बिल्ड और ऐप को कैसे चलाया जाए और अपेक्षित आउटपुट क्या होना चाहिए। –

उत्तर

3

सीडीएन से आपकी निर्भरताओं को एक आवश्यकता से पुनर्प्राप्त कर रहा है? यदि नहीं, तो आप अपनी निर्भरताओं के लिए एनपीएम का उपयोग कर सकते हैं और ब्राउज़र को उन्हें आपके लिए जादूगर बनाने दें।

JQuery और कोणीय NPM के माध्यम से उपलब्ध हैं, इसलिए एक उदाहरण के रूप jQuery का उपयोग कर आप बस अपने package.json में यह घोषणा कर सका, इसलिए जैसे: वैकल्पिक रूप से

... 
    "dependencies": { 
    "jquery": "^1.11.1" 
    }, 
    ... 

, निर्देशिका युक्त अपने package.json स्थापित हो जाएगा से npm install <package> -s चल निर्दिष्ट मॉड्यूल और इसे अपने package.json फ़ाइल में निर्भरता के रूप में सहेजें।

एक बार जब आप स्थापित किया है यह निर्भरता (और किसी भी अन्य लोगों के आप इच्छा), तो आप आगे जाना है और उन्हें अपने app.js में उपयोग कर सकते हैं इस प्रकार है:

कि के रूप में
var $ = require('jquery'); 

$('<div>Hello World, I\'m using JQuery!</div>').appendTo('body'); 

सरल, और बोवर उपयोग करने की आवश्यकता या browserify-shim - browserify आपके node_modules फ़ोल्डर को देखेगा और उन्हें ढूंढ पाएगा। मैंने कोणीय के साथ यह कोशिश नहीं की है (मुझे इसे स्थापित करने का प्रयास करने में कोई समस्या थी) - लेकिन यह npm के माध्यम से उपलब्ध है, इसलिए इसे काम करना चाहिए।

+1

मुझे नहीं पता कि यह प्रश्न का उत्तर कैसे है। सवाल एक विशिष्ट परिदृश्य और इसके साथ समस्या का स्पष्ट रूप से वर्णन करता है। यह जवाब परिदृश्य को पूरी तरह से अनदेखा करता है। –

+1

मैंने परिदृश्य को अनदेखा नहीं किया, बल्कि मुझे अपने अंतिम लक्ष्य (JQuery का उपयोग करने में सक्षम होने) के रूप में माना जाने का एक वैकल्पिक तरीका प्रदान किया, जिस पर उन्होंने विचार नहीं किया था। इस दृष्टिकोण का अर्थ ब्राउज़र-शिम की कोई ज़रूरत नहीं होगी, इस प्रकार यह (अप्रत्यक्ष रूप से) उनकी समस्या का समाधान करेगा। – goodforenergy

+0

प्रश्न का पूरा बिंदु एक सीडीएन से jQuery और कोणीय का उपयोग करना है, लेकिन सामान्य रूप से विकास के दौरान उन्हें 'आवश्यकता' करने में सक्षम होना चाहिए। इस प्रकार, उन्हें परियोजना के जावास्क्रिप्ट के बाकी हिस्सों के साथ बंडल करने का सुझाव पूरी तरह से सवाल से परहेज कर रहा है। –

0
# assuming you have installed jquery locally instead of globally 
npm install jquery -s   # without -g flag 

बजाय की आवश्यकता होती है ( "jQuery" ), स्रोत निर्देशिका से रिश्तेदार पथ देना
की आवश्यकता होती है ( "./node_modules/jquery/dist/jquery.min। जेएस ");

प्रयास करें निम्नलिखित:

<script>window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script> 

या

<script>var $ = jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script> 
संबंधित मुद्दे