So verpacken Sie mit dem JQuery-Projekt

Angesichts der zunehmenden Beliebtheit und Nachfrage nach Front-End-Entwicklung verwenden immer mehr Projekte jQuery. Während der technischen Entwicklung müssen wir das Projekt jedoch häufig verpacken, um eine einfache Veröffentlichung und Bereitstellung zu ermöglichen. In diesem Artikel wird erläutert, wie Sie Webpack zum Packen von jQuery-Projekten verwenden.

1. Webpack und Abhängigkeiten installieren

Zuerst müssen Sie Webpack und zugehörige Abhängigkeiten im Projekt installieren. Sie können npm oder Yarn zum Installieren verwenden:

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

Unter diesen ist Webpack das Modul-Paketierungstool und Webpack-Cli ist das Befehlszeilentool von Webpack und jQuery-UI sind die jQuery-Bibliotheken und einige Komponenten, die wir packen müssen.

2. Webpack konfigurieren

1. Erstellen Sie eine Webpack-Konfigurationsdatei

Erstellen Sie eine webpack.config.js-Datei im Projektstammverzeichnis, um das Webpack zu konfigurieren. Importieren Sie zunächst einige erforderliche Knotenmodule:

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

2. Konfigurieren Sie als nächstes das Webpack. Konfigurieren Sie zunächst die Eingabe- und Ausgabepfade und andere Informationen:

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

Im obigen Code stellt der Eintrag die Eintragsdatei des Projekts dar Ausgabe stellt die Verpackung dar. Der Ausgabepfad und der Dateiname danach.

Als nächstes konfigurieren Sie einige Module und Plug-Ins:

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'
    })
  ]
}

Im obigen Code konfiguriert module.rules den Babel-Loader für die Verarbeitung der ES6-Syntax und seine Optionen konfigurieren @babel/preset-env für die Konvertierung der ES6-Syntax in ES5. Plugins werden mit webpack.ProvidePlugin konfiguriert, das zur Angabe globaler jQuery- und $-Variablen verwendet wird, sodass es nicht jedes Mal importiert werden muss, wenn im Projekt auf jQuery verwiesen wird.

3. Packen Sie das jQuery-Projekt

1. Erstellen Sie den Projektordner

Erstellen Sie den src-Ordner im Projektstammverzeichnis und erstellen Sie darin die Datei index.js zum Schreiben von jQuery-Code:

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

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

Im obigen Code jquery und jquery-ui wurden durch Import eingeführt, und dann wurde eine einfache Drag-and-Drop-Sortierfunktion mithilfe der sortierbaren, ziehbaren und anderen Methoden von jQuery implementiert.

2. Packen Sie das Projekt

Führen Sie den folgenden Befehl zum Packen aus:

$ npx webpack

Der obige Befehl generiert eine bundle.js-Datei im dist-Verzeichnis, die alle abhängigen Codes enthält. Führen Sie jQuery-Code aus.

Zusammenfassung

In diesem Artikel wird kurz vorgestellt, wie Sie Webpack zum Packen von jQuery-Projekten verwenden. Installieren Sie zunächst die erforderlichen Abhängigkeiten, konfigurieren Sie dann Webpack und packen Sie das Projekt schließlich über den Befehl npx webpack, um die Datei bundle.js zu generieren. In tatsächlichen Projekten können wir auch Tools wie den Webpack-Dev-Server verwenden, um Funktionen wie automatisches Packen und Hot-Reloading zu implementieren und so die Entwicklungseffizienz und Codequalität zu verbessern.

Das obige ist der detaillierte Inhalt vonSo verpacken Sie mit dem JQuery-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!