යාවත්කාලීන කිරීම 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. පැකේජ කළමනාකරු
- එන්පීඑම්
- බෝවර්
- අතර වෙනස
BowerසහNPM
- නූල්
- jspm
- 2. මොඩියුලය පූරණය / බන්ධනය
- RequireJS
- බ්‍රව්සර කරන්න
- වෙබ් පැක්
- SystemJS
- 3. කාර්ය ධාවකය
- 4. පලංචියේ මෙවලම්
1. පැකේජ කළමනාකරු
පැකේජ කළමණාකරුවන් පුස්තකාල වැනි ව්‍යාපෘති පරායත්තයන් ස්ථාපනය කිරීම සහ යාවත්කාලීන කිරීම සරල කරයි: jQuery, Bootstrap ආදිය - ඔබේ වෙබ් අඩවියේ භාවිතා වන සහ ඔබ විසින් ලියන ලද සියල්ල නොවේ.
සියලුම පුස්තකාල වෙබ් අඩවි ගවේෂණය කිරීම, ලේඛනාගාරය බාගත කිරීම සහ ඉවත් කිරීම, ව්‍යාපෘති වෙත ලිපිගොනු පිටපත් කිරීම - මේ සියල්ල පර්යන්තයේ විධාන කිහිපයක් සමඟ ප්‍රතිස්ථාපනය වේ.
එය නියෝජනය කරන්නේ: Node JS package managerඔබේ මෘදුකාංගය රඳා පවතින සියලුම පුස්තකාල කළමනාකරණය කිරීමට ඔබට උපකාරී වේ. ඔබ ඔබේ අවශ්‍යතා විධාන රේඛාව තුළ package.jsonක්‍රියාත්මක npm installකර ක්‍රියාත්මක කරනු ඇත ... ඉන්පසු BANG, ඔබේ පැකේජ බාගත කර භාවිතා කිරීමට සූදානම්ය. එය front-end and back-endපුස්තකාල සඳහා දෙකම භාවිතා කළ හැකිය .
ඉදිරිපස ඇසුරුම් කළමනාකරණය සඳහා, සංකල්පය එන්පීඑම් සමඟ සමාන වේ. ඔබගේ සියලු පුස්තකාල නම් ගොනුව තුල ගබඩා කර bower.jsonගියත් පසුව bower installඑම විධාන රේඛාවේ.
බෝවර් ඔවුන්ගේ පරිශීලකයාට එන්පීඑම් හෝ නූල් වෙත සංක්‍රමණය වීමට නිර්දේශ කරයි. කරුණාකර ප්‍රවේශම් වන්න
Bowerසහ අතර වෙනසNPM
Bowerසහ අතර ඇති විශාලතම වෙනසNPM NPM පිලිතුරු කැදැලි පරායත්ත වෘක්ෂය බව බවර් පහත ලෙස පැතලි පරායත්ත ගසක් අවශ්ය අතර වේ.
උපුටා ගැනීම Bower සහ 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, කරුණාකර වැඩි විස්තර සඳහා ලේඛනය විවෘත කරන්න.
සසඳන විට තවත් වාසි කිහිපයක් සමඟ මෑතකදී JavaScript ප්‍රකාශයට පත් කරන ලද නව පැකේජ කළමනාකරුවෙක් . නූල් සමඟ, ඔබට තවමත් පැකේජය ලබා ගැනීම සඳහා දෙකම සහ රෙජිස්ට්රි භාවිතා කළ හැකිය . ඔබ මීට පෙර පැකේජයක් ස්ථාපනය කර ඇත්නම්, හැඹිලි පිටපතක් සාදයි .FacebookNPMNPMBoweryarnoffline package installs
JSPM යනු SystemJSවිශ්වීය මොඩියුල පැටවුම සඳහා වන පැකේජ කළමණාකරුවෙකි , එය ගතික ES6මොඩියුල පැටවුමට ඉහළින් ඉදිකර ඇත . එය සම්පූර්ණයෙන්ම නව පැකේජ කළමණාකරුවෙකු නොවන අතර එය තමන්ගේම නීති මාලාවක් ඇත, ඒ වෙනුවට එය දැනට පවතින පැකේජ ප්‍රභවයන් මත ක්‍රියාත්මක වේ. කොටුවෙන් පිටත, එය සමඟ GitHubසහ npm. බොහෝ Bowerපදනම් වූ පැකේජ පදනම් වී ඇති හෙයින් GitHub, අපට එම පැකේජ ද භාවිතා jspmකර ස්ථාපනය කළ හැකිය . පහසු ස්ථාපනය සඳහා බහුලව භාවිතා වන ඉදිරිපස පැකේජ ලැයිස්තුගත කරන ලේඛනයක් එහි ඇත.
Bowerසහ අතර ඇති වෙනස බලන්න jspm:
පැකේජ කළමනාකරු: බෝවර් එදිරිව 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
එය 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පහසුවෙන් අවබෝධය ලබා ගන්න.
CommonJS, AMD සහ RequireJS අතර සම්බන්ධතාවය?
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>
එය ඔබගේ සියලු ස්ථිතික වත්කම්, JavaScriptරූප, CSS සහ තවත් දේ එක් ගොනුවකට එක් කරයි. විවිධ වර්ගයේ පැටවුම් හරහා ගොනු සැකසීමටද එය ඔබට හැකියාව ලබා දෙයි. ඔබ ඔබේ ලිවීමට හැකි JavaScriptසමග CommonJSහෝ AMDමොඩියුල කාරක රීති. එය ගොඩනැගීමේ ගැටලුවට මූලික වශයෙන් වඩා ඒකාබද්ධ හා මතවාදී ආකාරයකින් පහර දෙයි. දී Browserifyඔබ භාවිතා Gulp/Gruntසහ අදාළ කටයුත්ත ඉටු කිරීමට වනාහී සහ Plugins දිගු ලැයිස්තුවක්. Webpackඔබට සාමාන්‍යයෙන් අවශ්ය නොවන Gruntහෝ කිසිසේත් ප්‍රමාණවත් නොවන බලයක් ලබා දෙයි Gulp.
මූලික භාවිතය සරල නැත. Browserify වැනි වෙබ් පැක් ස්ථාපනය කරන්න:
npm install -g –save-dev webpack
තවද විධානයට පිවිසුම් ස්ථානයක් සහ ප්‍රතිදාන ගොනුවක් ලබා දෙන්න:
webpack ./entry-point.js bundle-name.js
එය අද ( ) භාවිතා කරන ඕනෑම ජනප්‍රිය ආකෘතියක ධාවන වේලාවේදී මොඩියුල ආනයනය කළ හැකි මොඩියුල පැටවුමකි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.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']);
ස්වයංක්‍රීයකරණය හරියට 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. පලංචියේ මෙවලම්
ස්ලෂ් සහ යේමන්
ඔබට ඔවුන් සමඟ ආරම්භක ව්‍යාපෘති නිර්මාණය කළ හැකිය. උදාහරණයක් ලෙස, ඔබ HTML සහ SCSS සමඟ මූලාකෘතියක් තැනීමට සැලසුම් කර ඇත, පසුව scss, css, img, fonts වැනි ෆෝල්ඩරයක් අතින් සාදන්න. ඔබට ස්ථාපනය කළ හැකිය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
මගේ පිළිතුර ප්‍රශ්නයේ අන්තර්ගතයට නොගැලපෙන නමුත් මම ගූගල්හි මෙම දැනුම සොයන විට, මම සෑම විටම ඉහළින්ම දකින ප්රශ්නය නිසා සාරාංශයක් ලෙස පිළිතුරු දීමට මම තීරණය කළෙමි. මම හිතනවා ඔයාලට ඒක ප්‍රයෝජනවත් වෙයි කියලා.
ඔබ මෙම ලිපියට කැමති නම්, ඔබට මගේ බ්ලොග් අඩවියේ trungk18.com හි වැඩිදුර කියවිය හැකිය . පිවිසීමට ස්තූතියි :)