How to package using jquery project

With the increasing popularity and demand for front-end development, more and more projects use jQuery. However, during engineering development, we often need to package the project for easy release and deployment. This article will introduce how to use webpack to package jQuery projects.

1. Install webpack and dependencies

First, you need to install webpack and related dependencies in the project. You can use npm or yarn to install:

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

Among them, webpack is module packaging Tools, webpack-cli is the command line tool of webpack, jquery and jquery-ui are the jQuery library and some components we need to package.

2. Configure webpack

1. Create the webpack configuration file

Create the webpack.config.js file in the project root directory for configuring webpack. First import some necessary node modules:

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

2. Configure webpack

Next, configure webpack. First configure the input and output paths and other information:

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

The above code , entry represents the entry file of the project, and output represents the packaged output path and file name.

Next configure some modules and 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'
    })
  ]
}

In the above code, module.rules is configured with babel-loader, which is used to process ES6 syntax, and its options are configured with @babel/preset-env , used to convert ES6 syntax to ES5. Plugins are configured with webpack.ProvidePlugin, which is used to specify global jQuery and $ variables, so that there is no need to import it every time when jQuery is referenced in the project.

3. Package the jQuery project

1. Create the project folder

Create the src folder in the project root directory and create the index.js file in it for Writing 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();
});

In the above code, jquery and jquery-ui are first introduced through import, and then jQuery's sortable, draggable and other methods are used to implement a simple drag-and-drop sorting function.

2. Packaging project

Execute the following command to package:

$ npx webpack

The above command will generate a bundle.js file in the dist directory, which contains all dependencies code, you can directly introduce the file into the page to run the jQuery code.

Summary

This article briefly introduces how to use webpack to package jQuery projects. First, the necessary dependencies are installed, then webpack is configured, and finally the project is packaged and generated through the npx webpack command. bundle.js file. In actual projects, we can also use tools such as webpack-dev-server to implement functions such as automatic packaging and hot reloading, thereby improving development efficiency and code quality.

The above is the detailed content of How to package using jquery project. For more information, please follow other related articles on the PHP Chinese website!