jqueryプロジェクトを使ってパッケージ化する方法

フロントエンド開発の人気と需要の高まりに伴い、jQuery を使用するプロジェクトが増えていますが、エンジニアリング開発中は、リリースとデプロイを容易にするためにプロジェクトをパッケージ化する必要があることがよくあります。この記事では、webpack を使用して jQuery プロジェクトをパッケージ化する方法を紹介します。

1. Webpack と依存関係をインストールする

まず、プロジェクトに Webpack と関連する依存関係をインストールする必要があります。インストールには npm または Yarn を使用できます:

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

、webpackはモジュールパッケージ化ツール、webpack-cliはwebpackのコマンドラインツール、jqueryとjquery-uiはjQueryライブラリとパッケージ化する必要があるいくつかのコンポーネントです。

2. webpack の設定

1. webpack 設定ファイルの作成

webpack を設定するために、プロジェクトのルート ディレクトリに webpack.config.js ファイルを作成します。まず必要なノード モジュールをいくつかインポートします:

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

2. webpack を構成します:

次に、webpack を構成します。最初に入力パスと出力パスおよびその他の情報を構成します:

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

上記のコード、entry はプロジェクトのエントリ ファイルを表し、output はパッケージ化された出力パスとファイル名を表します。

次に、いくつかのモジュールとプラグインを構成します:

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

上記のコードでは、module.rules が ES6 構文の処理に使用される babel-loader で構成され、そのオプションが構成されています@babel/preset-env を使用して、ES6 構文を ES5 に変換するために使用されます。プラグインは、グローバル jQuery および $ 変数を指定するために使用される webpack.ProvidePlugin で構成されているため、プロジェクト内で jQuery が参照されるたびにプラグインをインポートする必要はありません。

3. jQuery プロジェクトのパッケージ化

1. プロジェクト フォルダーの作成

プロジェクトのルート ディレクトリに src フォルダーを作成し、その中に書き込み用のindex.js ファイルを作成します。 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();
});

上記のコードでは、最初にインポートを通じて jquery と jquery-ui が導入され、次に jQuery の並べ替え可能メソッド、ドラッグ可能メソッド、およびその他のメソッドを使用して、単純なドラッグ アンド ドロップの並べ替え機能が実装されます。

2. プロジェクトのパッケージ化

次のコマンドを実行してパッケージ化します:

$ npx webpack

上記のコマンドは、すべての依存関係コードを含む Bundle.js ファイルを dist ディレクトリに生成します。 、ファイルをページに直接導入して jQuery コードを実行できます。

概要

この記事では、webpack を使用して jQuery プロジェクトをパッケージ化する方法を簡単に紹介します。まず、必要な依存関係がインストールされ、次に webpack が構成され、最後にプロジェクトがパッケージ化され、npx を通じて生成されます。 webpack コマンド.bundle.js ファイル。実際のプロジェクトでは、webpack-dev-serverなどのツールを利用して自動パッケージ化やホットリロードなどの機能を実装することもでき、開発効率やコード品質を向上させることができます。

以上がjqueryプロジェクトを使ってパッケージ化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。