अपडेट अक्टूबर 2018
यदि आप अभी भी फ्रंट-एंड देव के बारे में अनिश्चित हैं, तो यहां एक उत्कृष्ट संसाधन पर एक नज़र डाल सकते हैं।
https://github.com/kamranahmedse/developer-roadmap
अपडेट जून 2018
आधुनिक जावास्क्रिप्ट सीखना कठिन है यदि आप शुरुआत से ही वहां नहीं हैं। यदि आप नए कॉमरेड हैं, तो बेहतर अवलोकन करने के लिए लिखे गए इस उत्कृष्ट को जांचना न भूलें।
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
जुलाई 2017 को अपडेट करें
हाल ही में मैंने 2017 में फ्रंट-एंड डेवलपमेंट को कैसे एप्रोच किया जाए, इसके बारे में ग्रैब टीम से एक बहुत व्यापक गाइड पाया। आप इसे नीचे की तरह देख सकते हैं।
https://github.com/grab/front-end-guide
मैं इसके लिए काफी समय से खोज कर रहा हूं क्योंकि वहां बहुत सारे उपकरण हैं और उनमें से प्रत्येक हमें एक अलग पहलू में लाभान्वित करता है। समुदाय को उपकरणों की तरह विभाजित किया गया है Browserify, Webpack, jspm, Grunt and Gulp। जिसके बारे में आप भी सुन सकते हैं Yeoman or Slush। यह वास्तव में कोई समस्या नहीं है, यह सिर्फ एक स्पष्ट मार्ग को समझने की कोशिश कर रहे सभी के लिए भ्रमित करने वाला है।
वैसे भी, मैं कुछ योगदान देना चाहूंगा।
1. पैकेज मैनेजर
पैकेज प्रबंधक प्रोजेक्ट की निर्भरता को स्थापित करने और अद्यतन करने को सरल बनाते हैं, जो कि पुस्तकालय हैं जैसे: jQuery, Bootstrapआदि - सब कुछ जो आपकी साइट पर उपयोग किया जाता है और आपके लिए नहीं लिखा जाता है।
सभी पुस्तकालय वेबसाइटों को ब्राउज़ करना, अभिलेखागार को डाउनलोड करना और खोलना, फाइलों को परियोजनाओं में कॉपी करना - यह सब टर्मिनल में कुछ कमांड के साथ बदल दिया जाता है।
NPMइसके लिए खड़ा है: Node JS package managerआपके सॉफ्टवेयर पर निर्भर सभी पुस्तकालयों का प्रबंधन करने में आपकी मदद करता है। आप कमांड लाइन में एक फ़ाइल में अपनी आवश्यकताओं को परिभाषित करते हैं package.jsonऔर चलाते हैं npm install... फिर BANG, आपके पैकेज डाउनलोड किए जाते हैं और उपयोग के लिए तैयार हैं। दोनों front-end and back-endपुस्तकालयों के लिए इस्तेमाल किया जा सकता है ।
Bower: फ्रंट-एंड पैकेज प्रबंधन के लिए, अवधारणा एनपीएम के साथ समान है। आपकी सभी लाइब्रेरी नाम की फ़ाइल में संग्रहीत हैं bower.jsonऔर फिर bower installकमांड लाइन में चलती हैं ।
बीच सबसे बड़ा अंतर Bowerहै और NPMजबकि बोवर नीचे के रूप में एक फ्लैट निर्भरता वृक्ष की आवश्यकता है कि NPM नेस्टेड निर्भरता पेड़ करता है।
से हवाला देते हुए क्या बोवर और NPM के बीच का अंतर है?
NPM
project root
[node_modules] // default directory for dependencies
-> dependency A
-> dependency B
[node_modules]
-> dependency A
-> dependency C
[node_modules]
-> dependency B
[node_modules]
-> dependency A
-> dependency D
कुंज
project root
[bower_components] // default directory for dependencies
-> dependency A
-> dependency B // needs A
-> dependency C // needs B and D
-> dependency D
कुछ अपडेट हैं npm 3 Duplication and Deduplication, कृपया अधिक विवरण के लिए डॉक्टर को खोलें।
Yarn: के लिए एक नया पैकेज प्रबंधक JavaScript प्रकाशित द्वारा Facebookहाल ही में की तुलना में कुछ अधिक लाभ के साथ NPM। और यार्न के साथ, आप अभी भी पैकेज लाने के लिए दोनों NPMऔर Bowerरजिस्ट्री का उपयोग कर सकते हैं । यदि आपने पहले एक पैकेज स्थापित किया है, तो yarnएक कैश्ड प्रतिलिपि बनाता है जो सुविधा देता है offline package installs।
jspm: SystemJSयूनिवर्सल मॉड्यूल लोडर के लिए एक पैकेज मैनेजर है , जो डायनेमिक ES6मॉड्यूल लोडर के ऊपर बनाया गया है । यह नियमों के अपने सेट के साथ एक पूरी तरह से नया पैकेज प्रबंधक नहीं है, बल्कि यह मौजूदा पैकेज स्रोतों के शीर्ष पर काम करता है। बॉक्स से बाहर, यह GitHubऔर के साथ काम करता है npm। जैसा कि अधिकांश Bowerआधारित पैकेजों पर आधारित है GitHub, हम उन पैकेजों का उपयोग करके भी स्थापित कर सकते हैं jspm। इसकी एक रजिस्ट्री है जो आसान स्थापना के लिए आमतौर पर उपयोग किए जाने वाले फ्रंट-एंड पैकेजों की सूची देती है।
के बीच अलग देखें Bowerऔर jspm:
पैकेज मैनेजर: बोवर बनाम जेएसपीएम
2. मॉड्यूल लोडर / बंडलिंग
किसी भी पैमाने की अधिकांश परियोजनाओं में कई फाइलों के बीच उनका कोड विभाजित होगा। आप बस प्रत्येक फ़ाइल को एक व्यक्तिगत <script>टैग के साथ शामिल कर सकते हैं , हालांकि, <script>एक नया http कनेक्शन स्थापित करता है, और छोटी फ़ाइलों के लिए - जो प्रतिरूपता का एक लक्ष्य है - कनेक्शन सेट करने का समय डेटा स्थानांतरित करने की तुलना में काफी अधिक समय ले सकता है। जबकि स्क्रिप्ट डाउनलोड हो रही हैं, पृष्ठ पर कोई भी सामग्री नहीं बदली जा सकती।
- डाउनलोड समय की समस्या को बड़े पैमाने पर सरल मॉड्यूल के एक समूह को एक फ़ाइल में समाहित करके और इसे छोटा करके हल किया जा सकता है।
उदाहरण के लिए
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- प्रदर्शन हालांकि लचीलेपन की कीमत पर आता है। यदि आपके मॉड्यूल में अंतर-निर्भरता है, तो लचीलेपन की यह कमी एक शोस्टॉपर हो सकती है।
उदाहरण के लिए
<head>
<title>Skateboard</title>
<script src=“connectors/axle.js”></script>
<script src=“frames/board.js”></script>
<!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
<script src=“rolling-things/abstract-rolling-thing.js”></script>
<script src=“rolling-things/wheels/skateboard-wheel.js”></script>
<!-- but if skateboard-wheel also depends on ball-bearing -->
<!-- then having this script tag here could cause a problem -->
<script src=“rolling-things/ball-bearing.js”></script>
<!-- connect wheels to axle and axle to frame -->
<script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>
कंप्यूटर आप की तुलना में बेहतर कर सकते हैं, और यही कारण है कि आपको एक फ़ाइल में स्वचालित रूप से सब कुछ बंडल करने के लिए एक उपकरण का उपयोग करना चाहिए।
तब हमने सुना के बारे में RequireJS, Browserify, WebpackऔरSystemJS
RequireJS: एक JavaScriptफ़ाइल और मॉड्यूल लोडर है। यह ब्राउज़र के उपयोग के लिए अनुकूलित है, लेकिन इसका उपयोग अन्य जावास्क्रिप्ट वातावरणों में किया जा सकता है, जैसे Node।
जैसे: myModule.js
// package/lib is a dependency we require
define(["package/lib"], function (lib) {
// behavior for our module
function foo() {
lib.log( "hello world!" );
}
// export (expose) foo to other modules as foobar
return {
foobar: foo
}
});
में main.js, हम myModule.jsनिर्भरता के रूप में आयात कर सकते हैं और इसका उपयोग कर सकते हैं।
require(["package/myModule"], function(myModule) {
myModule.foobar();
});
और फिर हमारे में HTML, हम के साथ उपयोग करने के लिए संदर्भित कर सकते हैं RequireJS।
<script src=“app/require.js” data-main=“main.js” ></script>
CommonJSऔर अधिक पढ़ें और AMDआसानी से समझ पाने के लिए।
कॉमनजेएस, एएमडी और रिक्जेजेएस के बीच संबंध?
Browserify: CommonJSब्राउज़र में स्वरूपित मॉड्यूल के उपयोग की अनुमति देने के लिए निर्धारित किया गया है। नतीजतन, Browserifyएक मॉड्यूल बंडलर के रूप में एक मॉड्यूल लोडर नहीं है: Browserifyपूरी तरह से एक बिल्ड-टाइम टूल है, कोड का एक बंडल का उत्पादन करता है जिसे फिर क्लाइंट-साइड लोड किया जा सकता है।
एक निर्माण मशीन के साथ शुरू करें जिसमें नोड और एनपीएम स्थापित है, और पैकेज प्राप्त करें:
npm install -g –save-dev browserify
CommonJSप्रारूप में अपने मॉड्यूल लिखें
//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));
और खुश होने पर, बंडल करने के लिए आदेश जारी करें:
browserify entry-point.js -o bundle-name.js
ब्राउज़र को पुन: प्रवेश-बिंदु की सभी निर्भरता का पता लगाता है और उन्हें एक एकल फ़ाइल में संयोजित करता है:
<script src=”bundle-name.js”></script>
Webpack: यह आपकी सभी स्टैटिक एसेट्स, जिसमें JavaScriptइमेज, सीएसएस और बहुत कुछ शामिल हैं, एक सिंगल फाइल में बंडल करता है। यह आपको विभिन्न प्रकार के लोडर के माध्यम से फ़ाइलों को संसाधित करने में भी सक्षम बनाता है। आप अपने या मॉड्यूल सिंटैक्स के JavaScriptसाथ लिख सकते हैं । यह मूलभूत रूप से अधिक एकीकृत और राय वाले तरीके से बिल्ड समस्या पर हमला करता है। में आप का उपयोग और काम किया जाना रूपांतरण और प्लग इन की एक लंबी सूची। उस बॉक्स से पर्याप्त शक्ति प्रदान करता है जिसकी आपको आमतौर पर आवश्यकता नहीं है या बिल्कुल नहीं है ।CommonJSAMDBrowserifyGulp/GruntWebpackGruntGulp
बुनियादी उपयोग सरल से परे है। Browserify जैसे वेबपैक स्थापित करें:
npm install -g –save-dev webpack
और कमांड को एक एंट्री पॉइंट और एक आउटपुट फाइल पास करें:
webpack ./entry-point.js bundle-name.js
SystemJS: एक मॉड्यूल लोडर है जो आज इस्तेमाल किए गए किसी भी लोकप्रिय प्रारूप में रन टाइम पर मॉड्यूल आयात कर सकता है ( CommonJS, UMD, AMD, ES6)। यह ES6मॉड्यूल लोडर पॉलीफिल के ऊपर बनाया गया है और उपयोग किए जा रहे प्रारूप का पता लगाने और इसे उचित तरीके से संभालने के लिए पर्याप्त स्मार्ट है। SystemJSभी ES6 कोड (साथ transpile कर सकते हैं Babelया Traceur) या इस तरह के रूप में अन्य भाषाओं TypeScriptऔर CoffeeScriptप्लग इन का उपयोग।
जानना चाहते हैं कि क्या है node moduleऔर क्यों यह ब्राउज़र में अच्छी तरह से अनुकूलित नहीं है।
अधिक उपयोगी लेख:
क्यों jspmऔर SystemJSकैसे?
ES6प्रतिरूपकता के मुख्य लक्ष्यों में से एक यह है कि इंटरनेट ( Githubऔर npm, आदि) पर कहीं से भी किसी भी जावास्क्रिप्ट लाइब्रेरी को स्थापित करना और उसका उपयोग करना वास्तव में सरल है । केवल दो चीजों की जरूरत है:
- पुस्तकालय स्थापित करने के लिए एक एकल आदेश
- पुस्तकालय को आयात करने और इसका उपयोग करने के लिए कोड की एक एकल पंक्ति
तो jspm, आप इसे कर सकते हैं।
- आदेश के साथ लाइब्रेरी स्थापित करें:
jspm install jquery
- कोड की एक पंक्ति के साथ पुस्तकालय आयात करें, आपको HTML फ़ाइल के अंदर बाहरी संदर्भ की आवश्यकता नहीं है।
display.js
var $ = require('jquery');
$('body').append("I've imported jQuery!");
फिर आप System.config({ ... })अपने मॉड्यूल को आयात करने से पहले इन चीजों को कॉन्फ़िगर करते हैं । आम तौर पर जब चलाया जाता है jspm init, तो config.jsइस उद्देश्य के लिए नाम वाली एक फ़ाइल होगी ।
ये स्क्रिप्ट चलाने बनाने के लिए हम लोड करने की आवश्यकता है system.jsऔर config.jsHTML पृष्ठ पर। उसके बाद हम मॉड्यूल लोडर display.jsका उपयोग करके फ़ाइल को लोड करेंगे SystemJS।
index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import("scripts/display.js");
</script>
ने कहा: तुम भी उपयोग कर सकते हैं npmके साथ Webpackके रूप में कोणीय 2 इसे लागू किया गया है। चूंकि jspmइसे एकीकृत करने के लिए विकसित किया गया था SystemJSऔर यह मौजूदा npmस्रोत के शीर्ष पर काम करता है , इसलिए आपका जवाब आपके ऊपर है।
3. टास्क रनर
टास्क रनर और बिल्ड टूल मुख्य रूप से कमांड-लाइन टूल हैं। हमें उनका उपयोग करने की आवश्यकता क्यों है: एक शब्द में: स्वचालन । कम काम जो आपको करना होता है जब वह दोहरावदार काम करता है जैसे कि मिनिमाइजेशन, कंपटीशन, यूनिट टेस्टिंग, लाइनिंग जो पहले कई बार हमें कमांड लाइन या मैन्युअल रूप से करने के लिए खर्च होते हैं।
Grunt: आप अपने विकास के वातावरण के लिए स्वचालन को पूर्व-प्रक्रिया कोड में बना सकते हैं या एक कॉन्फ़िगर फ़ाइल के साथ स्क्रिप्ट बना सकते हैं और एक जटिल कार्य को संभालना बहुत मुश्किल लगता है। पिछले कुछ वर्षों में लोकप्रिय है।
प्रत्येक कार्य में Gruntअलग-अलग प्लगइन कॉन्फ़िगरेशन की एक सरणी होती है, जो कि एक के बाद एक कड़ाई से स्वतंत्र, और अनुक्रमिक फैशन में निष्पादित होती है।
grunt.initConfig({
clean: {
src: ['build/app.js', 'build/vendor.js']
},
copy: {
files: [{
src: 'build/app.js',
dest: 'build/dist/app.js'
}]
}
concat: {
'build/app.js': ['build/vendors.js', 'build/app.js']
}
// ... other task configurations ...
});
grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);
Gulp: स्वचालन की तरह Gruntलेकिन विन्यास के बजाय, आप JavaScriptधाराओं के साथ लिख सकते हैं जैसे कि यह एक नोड अनुप्रयोग है। इन दिनों को प्राथमिकता दें।
यह एक Gulpनमूना कार्य घोषणा है।
//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
//declare the task
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
और देखें: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri
4. मचान उपकरण
Slush and Yeoman: आप उनके साथ स्टार्टर प्रोजेक्ट बना सकते हैं। उदाहरण के लिए, आप HTML और SCSS के साथ एक प्रोटोटाइप बनाने की योजना बना रहे हैं, फिर मैन्युअल रूप से कुछ फ़ोल्डर जैसे कि scss, css, img, फ़ॉन्ट्स बनाएं। आप बस yeomanएक साधारण स्क्रिप्ट स्थापित और चला सकते हैं । फिर यहां आपके लिए सब कुछ।
अधिक जानकारी प्राप्त करें यहाँ ।
npm install -g yo
npm install --global generator-h5bp
yo h5bp
और देखें: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express
मेरा उत्तर वास्तव में प्रश्न की सामग्री से मेल नहीं खाता है, लेकिन जब मैं Google पर इन ज्ञान की खोज कर रहा हूं, तो मैं हमेशा प्रश्न को शीर्ष पर देखता हूं, इसलिए मैंने सारांश में इसका उत्तर देने का फैसला किया। आशा है कि आप लोगों को यह मददगार लगा होगा।