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, Bootstrap
dll - 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.
NPM
kependekan: Node JS package manager
membantu Anda mengelola semua perpustakaan yang diandalkan oleh perangkat lunak Anda. Anda akan menentukan kebutuhan Anda dalam file yang dipanggil package.json
dan dijalankan npm install
di baris perintah ... lalu BANG, paket Anda diunduh dan siap digunakan. Dapat digunakan baik untuk front-end and back-end
perpustakaan.
Bower
: untuk manajemen paket front-end, konsepnya sama dengan NPM. Semua perpustakaan Anda disimpan dalam file bernama bower.json
dan kemudian jalankan bower install
di baris perintah.
Perbedaan terbesar antara Bower
dan NPM
adalah 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 Facebook
baru-baru ini dengan beberapa kelebihan dibandingkan dengan NPM
. Dan dengan Benang, Anda masih bisa menggunakan keduanya NPM
dan Bower
mendaftar untuk mengambil paket. Jika Anda telah menginstal paket sebelumnya, yarn
buat salinan dalam tembolok yang memudahkan offline package installs
.
jspm
: adalah manajer paket untuk SystemJS
pemuat modul universal, dibangun di atas ES6
pemuat 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 GitHub
dan npm
. Karena sebagian besar Bower
paket berbasiskan GitHub
, kita dapat menginstal paket-paket itu jspm
juga. Ini memiliki registri yang mencantumkan sebagian besar paket front-end yang umum digunakan untuk instalasi yang lebih mudah.
Lihat perbedaan antara Bower
dan 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
, Webpack
danSystemJS
RequireJS
: adalah JavaScript
pemuat 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.js
sebagai 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 CommonJS
dan AMD
untuk mendapatkan pemahaman dengan mudah.
Hubungan antara CommonJS, AMD dan RequireJS?
Browserify
: ditetapkan untuk memungkinkan penggunaan CommonJS
modul yang diformat di browser. Akibatnya, Browserify
tidak sebanyak pemuat modul sebagai bundler modul: Browserify
sepenuhnya 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 CommonJS
format
//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 JavaScript
dengan CommonJS
atau AMD
modul Anda. Ini menyerang masalah pembangunan dengan cara yang secara fundamental lebih terintegrasi dan berpendapat. Dalam Browserify
Anda menggunakan Gulp/Grunt
dan daftar panjang transformasi dan plugin untuk menyelesaikan pekerjaan. Webpack
menawarkan daya yang cukup di luar kotak yang biasanya tidak Anda butuhkan Grunt
atau tidak Gulp
sama 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 ES6
polyfill loader modul dan cukup pintar untuk mendeteksi format yang digunakan dan menanganinya dengan tepat. SystemJS
juga dapat mengubah kode ES6 (dengan Babel
atau Traceur
) atau bahasa lain seperti TypeScript
dan CoffeeScript
menggunakan plugin.
Ingin tahu apa itu node module
dan mengapa itu tidak disesuaikan dengan baik di dalam browser.
Artikel yang lebih bermanfaat:
Mengapa jspm
dan SystemJS
?
Salah satu tujuan utama dari ES6
modularitas 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.js
untuk tujuan ini.
Untuk membuat skrip ini berjalan, kita perlu memuat system.js
dan config.js
pada halaman HTML. Setelah itu kita akan memuat display.js
file menggunakan SystemJS
modul 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 npm
dengan Webpack
karena Angular 2 telah menerapkannya. Karena jspm
dikembangkan untuk diintegrasikan dengan SystemJS
dan berfungsi di atas npm
sumber 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 Grunt
adalah 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 Grunt
tetapi alih-alih konfigurasi, Anda dapat menulis JavaScript
dengan aliran seperti itu adalah aplikasi simpul. Lebih suka hari ini.
Ini adalah Gulp
deklarasi 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 yeoman
dan 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.