อัปเดตตุลาคม 2561
หากคุณยังไม่แน่ใจเกี่ยวกับ Front-end dev สามารถเข้าไปดูแหล่งข้อมูลที่ยอดเยี่ยมได้ที่นี่
https://github.com/kamranahmedse/developer-roadmap
อัปเดตมิถุนายน 2561
การเรียนรู้ JavaScript สมัยใหม่นั้นยากถ้าคุณไม่ได้อยู่ที่นั่นตั้งแต่เริ่มต้น หากคุณเป็นผู้มาใหม่อย่าลืมตรวจสอบข้อความนี้ที่ยอดเยี่ยมเพื่อให้มีภาพรวมที่ดีขึ้น
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
อัปเดตกรกฎาคม 2560
เมื่อเร็ว ๆ นี้ฉันพบคู่มือที่ครอบคลุมจริงๆจากทีม Grab เกี่ยวกับวิธีการพัฒนาส่วนหน้าในปี 2560 คุณสามารถตรวจสอบได้จากด้านล่าง
https://github.com/grab/front-end-guide
ฉันเคยค้นหามันมาระยะหนึ่งแล้วเนื่องจากมีเครื่องมือมากมายที่นั่นและแต่ละอันมีประโยชน์ต่อเราในด้านที่แตกต่างกัน Browserify, Webpack, jspm, Grunt and Gulpชุมชนมีการแบ่งออกทั่วเครื่องมือเช่น คุณอาจได้ยินเกี่ยวกับYeoman or Slushนอกจากนี้คุณอาจได้ยินเกี่ยวกับนั่นไม่ใช่ปัญหาจริงๆมันเป็นเพียงความสับสนสำหรับทุกคนที่พยายามเข้าใจเส้นทางที่ชัดเจนไปข้างหน้า
อย่างไรก็ตามฉันต้องการมีส่วนร่วม
1. ผู้จัดการแพคเกจ
ผู้จัดการแพคเกจทำให้การติดตั้งและอัปเดตการอ้างอิงโครงการง่ายขึ้นนั่นคือไลบรารีเช่น: jQuery, Bootstrapและอื่น ๆ ทุกสิ่งที่ใช้บนไซต์ของคุณ
เรียกดูเว็บไซต์ห้องสมุดทั้งหมดดาวน์โหลดและแกะที่เก็บถาวรคัดลอกไฟล์ลงในโครงการ - ทั้งหมดนี้จะถูกแทนที่ด้วยคำสั่งไม่กี่ใน terminal
NPMย่อมาจาก: Node JS package managerช่วยให้คุณจัดการไลบรารีทั้งหมดที่ซอฟต์แวร์ของคุณเชื่อถือได้ คุณจะกำหนดความต้องการของคุณในไฟล์ชื่อpackage.jsonและเรียกใช้npm installในบรรทัดคำสั่ง ... จากนั้นแบงกแพคเกจของคุณจะถูกดาวน์โหลดและพร้อมใช้งาน สามารถใช้ได้ทั้งกับfront-end and back-endห้องสมุด
Bower: สำหรับการจัดการแพ็คเกจ front-end แนวคิดนี้เหมือนกันกับ NPM ไลบรารีทั้งหมดของคุณจะถูกเก็บไว้ในไฟล์ชื่อbower.jsonแล้วเรียกใช้bower installในบรรทัดคำสั่ง
ความแตกต่างที่ใหญ่ที่สุดระหว่างBowerและNPMคือ NPM ทำแผนผังการพึ่งพาซ้อนกันในขณะที่ Bower ต้องการต้นไม้พึ่งพาแบบแบนดังนี้
ข้อความจากBower และ 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นี้มีข้อได้เปรียบมากขึ้นเมื่อเทียบกับ และด้วย Yarn คุณยังสามารถใช้ทั้งสองอย่างNPMและBowerรีจีสตรีเพื่อดึงแพ็คเกจ หากคุณได้ติดตั้งแพคเกจก่อนสร้างสำเนาแคชที่อำนวยความสะดวกyarnoffline package installs
jspm: เป็นผู้จัดการแพ็กเกจสำหรับSystemJSโหลดโมดูลสากลที่สร้างขึ้นจากES6โหลดเดอร์โมดูลแบบไดนามิก ไม่ใช่ผู้จัดการแพ็กเกจใหม่ที่มีชุดกฎของตัวเอง แต่ทำงานได้ดีกว่าแหล่งที่มาของแพ็คเกจ ออกจากกล่องจะทำงานร่วมกับและGitHub npmเนื่องจากBowerแพ็คเกจส่วนใหญ่นั้นใช้พื้นฐานGitHubเราจึงสามารถติดตั้งแพ็คเกจเหล่านั้นได้jspmเช่นกัน มีรีจิสตรีที่แสดงรายการแพ็คเกจส่วนใหญ่ที่ใช้กันทั่วไปเพื่อการติดตั้งที่ง่ายขึ้น
ดูความแตกต่างระหว่างBowerและjspm:
Package Manager: Bower vs jspm
2. โมดูล Loader / Bundling
โครงการส่วนใหญ่ในทุกขนาดจะมีการแบ่งรหัสระหว่างไฟล์จำนวนหนึ่ง คุณสามารถรวมแต่ละไฟล์ด้วย<script>แท็กแต่ละรายการอย่างไรก็ตาม<script>สร้างการเชื่อมต่อ http ใหม่และสำหรับไฟล์ขนาดเล็ก - ซึ่งเป็นเป้าหมายของ modularity - เวลาในการตั้งค่าการเชื่อมต่ออาจใช้เวลานานกว่าการถ่ายโอนข้อมูลอย่างมีนัยสำคัญ ในขณะที่สคริปต์กำลังดาวน์โหลดจะไม่มีการเปลี่ยนแปลงเนื้อหาในหน้า
- ปัญหาของเวลาในการดาวน์โหลดสามารถแก้ไขได้โดยการต่อกลุ่มโมดูลอย่างง่ายเข้าด้วยกันเป็นไฟล์เดียวและลดขนาดไฟล์ลง
เช่น
<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โหลดไฟล์และโมดูล มันเป็นที่เหมาะสำหรับการใช้งานในเบราว์เซอร์ แต่ก็สามารถนำมาใช้ในสภาพแวดล้อม 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();
});
และจากนั้นในของเราเราสามารถอ้างที่จะใช้กับHTMLRequireJS
<script src=“app/require.js” data-main=“main.js” ></script>
อ่านเพิ่มเติมเกี่ยวกับCommonJSและAMDทำความเข้าใจได้ง่าย
ความสัมพันธ์ระหว่าง CommonJS, AMD และ RequireJS?
Browserify: กำหนดให้ใช้งานCommonJSโมดูลที่จัดรูปแบบในเบราว์เซอร์ ดังนั้นBrowserifyเครื่องมือโหลดมอดูลไม่มากเท่าโมดูลบันเดอร์: Browserifyเป็นเครื่องมือ build-time ทั้งหมดสร้างมัดของรหัสซึ่งสามารถโหลดฝั่งไคลเอ็นต์ได้
เริ่มต้นด้วยเครื่องสร้างที่ติดตั้งโหนด & npm และรับแพ็คเกจ:
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
Browserify ค้นหาการอ้างอิงจุดเข้าใช้งานทั้งหมดซ้ำและรวมเข้าด้วยกันเป็นไฟล์เดียว:
<script src=”bundle-name.js”></script>
Webpack: มันรวมสินทรัพย์สแตติกทั้งหมดของคุณรวมถึงJavaScriptรูปภาพ, CSS และอื่น ๆ ไว้ในไฟล์เดียว นอกจากนี้ยังช่วยให้คุณสามารถประมวลผลไฟล์ผ่านโหลดเดอร์ประเภทต่างๆ คุณสามารถเขียนJavaScriptด้วยCommonJSหรือAMDโมดูลไวยากรณ์ของคุณ มันโจมตีปัญหาการสร้างในลักษณะพื้นฐานแบบบูรณาการและความเห็น ในBrowserifyคุณใช้Gulp/Gruntและรายการการแปลงและปลั๊กอินที่มีความยาวเพื่อให้งานเสร็จสมบูรณ์ Webpackให้พลังงานเพียงพอที่จะออกจากกล่องที่คุณไม่ต้องการGruntหรือGulpโดยทั่วไป
การใช้งานขั้นพื้นฐานนั้นง่ายกว่าที่คิด ติดตั้ง Webpack เช่น Browserify:
npm install -g –save-dev webpack
และส่งคำสั่งให้เป็นจุดเข้าใช้งานและไฟล์เอาต์พุต:
webpack ./entry-point.js bundle-name.js
SystemJS: เป็นโหลดเดอร์โมดูลที่สามารถอิมพอร์ตโมดูล ณ รันไทม์ในรูปแบบที่นิยมใด ๆ ที่ใช้ในปัจจุบัน ( CommonJS, UMD, AMD, ES6) มันถูกสร้างขึ้นที่ด้านบนของES6โมดูลตัวโหลดโพลีฟิลและฉลาดพอที่จะตรวจจับรูปแบบที่ใช้และจัดการกับมันอย่างเหมาะสม SystemJSยังสามารถ transpile รหัส ES6 (ด้วยBabelหรือTraceur) หรือภาษาอื่น ๆ เช่นTypeScriptและการCoffeeScriptใช้ปลั๊กอิน
ต้องการทราบว่าอะไรคือnode moduleสาเหตุใดและทำไมจึงไม่ปรับให้เข้ากับเบราว์เซอร์
บทความที่เป็นประโยชน์เพิ่มเติม:
ทำไมjspmและSystemJS?
หนึ่งในเป้าหมายหลักของการES6แยกส่วนคือการทำให้ง่ายต่อการติดตั้งและใช้ไลบรารี Javascript จากที่ใดก็ได้บนอินเทอร์เน็ต ( 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.jsในหน้า HTML หลังจากนั้นเราจะโหลด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เป็น Angular 2 ได้ใช้มัน ตั้งแต่jspmได้รับการพัฒนาเพื่อรวมเข้ากับSystemJSและทำงานได้เหนือnpmแหล่งที่มีอยู่ดังนั้นคำตอบของคุณขึ้นอยู่กับคุณ
3. นักวิ่ง
นักวิ่งงานและเครื่องมือสร้างเป็นเครื่องมือบรรทัดคำสั่งเป็นหลัก ทำไมเราต้องใช้พวกเขาในหนึ่งคำ: อัตโนมัติ งานน้อยลงที่คุณต้องทำเมื่อดำเนินงานซ้ำ ๆ เช่นminification การรวบรวมการทดสอบหน่วย lintingซึ่งก่อนหน้านี้เรามีค่าใช้จ่ายจำนวนมากที่จะทำกับบรรทัดคำสั่งหรือแม้กระทั่งด้วยตนเอง
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 ฉันมักจะเห็นคำถามที่ด้านบนเพื่อที่ฉันตัดสินใจที่จะตอบโดยสรุป หวังว่าพวกคุณจะพบว่ามันมีประโยชน์