Pertanyaan NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack


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

  • npm & bower adalah manajer paket. Mereka hanya mengunduh dependensi dan tidak tahu cara membuat proyek sendiri. Apa yang mereka ketahui adalah panggilan webpack/gulp/grunt setelah mengambil semua dependensi.
  • bower seperti npm, tetapi membangun pohon ketergantungan rata (tidak seperti npm yang melakukannya secara rekursif). Berarti npm menjemput dependensi untuk setiap ketergantungan (mungkin mengambil yang sama beberapa kali), sementara bower mengharapkan Anda untuk secara manual menyertakan sub-dependensi. Terkadang bower dan npm digunakan bersama-sama untuk front-end dan back-end masing-masing (karena setiap megabyte mungkin penting pada front-end).
  • grunt dan gulp adalah pelari tugas untuk mengotomatiskan semua yang dapat diotomatiskan (yaitu mengkompilasi CSS / Sass, mengoptimalkan gambar, membuat bundel dan mengecilkan / memindahkannya).
  • grunt vs. gulp (seperti maven vs. gradle atau konfigurasi vs. kode). Grunt didasarkan pada konfigurasi tugas independen terpisah, setiap tugas membuka / menangani / menutup file. Gulp membutuhkan lebih sedikit kode 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 task runner dengan reload perubahan yang memungkinkan Anda untuk melupakan semua pengintai JS / CSS.
  • npm/bower + plugin dapat menggantikan pelari tugas. Kemampuan mereka sering berpotongan jadi ada implikasi berbeda jika Anda perlu menggunakannya gulp/grunt lebih npm + plugin. Namun pelari tugas jelas lebih baik untuk tugas-tugas kompleks (mis. "Di setiap paket buat build, transpile dari ES6 ke ES5, jalankan di semua emulator browser, buat tangkapan layar, dan terapkan ke dropbox melalui ftp").
  • browserify memungkinkan modul simpul kemasan untuk browser. browserify vs node's require sebenarnya AMD vs CommonJS.

Pertanyaan:

  1. apa yang webpack & webpack-dev-server? Dokumentasi resmi mengatakan ini adalah bundel modul tetapi bagi saya itu hanya tugas pelari. 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/grunt lebih npm + plugin?
  4. Harap berikan contoh ketika Anda perlu menggunakan kombinasi

1505
2018-01-28 13:28


asal


Jawaban:


Webpack dan Browserify

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

Misalnya, katakanlah Anda menulis kode ES6 yang dibagi menjadi modul dan ingin dapat menjalankannya di browser. Jika modul-modul tersebut 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 (ES proposal berikutnya) yang belum diimplementasikan oleh browser sehingga menjalankan skrip seperti itu hanya akan membuang kesalahan. Alat-alat seperti Webpack dan Browserify memecahkan masalah ini dengan menerjemahkan kode tersebut ke browser formulir dapat dijalankan. Di atas 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 (misalnya pemecahan kode), sementara Browserify dapat melakukan ini hanya setelah mengunduh plugin, tetapi menggunakan keduanya mengarah ke hasil yang sangat mirip. Itu tergantung pada preferensi pribadi (Webpack lebih trendi). Btw, Webpack bukan pelari tugas, itu hanya prosesor dari file Anda (proses mereka dengan apa yang disebut loader dan plugin) dan itu dapat dijalankan (antara cara lain) oleh pelari tugas.


Server Webpack Dev

Webpack Dev Server memberikan solusi serupa untuk Browsersync - server pengembangan tempat Anda dapat menerapkan aplikasi dengan cepat saat Anda mengerjakannya, dan memverifikasi kemajuan pengembangan Anda segera dengan server dev secara otomatis menyegarkan peramban pada perubahan kode atau bahkan menyebarkan kode yang diubah ke peramban tanpa reload dengan apa yang disebut penggantian modul panas.


Task pelari vs skrip NPM

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

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


Contoh

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

Berbicara lebih tepat, start.js membuat bundel sisi klien dan server, memulai server express dan setelah awal yang sukses di dalam Browser-sync, yang pada saat penulisan tampak seperti ini (silakan lihat bereaksi 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 mengatur alamat server yang ingin mereka proksi, yang bisa jadi http: // localhost: 3000, dan Browsersync memulai server mendengarkan http: // localhost: 3001, di mana aset yang dihasilkan dilayani dengan deteksi perubahan otomatis dan penggantian modul panas. Seperti yang Anda lihat, ada properti konfigurasi lain files dengan file atau pola individual Jam tangan peramban-peramban untuk perubahan dan memuat ulang peramban jika ada yang terjadi, tetapi seperti yang dikomentari, Webpack memperhatikan js dengan sendirinya dengan HMR, sehingga mereka bekerja sama di sana.

Sekarang saya tidak memiliki contoh yang setara dengan konfigurasi Grunt atau Gulp, tetapi dengan Gulp (dan agak mirip dengan Grunt) Anda akan menulis tugas-tugas individual 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 pada dasarnya cukup banyak hal yang sama seperti di starter-kit, kali ini dengan pelari tugas, yang memecahkan beberapa masalah untuk Anda, tetapi menyajikan masalah sendiri dan beberapa kesulitan selama mempelajari penggunaan, dan seperti yang saya katakan, lebih banyak ketergantungan yang Anda miliki, semakin banyak yang bisa salah. Dan itulah alasan saya ingin menyingkirkan alat-alat seperti itu.


795
2018-01-28 14:34



Perbarui Juni 2018

Mempelajari JavaScript modern sulit jika Anda belum ada di sana sejak awal. Jika Anda pendatang baru, ingatlah untuk memeriksa tulisan yang sangat bagus ini untuk mendapatkan gambaran 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 di 2017. Anda dapat memeriksanya seperti di bawah ini.

https://github.com/grab/front-end-guide


Saya juga telah mencari ini beberapa waktu karena ada banyak alat di luar sana dan masing-masing dari mereka menguntungkan kita dalam aspek yang berbeda. Komunitas dibagi di beberapa 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.

Bagaimanapun, saya ingin menyumbangkan sesuatu.

1. Manajer Paket 

Manajer paket menyederhanakan menginstal dan memperbarui dependensi proyek, yang merupakan pustaka seperti: jQuery, Bootstrap, dll - semua 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 berdiri untuk: Node JS package manager membantu Anda mengelola semua pustaka yang bergantung pada perangkat lunak Anda. Anda akan menentukan kebutuhan Anda dalam sebuah file bernama package.json dan lari npm install di baris perintah ... lalu BANG, paket Anda diunduh dan siap digunakan. Bisa digunakan untuk keduanya front-end and back-end perpustakaan.

  • Bower: untuk manajemen paket front-end, konsepnya sama dengan NPM. Semua pustaka Anda disimpan dalam file bernama bower.json lalu 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 npm 3 Duplication and Deduplication,   tolong buka dokumen untuk lebih detail.

  • Yarn: Manajer paket baru untuk JavaScript  diterbitkan oleh Facebook baru-baru ini dengan beberapa kelebihan dibandingkan NPM. Dan dengan Benang, Anda masih bisa menggunakan keduanya NPMdan Bower registry untuk mengambil paket. Jika Anda sudah menginstal paket sebelumnya, yarn membuat salinan cache yang memfasilitasi offline package installs.

  • jspm: adalah pengelola paket untuk SystemJS loader modul universal, dibangun di atas dinamis ES6 modul loader. Ini bukan pengelola paket yang sepenuhnya baru dengan seperangkat aturannya sendiri, melainkan berfungsi di atas sumber paket yang ada. Di luar kotak, ia bekerja dengan GitHub dan npm. Karena sebagian besar Bower berdasarkan paket didasarkan pada GitHub, kita bisa menginstal paket-paket itu menggunakan jspm demikian juga. Ini memiliki registri yang mencantumkan sebagian besar paket front-end yang umum digunakan untuk instalasi lebih mudah.

Lihat perbedaan antara Bower dan jspm:    Manajer Paket: Bower vs jspm


2. Modul Loader / Bundling

Sebagian besar proyek skala apa pun akan membagi kode mereka di antara sejumlah file. Anda hanya bisa memasukkan setiap file dengan seorang individu <script> tag, bagaimanapun, <script> membuat koneksi http baru, dan untuk file kecil - yang merupakan tujuan modularitas - waktu untuk mengatur koneksi dapat memakan waktu lebih lama daripada mentransfer data. Saat skrip sedang diunduh, tidak ada konten yang dapat diubah pada halaman.

  • Masalah waktu pengunduhan sebagian besar dapat diselesaikan dengan menggabungkan sekelompok modul sederhana ke dalam satu file, dan mengecilkannya.

Misalnya

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>
  • Kinerja datang dengan mengorbankan fleksibilitas sekalipun. Jika modul Anda memiliki inter-dependensi, kurangnya fleksibilitas ini bisa menjadi showstopper.

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 dari yang Anda bisa, dan itulah mengapa Anda harus menggunakan alat untuk secara otomatis menggabungkan semuanya ke dalam satu file.

Kemudian kami mendengar tentang RequireJS, Browserify, Webpack dan SystemJS

  • RequireJS: adalah JavaScript file dan modul loader. Ini dioptimalkan untuk digunakan di-browser, tetapi dapat digunakan di lingkungan JavaScript lainnya, 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 ketergantungan dan menggunakannya.

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

Dan kemudian di kami HTML, kita bisa merujuk untuk digunakan dengan 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. Karena itu, Browserify bukan pemuat modul seperti bundel modul: Browserify sepenuhnya merupakan alat build-time, menghasilkan sekumpulan kode yang kemudian dapat dimuat sisi-klien.

Mulai dengan mesin build yang memiliki node & npm yang diinstal, dan dapatkan paket:

npm install -g –save-dev browserify

Tuliskan modul Anda CommonJSformat

//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));

Dan ketika bahagia, berikan perintah untuk mengelompokkan:

browserify entry-point.js -o bundle-name.js

Browserify secara rekursif menemukan semua dependensi entry-point dan merakitnya menjadi satu file:

<script src=”bundle-name.js”></script>
  • Webpack: Ini menggabungkan semua aset statis Anda, termasuk JavaScript, gambar, CSS, dan lainnya, ke dalam satu file. Ini juga memungkinkan Anda untuk memproses file melalui berbagai jenis loader. Anda bisa menulis Anda JavaScript dengan CommonJS atau AMD sintaks modul. Ini menyerang masalah membangun secara fundamental lebih terintegrasi dan beropini. Di Browserify Kau gunakan Gulp/Grunt dan daftar panjang transformasi dan plugin untuk menyelesaikan pekerjaan. Webpack menawarkan daya yang cukup dari kotak yang biasanya tidak Anda perlukan Grunt atau Gulp sama sekali.

Penggunaan dasar di luar sederhana. Instal Webpack seperti Browserify:

npm install -g –save-dev webpack

Dan berikan perintah sebuah entry point dan file output:

webpack ./entry-point.js bundle-name.js
  • SystemJS: adalah loader modul itu dapat mengimpor modul pada waktu berjalan di salah satu format populer digunakan hari ini (CommonJS, UMD, AMD, ES6). Ini dibangun di atas ES6 modul loader polyfill dan cukup pintar untuk mendeteksi format yang digunakan dan menanganinya dengan tepat. SystemJS juga dapat melakukan transpile kode ES6 (dengan Babel atau Traceur) atau bahasa lain seperti TypeScript dan CoffeeScript menggunakan plugin.

Mau tahu apa itu node module dan mengapa tidak diadaptasi dengan baik ke dalam browser.

Artikel yang lebih berguna:


Mengapa jspm dan SystemJS?

Salah satu tujuan utama ES6 modularitas adalah membuatnya sangat sederhana   untuk menginstal dan menggunakan pustaka Javascript dari mana saja di   Internet (Github, npm, dll.). Hanya dua hal yang dibutuhkan:

  • Satu perintah untuk menginstal pustaka
  • Satu baris kode untuk mengimpor pustaka dan menggunakannya

Jadi dengan jspm, kamu bisa melakukannya.

  1. Instal pustaka dengan perintah: jspm install jquery
  2. Impor pustaka dengan satu baris kode, tidak perlu referensi eksternal di dalam file HTML Anda.

display.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");
  1. Kemudian Anda mengonfigurasi hal-hal ini di dalam System.config({ ... }) sebelum   mengimpor modul Anda. Biasanya saat dijalankan jspm init, akan ada file   bernama config.js untuk tujuan ini.

  2. Untuk membuat skrip ini berjalan, kita perlu memuat system.js dan config.js pada halaman HTML. Setelah itu kami akan memuat display.js file menggunakan   itu 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 sebagai Angular 2 telah menerapkannya. Sejak jspm dikembangkan untuk berintegrasi dengan SystemJS dan itu bekerja di atas yang sudah ada npm sumber, jadi jawaban Anda terserah Anda.


3. Pelari tugas

Pelari tugas dan alat pembangunan pada dasarnya adalah alat baris perintah. Mengapa kita perlu menggunakannya: Dalam satu kata: otomatisasi. Semakin sedikit pekerjaan yang harus Anda lakukan saat melakukan tugas-tugas yang berulang-ulang seperti minifikasi, kompilasi, pengujian unit, lintingyang sebelumnya menghabiskan banyak waktu untuk dilakukan dengan baris perintah atau bahkan secara manual.

  • Grunt: Anda dapat membuat otomatisasi untuk lingkungan pengembangan Anda untuk kode pra-proses atau membuat skrip build dengan file konfigurasi dan tampaknya sangat sulit untuk menangani tugas yang rumit. Populer dalam beberapa tahun terakhir.

Setiap tugas di Grunt adalah susunan konfigurasi plugin yang berbeda, yang hanya dieksekusi satu demi satu, secara independen 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: Otomatisasi sama seperti Grunt tetapi alih-alih konfigurasi, Anda dapat menulis JavaScript dengan aliran seperti itu aplikasi node. Lebih suka hari ini.

Ini adalah sebuah Gulp contoh deklarasi tugas.

//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 starter dengan mereka. Misalnya, Anda berencana untuk membangun prototipe dengan HTML dan SCSS, kemudian bukannya secara manual membuat beberapa folder seperti scss, css, img, font. Anda cukup menginstal yeoman dan jalankan skrip sederhana. Lalu semuanya di sini untukmu.

Temukan lebih banyak 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 isi pertanyaan tetapi ketika saya mencari pengetahuan ini di Google, saya selalu melihat pertanyaan di atas sehingga saya memutuskan untuk menjawabnya dalam ringkasan. Semoga kalian menemukan ini bermanfaat.


550
2017-10-03 06:23



Anda dapat menemukan beberapa perbandingan teknis npmcompare

Membandingkan browserify vs grunt vs gulp vs. webpack

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

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


45
2018-05-01 09:04



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


1) Bundler modul 

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

webpack

webpack adalah bundel modul untuk aplikasi JavaScript modern. Kapan   Webpack memproses aplikasi Anda, secara rekursif membangun ketergantungan   grafik yang mencakup setiap modul yang dibutuhkan aplikasi Anda, lalu paket   semua modul tersebut menjadi sejumlah kecil bundel - seringkali hanya satu -   untuk dimuat oleh browser.

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

Dokumen ini dimaksudkan untuk memberikan gambaran tingkat tinggi tentang ini   konsep, sambil menyediakan tautan ke spesifik konsep terperinci   use-cases.

lebih sini

browserify

Browserify adalah alat pengembangan yang memungkinkan kita menulis node.js-style   modul yang dikompilasi untuk digunakan di browser. Sama seperti simpul, kami menulis   modul kami dalam file terpisah, mengekspor metode eksternal dan   properti menggunakan modul.ekspor dan variabel ekspor. Kami bahkan bisa   memerlukan modul lain menggunakan fungsi yang membutuhkan, dan jika kita mengabaikan   path relatif itu akan memutuskan ke modul di node_modules   direktori.

lebih 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 memasang plugin untuk mengecilkan CSS Anda dan kemudian menjalankannya setiap kali melakukan penghitungan, lebih detail tentang masing-masing:

meneguk

gulp.js adalah toolkit open source JavaScript oleh Fractal Innovations   dan komunitas open source di GitHub, digunakan sebagai pengaliran streaming   sistem dalam pengembangan web front-end. Ini adalah pelari tugas yang dibangun di atas   Node.js dan Node Package Manager (npm), digunakan untuk otomatisasi   tugas yang memakan waktu dan berulang yang terlibat dalam pengembangan web seperti   minification, concatenation, cache busting, pengujian unit, linting,   optimasi dll gulp menggunakan pendekatan kode-over-konfigurasi   mendefinisikan tugasnya dan bergantung pada plugin kecil, satu-tujuan untuk   membawa mereka keluar. gulp ekosistem memiliki lebih dari 1000 plugin yang tersedia   untuk memilih dari.

lebih sini

dengkur

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

lebih sini


3) Manajer paket 

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

npm

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

lebih sini

punjung

Bower dapat mengelola komponen yang berisi HTML, CSS, JavaScript, font   atau bahkan file gambar. Bower tidak menggabungkan atau mengecilkan kode atau melakukannya   apa pun - itu hanya menginstal versi yang tepat dari paket   yang Anda butuhkan dan ketergantungan mereka.   Untuk memulai, Bower bekerja dengan mengambil dan menginstal paket dari   seluruh, mengurus perburuan, mencari, mengunduh, dan menyimpan   hal-hal yang Anda cari. Bower melacak paket-paket ini di a   file manifes, bower.json.

lebih sini

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

benang

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

Benang memungkinkan Anda menggunakan solusi pengembang lain untuk berbeda   masalah, sehingga lebih mudah bagi Anda untuk mengembangkan perangkat lunak Anda. Jika kamu   memiliki masalah, Anda dapat melaporkan masalah atau berkontribusi kembali, dan kapan   masalah diperbaiki, Anda dapat menggunakan Benang untuk menjaganya tetap up to date.

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

lebih sini



42
2018-05-21 03:43



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

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


40
2018-04-14 15:53



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

webpack-dev-server adalah server web reload langsung itu Webpack pengembang digunakan untuk mendapatkan umpan balik langsung apa yang mereka lakukan. Itu seharusnya hanya digunakan selama pengembangan.

Proyek ini sangat terinspirasi oleh nof5 alat uji unit.

Webpack seperti namanya akan membuat TUNGGAL  Pakusia 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 menyuntikkannya seperti ini: <script src="assets/bundle.js"></script>.

Itu juga bisa disebut bundel modul karena harus memahami dependensi modul, dan cara mengambil dependensi dan menggabungkannya bersama.

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

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

Perhatikan bahwa Fitur-fitur pemuat modul ES6 di Webpack2 gunakan System.import, yang tidak mendukung satu peramban secara langsung.

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

Kamu bisa lupa  Gulp, Grunt, Brokoli, Brunch, dan Bower. Langsung gunakan skrip baris perintah npm sebagai gantinya dan Anda dapat menghilangkan paket tambahan seperti ini di sini Meneguk:

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 bisa menggunakannya Meneguk dan Grunt konfigurasi generator file saat membuat file konfigurasi untuk proyek Anda. Dengan cara ini Anda tidak perlu menginstal Petani kecil atau alat serupa.


10
2017-11-22 01:23



Benang adalah manajer paket terbaru yang mungkin pantas disebutkan. Jadi, di sana: https://yarnpkg.com/

Afaik, dapat mengambil baik npm dan dependensi bower dan memiliki fitur yang dihargai lainnya.


9
2017-10-14 15:58



StackShare menyediakan side-by-side (atau menyimpulkan) dari tiga alat sekaligus.

Ini untuk itu npm vs. Bower vs. Browserify dan untuk menelan vs Webpack vs. Grunt

Pada halaman perbandingan ini Anda dapat menemukan yang berikut:

  • jumlah suara yang diterima setiap orang dari komunitas StackShare
  • perusahaan mana yang menggunakannya dalam tumpukan teknologi mereka
  • tingkat bunga untuk setiap waktu
  • pro untuk setiap alat

4
2018-05-30 14:31



Webpack adalah bundel. Seperti Browserfy terlihat di basis kode untuk permintaan modul (require atau import) dan menyelesaikannya secara rekursif. Terlebih lagi, Anda dapat mengkonfigurasi Webpack untuk menyelesaikan bukan hanya modul mirip JavaScript, tetapi CSS, gambar, HTML, secara harfiah semuanya. Apa yang terutama membuat saya bersemangat Webpack, Anda dapat menggabungkan modul yang dikompilasi dan dimuat secara dinamis dalam aplikasi yang sama. Jadi orang mendapatkan dorongan 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 satu bundler dapat memikirkan Rollup.js (https://rollupjs.org/), yang mengoptimalkan kode selama kompilasi, tetapi mengupas semua potongan yang tidak terpakai.

Untuk AMD, dari pada RequireJS orang bisa pergi dengan pribumi ES2016 module system, tetapi penuh dengan System.js (https://github.com/systemjs/systemjs)

Selain itu, saya akan menunjukkan itu npm sering digunakan sebagai alat otomatis seperti grunt atau gulp. Periksa https://docs.npmjs.com/misc/scripts. Saya pribadi pergi sekarang dengan skrip npm hanya menghindari alat otomatisasi lainnya, meskipun di masa lalu saya sangat tertarik grunt. Dengan alat lain, Anda harus mengandalkan banyak plugin untuk paket, yang sering kali tidak ditulis dengan baik dan tidak dipelihara secara aktif. npm tahu paket-paketnya, jadi Anda menelepon ke salah satu paket yang dipasang 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.


4
2017-08-14 09:43