Pengikat Modul Diterangkan: Webpack, Rollup, Parcel dan Snowpack dengan Contoh-tutorial js-php.cn

Module Bundlers Explained: Webpack, Rollup, Parcel, and Snowpack with Examples

Membina tapak web mungkin kelihatan mudah dengan hanya HTML, CSS dan JavaScript. Tetapi apabila aplikasi anda berkembang, anda memerlukan lebih daripada bahan ini sahaja. Anda mungkin menggunakan TypeScript, perpustakaan UI seperti React, prapemproses CSS seperti SASS atau modul pihak ketiga. Cabaran timbul apabila kebergantungan tidak berfungsi dengan baik bersama-sama, mengakibatkan konflik, fail besar dan masa muat yang perlahan.

Di sinilah pengikat modul masuk. Pengikat modul seperti Pek Web, Gulung, Petak dan Pek Salji membantu anda mengurus dan mengoptimumkan kod anda untuk pembangunan yang lebih lancar dan pantas pengalaman pengeluaran. Dalam blog ini, kami akan meneroka peranan pengikat ini dengan contoh untuk menjadikan konsep lebih mudah difahami.

Apakah itu Pengikat Modul?

Satu pengikat modul ialah alat yang mengambil semua kod anda, kebergantungan dan modulnya serta menggabungkannya ke dalam satu atau beberapa fail yang dioptimumkan untuk penyemak imbas. Ini mengurangkan bilangan permintaan HTTP, menambah baik masa muat dan mengurus kebergantungan dengan cekap.

Mengapa Menggunakan Pengikat Modul?

Apabila anda membina aplikasi web moden, anda menghadapi pelbagai cabaran:

Pengurusan pergantungan: Menguruskan berbilang perpustakaan pihak ketiga.
Pembahagian kod: Memuatkan kod yang diperlukan sahaja atas permintaan untuk meningkatkan prestasi.
Memindahkan: Menukar JavaScript moden (ES6 ) untuk berfungsi dalam penyemak imbas lama.
Minification: Mengecilkan saiz fail untuk memuatkan lebih cepat.

Pengikat modul menyelesaikan isu ini dengan:

Membuat graf pergantungan untuk menjejaki semua modul dan fail.
Mengurangkan dan memisahkan kod kepada bahagian yang lebih kecil.
Memastikan keserasian merentas pelayar yang berbeza dengan menyertakan polyfill dan kod transpiling.

Contoh Persediaan Pek Web Mudah

Mari kita mulakan dengan contoh cara Webpack berfungsi. Katakan anda mempunyai fail index.js ringkas dengan kebergantungan seperti Lodash.

Langkah 1: Mulakan projek baharu.

mkdir my-project
cd my-project
npm init -y
npm install lodash --save

Salin selepas log masuk

Langkah 2: Cipta fail index.js dalam direktori src.

// src/index.js
import _ from 'lodash';

console.log(_.camelCase('hello world'));

Salin selepas log masuk

Langkah 3: Buat fail index.html di dalam direktori awam.

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Example</title>
</head>
<body>
  <h1>Webpack Example</h1>
  <script src="../dist/main.js"></script>
</body>
</html>

Salin selepas log masuk

Langkah 4: Pasang Webpack dan Webpack CLI.

npm install webpack webpack-cli --save-dev

Salin selepas log masuk

Langkah 5: Buat fail konfigurasi Webpack (webpack.config.js).

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // Entry point of our app
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'), // Output directory
  },
  mode: 'development', // Development mode (use 'production' for production)
};

Salin selepas log masuk

Langkah 6: Tambahkan skrip dalam package.json untuk menjalankan Webpack.

mkdir my-project
cd my-project
npm init -y
npm install lodash --save

Salin selepas log masuk

Langkah 7: Jalankan Webpack untuk menggabungkan kod.

// src/index.js
import _ from 'lodash';

console.log(_.camelCase('hello world'));

Salin selepas log masuk

Ini akan menggabungkan fail index.js anda dan kebergantungannya ke dalam fail main.js di dalam folder dist. Anda kini boleh merujuk fail ini dalam index.html anda.

Pengikat Modul Lain

1. Gulung

Rollup direka untuk menggabungkan perpustakaan JavaScript dan mencipta himpunan yang dioptimumkan untuk projek yang lebih kecil. Tidak seperti Webpack, Rollup memfokuskan pada berkas yang lebih kecil dan lebih cekap dengan mengalih keluar kod yang tidak digunakan (gegaran pokok).

Contoh Persediaan:

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Example</title>
</head>
<body>
  <h1>Webpack Example</h1>
  <script src="../dist/main.js"></script>
</body>
</html>

Salin selepas log masuk

Buat fail rollup.config.js mudah:

npm install webpack webpack-cli --save-dev

Salin selepas log masuk

Untuk menggabungkan apl, anda boleh menjalankan Rollup dengan:

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // Entry point of our app
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'), // Output directory
  },
  mode: 'development', // Development mode (use 'production' for production)
};

Salin selepas log masuk

Rollup adalah lebih mudah dan cekap apabila menggabungkan projek atau perpustakaan yang lebih kecil kerana keupayaannya yang menggegarkan pokok.

2. Petak

Parcel ialah pengikat konfigurasi sifar. Ia secara automatik mengesan dan menggabungkan semua aset yang anda perlukan tanpa fail konfigurasi. Ia mesra pemula dan sesuai untuk projek kecil hingga sederhana.

Contoh Persediaan:

"scripts": {
  "build": "webpack"
}

Salin selepas log masuk

Dalam index.js:

npm run build

Salin selepas log masuk

Untuk menjalankan pelayan pembangunan:

npm init -y
npm install lodash --save
npm install rollup --save-dev

Salin selepas log masuk

Parcel secara automatik mengendalikan himpunan, muat semula langsung dan pemisahan kod tanpa sebarang konfigurasi tambahan.

3. Snowpack

Snowpack ialah pengikat moden dan pantas yang hanya membina semula fail apabila perlu. Daripada menyusun segala-galanya pada setiap perubahan, ia menghantar kebergantungan anda terus ke penyemak imbas untuk pembangunan yang lebih pantas.

Contoh Persediaan:

// rollup.config.js
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js', // Entry point
  output: {
    file: 'dist/bundle.js',
    format: 'iife', // Immediate function execution
    name: 'MyApp',
  },
  plugins: [terser()], // Minify the output bundle
};

Salin selepas log masuk

Buat konfigurasi mudah dalam snowpack.config.js:

npx rollup -c

Salin selepas log masuk

Jalankan Snowpack:

npm init -y
npm install parcel-bundler --save-dev
npm install lodash --save

Salin selepas log masuk

Snowpack hanya menyusun fail yang telah berubah, memberikan kemas kini segera semasa pembangunan.

Kesimpulan

Pengikat modul seperti Pek Web, Gulung, Parcel dan Pek Salji ialah alat penting dalam pembangunan web moden. Ia membantu mengurus kebergantungan, mengoptimumkan kod dan mengurangkan masa muat untuk aplikasi anda. Berikut ialah ringkasan ringkas pengikat:

Webpack: Sangat boleh dikonfigurasikan, sesuai untuk projek besar dengan banyak kebergantungan.
Gulung: Bagus untuk perpustakaan, memfokuskan pada berkas yang lebih kecil dengan gegaran pokok.
Parcel: Konfigurasi sifar, mudah digunakan, sesuai untuk projek yang lebih kecil atau prototaip pantas.
Snowpack: Pengikat pembangunan pantas, menghantar kebergantungan terus ke penyemak imbas, menjadikannya lebih pantas untuk projek besar.

Dengan memahami cara alat ini berfungsi, anda boleh memilih alat yang paling sesuai dengan keperluan projek anda dan meningkatkan aliran kerja pembangunan web anda!

Atas ialah kandungan terperinci Pengikat Modul Diterangkan: Webpack, Rollup, Parcel dan Snowpack dengan Contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!