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

위 코드에서 항목은 프로젝트의 항목 파일을 나타내고 출력은 이후의 출력 경로와 파일 이름을 나타냅니다.

다음으로 일부 모듈과 플러그인을 구성하세요.

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를 구성하고 해당 옵션은 ES6 구문을 ES5로 변환하기 위해 @babel/preset-env를 구성합니다. 플러그인은 전역 jQuery 및 $ 변수를 지정하는 데 사용되는 webpack.ProvidePlugin으로 구성되므로 프로젝트에서 jQuery가 참조될 때마다 이를 가져올 필요가 없습니다.

3. jQuery 프로젝트 패키징

1. 프로젝트 폴더를 생성합니다.

프로젝트 루트 디렉토리에 src 폴더를 생성하고 그 안에 jQuery 코드 작성을 위한 index.js 파일을 생성합니다.

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

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

위 코드에서 먼저 import를 통해 jquery와 jquery-ui를 도입한 뒤 jQuery의 sortable, draggable 등의 방법을 이용하여 간단한 드래그 앤 드롭 정렬 기능을 구현했습니다.

2. 프로젝트 패키징

다음 명령을 실행하여 패키징합니다.

$ npx webpack

위 명령은 dist 디렉터리에 모든 종속 코드가 포함된 Bundle.js 파일을 생성합니다. 파일을 페이지에 직접 도입할 수 있습니다. jQuery 코드를 실행합니다.

요약

이 글에서는 webpack을 사용하여 jQuery 프로젝트를 패키징하는 방법을 간략하게 소개합니다. 먼저 필요한 종속성을 설치한 다음 webpack을 구성하고 마지막으로 npx webpack 명령을 통해 프로젝트를 패키징하여 Bundle.js 파일을 생성합니다. 실제 프로젝트에서는 webpack-dev-server와 같은 도구를 사용하여 자동 패키징, 핫 리로딩 등의 기능을 구현하여 개발 효율성과 코드 품질을 향상시킬 수도 있습니다.

위 내용은 jquery 프로젝트를 사용하여 패키징하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!