Bagaimana untuk membungkus menggunakan projek jquery

Dengan peningkatan populariti dan permintaan untuk pembangunan bahagian hadapan, semakin banyak projek menggunakan jQuery Walau bagaimanapun, semasa pembangunan kejuruteraan, kami selalunya perlu membungkus projek untuk pelepasan dan penggunaan yang mudah. Artikel ini akan memperkenalkan cara menggunakan webpack untuk membungkus projek jQuery.

1. Pasang webpack dan dependencies

Pertama, anda perlu memasang webpack dan dependencies yang berkaitan dalam projek Anda boleh menggunakan npm atau yarn untuk memasang:

$ npm install webpack webpack-cli jquery jquery-ui --save-dev

Antaranya. , webpack ialah Alat pembungkusan modul, webpack-cli ialah alat baris arahan webpack, jquery dan jquery-ui ialah perpustakaan jQuery dan beberapa komponen yang perlu kami bungkus.

2. Konfigurasikan webpack

1. Buat fail konfigurasi webpack

Buat fail webpack.config.js dalam direktori akar projek untuk mengkonfigurasi webpack. Mula-mula import beberapa modul nod yang diperlukan:

const path = require('path');
const webpack = require('webpack');

2. Konfigurasikan webpack

Seterusnya, konfigurasikan webpack Mula-mula konfigurasikan laluan input dan output serta maklumat lain:

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

Kod di atas. , entri mewakili fail kemasukan projek, dan output mewakili laluan keluaran berpakej dan nama fail.

Seterusnya konfigurasi beberapa modul dan pemalam:

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

Dalam kod di atas, module.rules mengkonfigurasi pemuat babel, yang digunakan untuk memproses sintaks ES6 dan pilihannya mengkonfigurasi @babel/ preset-env , digunakan untuk menukar sintaks ES6 kepada ES5. Pemalam dikonfigurasikan dengan webpack.ProvidePlugin, yang digunakan untuk menentukan pembolehubah jQuery dan $ global, supaya tidak perlu mengimportnya setiap kali apabila jQuery dirujuk dalam projek.

3. Membungkus projek jQuery

1 Cipta folder projek

Buat folder src dalam direktori akar projek dan cipta fail index.js di dalamnya untuk Write. Kod jQuery:

import $ from 'jquery';
import 'jquery-ui';

$(function() {
  $('.sortable').sortable({
    placeholder: 'ui-state-highlight'
  });
  $('.draggable').draggable({
    connectToSortable: '.sortable',
    helper: 'clone',
    revert: 'invalid'
  });
  $('ul, li').disableSelection();
});

Dalam kod di atas, jquery dan jquery-ui mula-mula diperkenalkan melalui import, dan kemudian fungsi isihan seret-dan-lepas yang mudah dilaksanakan menggunakan kaedah boleh diisih, boleh seret dan lain-lain jQuery.

2. Pakej projek

Laksanakan perintah berikut untuk pakej:

$ npx webpack

Arahan di atas akan menghasilkan fail bundle.js dalam direktori dist, yang mengandungi semua kebergantungan kod, anda boleh terus memperkenalkan fail ke dalam halaman untuk menjalankan kod jQuery.

Ringkasan

Artikel ini memperkenalkan secara ringkas cara menggunakan webpack untuk membungkus projek jQuery Mula-mula, kebergantungan yang diperlukan dipasang, kemudian webpack dikonfigurasikan, dan akhirnya projek itu dibungkus dan dijana melalui npx. arahan webpack. fail bundle.js. Dalam projek sebenar, kami juga boleh menggunakan alatan seperti webpack-dev-server untuk melaksanakan fungsi seperti pembungkusan automatik dan muat semula panas, dengan itu meningkatkan kecekapan pembangunan dan kualiti kod.

Atas ialah kandungan terperinci Bagaimana untuk membungkus menggunakan projek jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!