Perbarui Oktober 2018
Jika Anda masih tidak yakin tentang dev Front-end, dapat melihat cepat ke sumber yang bagus di sini.
https://github.com/kamranahmedse/developer-roadmap
Perbarui Juni 2018
Mempelajari JavaScript modern itu sulit jika Anda belum pernah ke sana sejak awal. Jika Anda pendatang baru, ingatlah untuk memeriksa tulisan yang luar biasa ini untuk mendapatkan ikhtisar yang lebih baik.
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
Perbarui Juli 2017
Baru-baru ini saya menemukan panduan yang sangat komprehensif dari tim Grab tentang cara mendekati pengembangan front-end pada 2017. Anda dapat memeriksanya seperti di bawah ini.
https://github.com/grab/front-end-guide
Saya juga telah mencari ini cukup lama karena ada banyak alat di luar sana dan masing-masing bermanfaat bagi kita dalam aspek yang berbeda. Komunitas dibagi di antara alat-alat seperti Browserify, Webpack, jspm, Grunt and Gulp. Anda mungkin juga mendengar tentang Yeoman or Slush. Itu tidak benar-benar masalah, itu hanya membingungkan bagi semua orang yang mencoba memahami jalan yang jelas ke depan.
Lagi pula, saya ingin berkontribusi sesuatu.
1. Pengelola Paket
Manajer paket menyederhanakan menginstal dan memperbarui dependensi proyek, yang merupakan perpustakaan seperti:, jQuery, Bootstrapdll - segala sesuatu yang digunakan di situs Anda dan tidak ditulis oleh Anda.
Menjelajahi semua situs web perpustakaan, mengunduh dan membongkar arsip, menyalin file ke dalam proyek - semua ini diganti dengan beberapa perintah di terminal.
NPMkependekan: Node JS package managermembantu Anda mengelola semua perpustakaan yang diandalkan oleh perangkat lunak Anda. Anda akan menentukan kebutuhan Anda dalam file yang dipanggil package.jsondan dijalankan npm installdi baris perintah ... lalu BANG, paket Anda diunduh dan siap digunakan. Dapat digunakan baik untuk front-end and back-endperpustakaan.
Bower: untuk manajemen paket front-end, konsepnya sama dengan NPM. Semua perpustakaan Anda disimpan dalam file bernama bower.jsondan kemudian jalankan bower installdi baris perintah.
Perbedaan terbesar antara Bowerdan NPMadalah bahwa NPM tidak bersarang pohon ketergantungan sementara Bower membutuhkan pohon ketergantungan datar seperti di bawah ini.
Mengutip dari Apa perbedaan antara Bower dan 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
Punjung
project root
[bower_components] // default directory for dependencies
-> dependency A
-> dependency B // needs A
-> dependency C // needs B and D
-> dependency D
Ada beberapa pembaruan pada npm 3 Duplication and Deduplication, silakan buka dokumen untuk detail lebih lanjut.
Yarn: Seorang manajer paket baru untuk JavaScript diterbitkan oleh Facebookbaru-baru ini dengan beberapa kelebihan dibandingkan dengan NPM. Dan dengan Benang, Anda masih bisa menggunakan keduanya NPMdan Bowermendaftar untuk mengambil paket. Jika Anda telah menginstal paket sebelumnya, yarnbuat salinan dalam tembolok yang memudahkan offline package installs.
jspm: adalah manajer paket untuk SystemJSpemuat modul universal, dibangun di atas ES6pemuat modul dinamis . Ini bukan manajer paket yang sama sekali baru dengan seperangkat aturannya sendiri, melainkan bekerja di atas sumber paket yang ada. Di luar kotak, ia bekerja dengan GitHubdan npm. Karena sebagian besar Bowerpaket berbasiskan GitHub, kita dapat menginstal paket-paket itu jspmjuga. Ini memiliki registri yang mencantumkan sebagian besar paket front-end yang umum digunakan untuk instalasi yang lebih mudah.
Lihat perbedaan antara Bowerdan jspm:
Package Manager: Bower vs jspm
2. Modul Loader / Bundling
Sebagian besar proyek dalam skala apa pun akan memecah kode di antara sejumlah file. Anda hanya dapat memasukkan setiap file dengan <script>tag individual , namun, <script>membuat koneksi http baru, dan untuk file kecil - yang merupakan tujuan modularitas - waktu untuk mengatur koneksi dapat memakan waktu lebih lama secara signifikan daripada mentransfer data. Saat skrip sedang mengunduh, tidak ada konten yang dapat diubah pada halaman.
- Masalah waktu pengunduhan sebagian besar dapat diselesaikan dengan menggabungkan sekelompok modul sederhana menjadi satu file, dan memperkecilnya.
Misalnya
<head>
<title>Wagon</title>
<script src=“build/wagon-bundle.js”></script>
</head>
- Kinerja datang dengan mengorbankan fleksibilitas. Jika modul Anda memiliki saling ketergantungan, kurangnya fleksibilitas ini dapat menjadi penghenti.
Misalnya
<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>
Komputer dapat melakukan itu lebih baik daripada yang Anda bisa, dan itulah sebabnya Anda harus menggunakan alat untuk secara otomatis menggabungkan segala sesuatu menjadi satu file.
Lalu kami mendengar tentang RequireJS, Browserify, WebpackdanSystemJS
RequireJS: adalah JavaScriptpemuat file dan modul. Hal ini dioptimalkan untuk digunakan dalam browser, tetapi dapat digunakan dalam lingkungan lainnya JavaScript, seperti Node.
Misalnya: 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
}
});
Di main.js, kita dapat mengimpor myModule.jssebagai dependensi dan menggunakannya.
require(["package/myModule"], function(myModule) {
myModule.foobar();
});
Dan kemudian di HTML, kita dapat merujuk untuk digunakan bersama RequireJS.
<script src=“app/require.js” data-main=“main.js” ></script>
Baca lebih lanjut tentang CommonJSdan AMDuntuk mendapatkan pemahaman dengan mudah.
Hubungan antara CommonJS, AMD dan RequireJS?
Browserify: ditetapkan untuk memungkinkan penggunaan CommonJSmodul yang diformat di browser. Akibatnya, Browserifytidak sebanyak pemuat modul sebagai bundler modul: Browserifysepenuhnya alat build-time, menghasilkan bundel kode yang kemudian dapat dimuat di sisi klien.
Mulai dengan mesin build yang simpul & npm terpasang, dan dapatkan paketnya:
npm install -g –save-dev browserify
Tulis modul Anda dalam CommonJSformat
//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));
Dan ketika senang, keluarkan perintah untuk bundel:
browserify entry-point.js -o bundle-name.js
Browserify secara rekursif menemukan semua dependensi entry-point dan mengumpulkannya menjadi satu file:
<script src=”bundle-name.js”></script>
Webpack: Ini mengelompokkan semua aset statis Anda, termasuk JavaScript, gambar, CSS, dan lainnya, menjadi satu file. Ini juga memungkinkan Anda untuk memproses file melalui berbagai jenis loader. Anda dapat menulis sintaksis JavaScriptdengan CommonJSatau AMDmodul Anda. Ini menyerang masalah pembangunan dengan cara yang secara fundamental lebih terintegrasi dan berpendapat. Dalam BrowserifyAnda menggunakan Gulp/Gruntdan daftar panjang transformasi dan plugin untuk menyelesaikan pekerjaan. Webpackmenawarkan daya yang cukup di luar kotak yang biasanya tidak Anda butuhkan Gruntatau tidak Gulpsama sekali.
Penggunaan dasar sangat sederhana. Instal Webpack seperti Browserify:
npm install -g –save-dev webpack
Dan berikan perintah titik masuk dan file output:
webpack ./entry-point.js bundle-name.js
SystemJS: adalah pemuat modul yang dapat mengimpor modul pada waktu berjalan dalam salah satu format populer yang digunakan hari ini ( CommonJS, UMD, AMD, ES6). Itu dibangun di atas ES6polyfill loader modul dan cukup pintar untuk mendeteksi format yang digunakan dan menanganinya dengan tepat. SystemJSjuga dapat mengubah kode ES6 (dengan Babelatau Traceur) atau bahasa lain seperti TypeScriptdan CoffeeScriptmenggunakan plugin.
Ingin tahu apa itu node moduledan mengapa itu tidak disesuaikan dengan baik di dalam browser.
Artikel yang lebih bermanfaat:
Mengapa jspmdan SystemJS?
Salah satu tujuan utama dari ES6modularitas adalah untuk membuatnya sangat sederhana untuk menginstal dan menggunakan perpustakaan Javascript dari mana saja di Internet ( Github, npm, dll). Hanya dua hal yang dibutuhkan:
- Satu perintah untuk menginstal perpustakaan
- Satu baris kode untuk mengimpor perpustakaan dan menggunakannya
Jadi dengan jspm, Anda bisa melakukannya.
- Instal perpustakaan dengan perintah:
jspm install jquery
- Impor perpustakaan dengan satu baris kode, tidak perlu referensi eksternal di dalam file HTML Anda.
display.js
var $ = require('jquery');
$('body').append("I've imported jQuery!");
Kemudian Anda mengkonfigurasi hal-hal ini di dalam System.config({ ... })sebelum mengimpor modul Anda. Biasanya ketika dijalankan jspm init, akan ada file bernama config.jsuntuk tujuan ini.
Untuk membuat skrip ini berjalan, kita perlu memuat system.jsdan config.jspada halaman HTML. Setelah itu kita akan memuat display.jsfile menggunakan SystemJSmodul loader.
index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import("scripts/display.js");
</script>
Tercatat: Anda juga dapat menggunakan npmdengan Webpackkarena Angular 2 telah menerapkannya. Karena jspmdikembangkan untuk diintegrasikan dengan SystemJSdan berfungsi di atas npmsumber yang ada , maka jawaban Anda terserah Anda.
3. Pelari tugas
Pelari tugas dan alat bangun terutama adalah alat baris perintah. Mengapa kita perlu menggunakannya: Dalam satu kata: otomatisasi . Semakin sedikit pekerjaan yang harus Anda lakukan ketika melakukan tugas yang berulang seperti minifikasi, kompilasi, pengujian unit, linting yang sebelumnya menghabiskan banyak waktu dengan baris perintah atau bahkan secara manual.
Grunt: Anda dapat membuat otomatisasi untuk lingkungan pengembangan Anda untuk pra-proses kode atau membuat skrip build dengan file konfigurasi dan tampaknya sangat sulit untuk menangani tugas yang kompleks. Populer dalam beberapa tahun terakhir.
Setiap tugas dalam Gruntadalah susunan konfigurasi plugin yang berbeda, yang hanya dijalankan satu demi satu, secara independen, dan berurutan.
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: Otomasi persis seperti Grunttetapi alih-alih konfigurasi, Anda dapat menulis JavaScriptdengan aliran seperti itu adalah aplikasi simpul. Lebih suka hari ini.
Ini adalah Gulpdeklarasi tugas sampel.
//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);
});
Lihat lebih lanjut: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri
4. Alat perancah
Slush and Yeoman: Anda dapat membuat proyek pemula dengan mereka. Misalnya, Anda berencana untuk membuat prototipe dengan HTML dan SCSS, daripada membuat folder seperti scss, css, img, font secara manual. Anda cukup menginstal yeomandan menjalankan skrip sederhana. Maka semuanya ada di sini untuk Anda.
Temukan lebih lanjut di sini .
npm install -g yo
npm install --global generator-h5bp
yo h5bp
Lihat lebih lanjut: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express
Jawaban saya tidak benar-benar cocok dengan konten pertanyaan tetapi ketika saya mencari pengetahuan ini di Google, saya selalu melihat pertanyaan di atas sehingga saya memutuskan untuk menjawabnya secara ringkas. Semoga kalian bermanfaat.