NPM vs Bower vs Browserify vs Gulp vs Grunt vs Webpack

Saya mencoba merangkum pengetahuan saya tentang pengelola paket JavaScript, bundler, dan pelari tugas paling populer. Harap perbaiki saya jika saya salah:

• npm& boweradalah manajer paket. Mereka hanya mengunduh dependensi dan tidak tahu bagaimana membangun proyek sendiri. Yang mereka tahu adalah menelepon webpack/ gulp/ gruntsetelah mengambil semua dependensi.
• bowerseperti npm, tetapi membangun pohon ketergantungan rata (tidak seperti npmyang melakukannya secara rekursif). Arti npmmengambil dependensi untuk setiap dependensi (dapat mengambil yang sama beberapa kali), sementara bowermengharapkan Anda untuk secara manual memasukkan sub-dependensi. Kadang bower- kadang dan npmdigunakan bersama untuk front-end dan back-end (karena masing-masing megabyte mungkin penting di front-end).
• gruntdan gulpmerupakan pelari tugas untuk mengotomatiskan segala sesuatu yang dapat diotomatiskan (mis. kompilasi CSS / Sass, optimalkan gambar, buat satu bundel dan minify / transpile).
• gruntvs. gulp(seperti mavenvs. gradleatau konfigurasi vs kode). Grunt didasarkan pada konfigurasi tugas independen yang terpisah, setiap tugas membuka / menangani / menutup file. Gulp membutuhkan jumlah kode yang lebih sedikit dan didasarkan pada aliran Node, yang memungkinkannya untuk membangun rantai pipa (tanpa membuka kembali file yang sama) dan membuatnya lebih cepat.
• webpack( webpack-dev-server) - bagi saya ini adalah pelari tugas dengan memuat ulang perubahan yang memungkinkan Anda melupakan semua pengamat JS / CSS.
• npm/ bower+ plugins dapat menggantikan task runner. Kemampuan mereka sering berpotongan sehingga ada implikasi yang berbeda jika Anda perlu menggunakan gulp/ gruntlebih dari npm+ plugin. Tetapi pelari tugas jelas lebih baik untuk tugas-tugas kompleks (misalnya "pada setiap build buat bundel, transile dari ES6 ke ES5, jalankan di semua emulator browser, buat tangkapan layar, dan sebarkan ke dropbox melalui ftp").
• browserifymemungkinkan modul simpul kemasan untuk browser. browserifyvs node's requiresebenarnya AMD vs CommonJS .

Pertanyaan:

1. Apa itu webpack& webpack-dev-server? Dokumentasi resmi mengatakan itu adalah modul bundler tetapi bagi saya itu hanya pelari tugas. Apa bedanya?
2. Di mana Anda akan menggunakan browserify? Tidak bisakah kita melakukan hal yang sama dengan impor node / ES6?
3. Kapan Anda akan menggunakan gulp/ gruntlebih dari npm+ plugin?
4. Harap berikan contoh saat Anda perlu menggunakan kombinasi

Webpack dan Browserify

Webpack dan Browserify melakukan hampir semua pekerjaan yang sama, yaitu memproses kode Anda untuk digunakan dalam lingkungan target (terutama browser, meskipun Anda dapat menargetkan lingkungan lain seperti Node). Hasil pemrosesan tersebut adalah satu atau lebih bundel - skrip rakitan yang cocok untuk lingkungan yang ditargetkan.

Misalnya, Anda menulis kode ES6 yang dibagi menjadi beberapa modul dan ingin dapat menjalankannya di peramban. Jika modul itu adalah modul Node, browser tidak akan memahaminya karena hanya ada di lingkungan Node. Modul ES6 juga tidak akan berfungsi di browser lama seperti IE11. Selain itu, Anda mungkin telah menggunakan fitur bahasa eksperimental (proposal ES berikutnya) yang belum diimplementasikan oleh browser sehingga menjalankan skrip semacam itu hanya akan menimbulkan kesalahan. Alat-alat seperti Webpack dan Browserify menyelesaikan masalah ini dengan menerjemahkan kode tersebut ke bentuk yang dapat dieksekusi oleh browser . Selain itu, mereka memungkinkan untuk menerapkan berbagai macam optimisasi pada bundel tersebut.

Namun, Webpack dan Browserify berbeda dalam banyak hal, Webpack menawarkan banyak alat secara default (mis. Pemecahan kode), sementara Browserify dapat melakukan ini hanya setelah mengunduh plugin tetapi menggunakan keduanya mengarah ke hasil yang sangat mirip . Itu datang ke preferensi pribadi (Webpack lebih trendi). Btw, Webpack bukan pelari tugas, itu hanya prosesor dari file Anda (itu memprosesnya dengan yang disebut loader dan plugin) dan dapat dijalankan (antara lain) oleh pelari tugas.

Webpack Dev Server

Webpack Dev Server menyediakan solusi yang mirip dengan Browsersync - server pengembangan tempat Anda dapat menggunakan aplikasi dengan cepat saat Anda mengerjakannya, dan memverifikasi kemajuan pengembangan Anda segera, dengan server dev secara otomatis menyegarkan browser pada perubahan kode atau bahkan menyebarkan kode yang diubah ke browser tanpa memuat ulang dengan yang disebut penggantian modul panas.

Pelari tugas vs skrip NPM

Saya telah menggunakan Gulp untuk keringkasan dan penulisan tugas yang mudah, tetapi kemudian menemukan bahwa saya tidak membutuhkan Gulp atau Grunt sama sekali. Semua yang pernah saya butuhkan bisa dilakukan dengan menggunakan skrip NPM untuk menjalankan alat pihak ketiga melalui API mereka. Memilih antara skrip Gulp, Grunt atau NPM tergantung pada selera dan pengalaman tim Anda.

Sementara tugas dalam Gulp atau Grunt mudah dibaca bahkan untuk orang-orang yang tidak begitu terbiasa dengan JS, itu adalah alat lain untuk meminta dan belajar dan saya pribadi lebih suka mempersempit dependensi saya dan membuat semuanya menjadi sederhana. Di sisi lain, mengganti tugas-tugas ini dengan kombinasi skrip NPM dan skrip (propably JS) yang menjalankan alat pihak ketiga tersebut (mis. Skrip Node mengonfigurasi dan menjalankan rimraf untuk tujuan pembersihan) mungkin lebih menantang. Tetapi dalam sebagian besar kasus, ketiganya sama dalam hal hasil mereka.

Contohnya

Adapun contoh-contohnya, saya sarankan Anda melihat pada proyek starter Bereaksi ini , yang menunjukkan kepada Anda kombinasi yang bagus dari skrip NPM dan JS yang mencakup seluruh proses build dan deploy. Anda dapat menemukan skrip NPM di package.jsondalam folder root, di properti bernama scripts. Di sana Anda sebagian besar akan menemukan perintah seperti babel-node tools/run start. Babel-node adalah alat CLI (tidak dimaksudkan untuk penggunaan produksi), yang pada awalnya mengkompilasi file tools/runES6 (file run.js terletak di alat ) - pada dasarnya utilitas runner. Pelari ini mengambil fungsi sebagai argumen dan menjalankannya, yang dalam hal ini adalah start- utilitas lain (start.js) bertanggung jawab untuk bundling file sumber (klien dan server) dan memulai aplikasi dan server pengembangan (server dev mungkin akan berupa Webpack Dev Server atau Browsersync).

Berbicara lebih tepatnya, start.jsmembuat bundel sisi klien dan server, memulai server ekspres dan setelah peluncuran yang sukses menginisialisasi sinkronisasi Browser, yang pada saat penulisan terlihat seperti ini (lihat mereaksikan proyek starter untuk kode terbaru).

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

Bagian yang penting adalah proxy.target, di mana mereka menetapkan alamat server yang ingin mereka proksi, yang bisa berupa http: // localhost: 3000 , dan Browsersync memulai mendengarkan server di http: // localhost: 3001 , di mana aset yang dihasilkan disajikan dengan perubahan otomatis deteksi dan penggantian modul panas. Seperti yang Anda lihat, ada properti konfigurasi lain filesdengan file atau pola tersendiri. Browser menyinkronkan jam tangan untuk perubahan dan memuat kembali peramban jika beberapa terjadi, tetapi seperti komentar, Webpack menangani mengawasi sumber js dengan sendirinya dengan HMR, sehingga mereka bekerja sama sana.

Sekarang saya tidak memiliki contoh setara dari konfigurasi Grunt atau Gulp tersebut, tetapi dengan Gulp (dan agak mirip dengan Grunt) Anda akan menulis tugas-tugas individu di gulpfile.js seperti

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

di mana Anda akan melakukan hal-hal yang hampir sama seperti pada starter-kit, kali ini dengan task runner, yang memecahkan beberapa masalah untuk Anda, tetapi menyajikan masalah sendiri dan beberapa kesulitan selama mempelajari penggunaan, dan seperti yang saya katakan, semakin banyak dependensi yang Anda miliki, semakin bisa salah. Dan itulah alasan saya ingin menyingkirkan alat tersebut.

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:

• https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.c1q7ao3h4
• http://jamesknelson.com/which-build-system-should-i-use-for-my-javascript-app/
• https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/

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.

1. Instal perpustakaan dengan perintah: jspm install jquery
2. 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!");

3. 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.

4. 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.

OK, mereka semua punya beberapa kesamaan, mereka melakukan hal yang sama untuk Anda dengan cara yang berbeda dan serupa, saya membaginya dalam 3 kelompok utama seperti di bawah ini:

webpack dan browser sebagai yang populer, bekerja seperti pelari tugas tetapi dengan lebih banyak fleksibilitas, juga akan menggabungkan semuanya sebagai pengaturan Anda, sehingga Anda dapat menunjuk ke hasilnya sebagai bundle.js misalnya dalam satu file tunggal termasuk CSS dan Javascript, untuk lebih detail masing-masing, lihat detail di bawah:

paket web

webpack adalah bundler modul untuk aplikasi JavaScript modern. Saat webpack memproses aplikasi Anda, secara rekursif ia membangun grafik dependensi yang mencakup setiap modul yang dibutuhkan aplikasi Anda, lalu mengemas semua modul tersebut ke dalam sejumlah kecil bundel - seringkali hanya satu - yang akan dimuat oleh browser.

Ini sangat dapat dikonfigurasi, tetapi untuk memulai Anda hanya perlu memahami Konsep Empat Inti: entri, output, loader, dan plugin.

Dokumen ini dimaksudkan untuk memberikan gambaran tingkat tinggi dari konsep-konsep ini, sambil memberikan tautan ke kasus penggunaan spesifik konsep terperinci.

lebih lanjut di sini

browserify

Browserify adalah alat pengembangan yang memungkinkan kita untuk menulis modul gaya node.js yang dikompilasi untuk digunakan di browser. Sama seperti simpul, kita menulis modul kita di file terpisah, mengekspor metode dan properti eksternal menggunakan module.exports dan ekspor variabel. Kita bahkan dapat memerlukan modul lain menggunakan fungsi yang diperlukan, dan jika kita menghilangkan jalur relatif itu akan menyelesaikan ke modul di direktori node_modules.

lebih lanjut di sini

2) Pelari tugas

tegukan dan gerutuan adalah pelari tugas, pada dasarnya apa yang mereka lakukan, membuat tugas dan menjalankannya kapan pun Anda mau, misalnya Anda menginstal plugin untuk memperkecil CSS Anda dan kemudian menjalankannya setiap kali melakukan minifying, rincian lebih lanjut tentang masing-masing:

teguk

gulp.js adalah toolkit JavaScript sumber terbuka oleh Fractal Innovations dan komunitas sumber terbuka di GitHub, digunakan sebagai sistem pengembangan streaming dalam pengembangan web front-end. Ini adalah pelari tugas yang dibangun di atas Node.js dan Node Package Manager (npm), digunakan untuk otomasi tugas yang memakan waktu dan berulang yang terlibat dalam pengembangan web seperti minifikasi, penggabungan, penghilang cache, pengujian unit, linting, optimisasi dll. Penggunaan gulp pendekatan kode-konfigurasi-lebih untuk mendefinisikan tugas-tugasnya dan bergantung pada plugin kecil, bertujuan tunggal untuk melaksanakannya. ekosistem tegukan memiliki 1000+ plugin yang tersedia untuk dipilih.

lebih lanjut di sini

mendengus

Grunt adalah pelari tugas JavaScript, alat yang digunakan untuk secara otomatis melakukan tugas yang sering digunakan seperti minifikasi, kompilasi, pengujian unit, linting, dll. Ia menggunakan antarmuka baris perintah untuk menjalankan tugas kustom yang didefinisikan dalam file (dikenal sebagai Gruntfile) . Grunt dibuat oleh Ben Alman dan ditulis dalam Node.js. Ini didistribusikan melalui npm. Saat ini, ada lebih dari lima ribu plugin yang tersedia di ekosistem Grunt.

lebih lanjut di sini

3) Manajer paket

manajer paket, yang mereka lakukan adalah mengelola plugin yang Anda butuhkan di aplikasi Anda dan menginstalnya untuk Anda melalui github dll menggunakan package.json, sangat mudah untuk memperbarui modul Anda, menginstalnya dan berbagi aplikasi Anda di seluruh, lebih detail untuk masing-masing:

npm

npm adalah manajer paket untuk bahasa pemrograman JavaScript. Ini adalah manajer paket default untuk lingkungan runtime JavaScript Node.js. Ini terdiri dari klien baris perintah, juga disebut npm, dan database online paket publik, yang disebut registri npm. Registri diakses melalui klien, dan paket yang tersedia dapat diakses dan dicari melalui situs web npm.

lebih lanjut di sini

punjung

Bower dapat mengelola komponen yang berisi HTML, CSS, JavaScript, font, atau bahkan file gambar. Bower tidak menggabungkan atau memperkecil kode atau melakukan hal lain - ia hanya menginstal versi yang tepat dari paket yang Anda butuhkan dan dependensinya. Untuk memulai, Bower bekerja dengan mengambil dan menginstal paket-paket dari seluruh penjuru, mengurus perburuan, menemukan, mengunduh, dan menyimpan barang-barang yang Anda cari. Bower melacak paket-paket ini dalam file manifes, bower.json.

lebih lanjut di sini

dan manajer paket terbaru yang tidak boleh dilewatkan, masih muda dan cepat di lingkungan kerja nyata dibandingkan dengan npm yang kebanyakan saya gunakan sebelumnya, untuk menginstal ulang modul, itu memeriksa folder folder node_modules untuk memeriksa keberadaan modul, tampaknya juga menginstal modul membutuhkan waktu lebih sedikit:

benang

Yarn adalah manajer paket untuk kode Anda. Ini memungkinkan Anda untuk menggunakan dan berbagi kode dengan pengembang lain dari seluruh dunia. Benang melakukan ini dengan cepat, aman, dan andal sehingga Anda tidak perlu khawatir.

Yarn memungkinkan Anda menggunakan solusi pengembang lain untuk berbagai masalah, sehingga memudahkan Anda mengembangkan perangkat lunak. Jika Anda memiliki masalah, Anda dapat melaporkan masalah atau berkontribusi kembali, dan ketika masalah telah diperbaiki, Anda dapat menggunakan Benang untuk tetap memperbarui.

Kode dibagikan melalui sesuatu yang disebut paket (kadang-kadang disebut sebagai modul). Paket berisi semua kode yang dibagikan serta file package.json yang menjelaskan paket.

lebih lanjut di sini

Anda dapat menemukan beberapa perbandingan teknis di npmcompare

Membandingkan browserify vs grunt vs gulp vs webpack

Seperti yang Anda lihat, webpack dikelola dengan sangat baik dengan versi baru yang keluar rata-rata setiap 4 hari. Tapi Gulp tampaknya memiliki komunitas terbesar di antara mereka semua (dengan lebih dari 20 ribu bintang di Github) Grunt tampaknya agak terabaikan (dibandingkan dengan yang lain)

Jadi, jika perlu memilih satu dari yang lain saya akan pergi dengan Gulp

Catatan kecil tentang npm: npm3 mencoba menginstal dependensi dengan cara datar

https://docs.npmjs.com/how-npm-works/npm3#npm-v3-dependency-resolution

Apa itu webpack & webpack-dev-server? Dokumentasi resmi mengatakan itu adalah modul bundler tetapi bagi saya itu hanya pelari tugas. Apa bedanya?

webpack-dev-server adalah server web pemuatan langsung yang digunakan pengembang Webpack untuk mendapatkan umpan balik langsung apa yang mereka lakukan. Seharusnya hanya digunakan selama pengembangan.

Proyek ini sangat terinspirasi oleh alat uji unit nof5 .

Webpack sesuai namanya akan menciptakan usia paket TUNGGAL untuk web . Paket ini akan diminimalkan, dan digabungkan menjadi satu file (kita masih hidup dalam usia HTTP 1.1). Webpack melakukan keajaiban menggabungkan sumber daya (JavaScript, CSS, gambar) dan menyuntikkan mereka seperti ini: .<script src="assets/bundle.js"></script>

Itu juga bisa disebut modul bundler karena ia harus memahami dependensi modul, dan bagaimana cara mengambil dependensi dan menggabungkannya.

Di mana Anda akan menggunakan browserify? Tidak bisakah kita melakukan hal yang sama dengan impor node / ES6?

Anda bisa menggunakan Browserify pada tugas yang sama persis di mana Anda akan menggunakan Webpack . - Webpack lebih ringkas.

Perhatikan bahwa fitur pemuat modul ES6 di Webpack2 menggunakan System.import , yang tidak didukung oleh satu browser pun secara asli.

Kapan Anda akan menggunakan gulp / grunt over npm + plugins?

Anda bisa melupakan Gulp, Grunt, Brokoli, Brunch dan Bower . Sebagai gantinya, gunakan skrip baris perintah npm dan Anda dapat menghilangkan paket tambahan seperti ini di sini untuk Gulp :

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

Anda mungkin dapat menggunakan generator file config Gulp dan Grunt saat membuat file config untuk proyek Anda. Dengan cara ini Anda tidak perlu menginstal Yeoman atau alat serupa.

Yarn adalah manajer paket terbaru yang mungkin layak disebutkan.
Jadi, ini dia: https://yarnpkg.com/

Sejauh yang saya tahu dapat mengambil dependensi npm dan bower dan memiliki fitur lainnya yang dihargai.

Webpackadalah bundler. Seperti Browserfyyang terlihat di basis kode untuk permintaan modul ( requireatau import) dan menyelesaikannya secara rekursif. Terlebih lagi, Anda dapat mengkonfigurasi Webpackuntuk menyelesaikan tidak hanya modul seperti JavaScript, tetapi CSS, gambar, HTML, semuanya secara harfiah. Apa yang terutama membuat saya bersemangat Webpack, Anda dapat menggabungkan kedua modul yang dikompilasi dan dimuat secara dinamis di aplikasi yang sama. Dengan demikian orang mendapatkan peningkatan kinerja nyata, terutama melalui HTTP / 1.x. Bagaimana tepatnya Anda melakukannya, saya jelaskan dengan contoh di sini http://dsheiko.com/weblog/state-of-javascript-modules-2017/ Sebagai alternatif untuk bundler yang dapat dipikirkan orang Rollup.js( https://rollupjs.org/ ) , yang mengoptimalkan kode selama kompilasi, tetapi menghapus semua potongan yang tidak digunakan yang ditemukan.

Sebab AMD, alih-alih RequireJSseseorang dapat menggunakan asli ES2016 module system, tetapi dimuat dengan System.js( https://github.com/systemjs/systemjs )

Selain itu, saya akan menunjukkan bahwa npmsering digunakan sebagai alat otomatisasi seperti gruntatau gulp. Lihat https://docs.npmjs.com/misc/scripts . Saya pribadi pergi sekarang dengan skrip npm hanya menghindari alat otomatisasi lainnya, meskipun di masa lalu saya sangat menyukai grunt. Dengan alat lain Anda harus bergantung pada plugin yang tak terhitung jumlahnya untuk paket, yang sering tidak ditulis dengan baik dan tidak dipelihara secara aktif. npmmengetahui paket-paketnya, jadi Anda menelepon ke salah satu paket yang diinstal secara lokal dengan nama seperti:

{
  "scripts": {
    "start": "npm http-server"
  },
  "devDependencies": {
    "http-server": "^0.10.0"
  }
}

Sebenarnya Anda sebagai aturan tidak memerlukan plugin apa pun jika paket mendukung CLI.