찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Webpack을 사용하여 jQuery 플러그인 종속성을 효과적으로 관리하는 방법은 무엇입니까?

Webpack을 사용하여 jQuery 플러그인 종속성을 효과적으로 관리하는 방법은 무엇입니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-12-04 13:35:12232검색

How to Effectively Manage jQuery Plugin Dependencies with Webpack?

Webpack에서 jQuery 플러그인 종속성을 관리하는 방법

webpack을 사용할 때 애플리케이션 코드와 라이브러리를 별도의 번들로 구성하는 것이 일반적입니다. 예를 들어 모든 사용자 정의 코드에 대해 "bundle.js"를 생성하고 jQuery 및 React와 같은 라이브러리에 대해 "vendors.js"를 생성할 수 있습니다. 그러나 jQuery에 의존하고 "vendors.js" 내에 원하는 플러그인을 통합할 때 문제가 발생합니다.

ProvidePlugin: 전역 변수 주입

한 가지 접근 방식은 "$" 또는 "jQuery"와 같은 특정 식별자를 발견할 때 암시적 전역 변수를 삽입하는 ProvidePlugin. webpack을 구성하면 전역적으로 "$"를 만날 때 "var $"를 앞에 추가하도록 지시할 수 있습니다.

예:

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
]

imports-loader : 이 바인딩 구성

imports-loader는 수동 변수를 허용합니다. 주사. 일부 레거시 모듈은 "this"가 "module.exports"와 동일한 CommonJS 컨텍스트와 충돌할 수 있는 창 개체로 존재한다고 가정합니다. imports-loader는 이 동작을 재정의하고 "this"를 창 개체에 바인딩할 수 있습니다.

예:

module: {
    loaders: [
        {
            test: /[\/\]node_modules[\/\]some-module[\/\]index\.js$/,
            loader: "imports-loader?this=>window"
        }
    ]
}

imports-loader: AMD 비활성화

특정 모듈은 AMD 및 CommonJS를 포함한 여러 모듈 스타일을 지원합니다. 그러나 그들은 비전통적인 내보내기 방법을 정의하고 채택하는 데 우선순위를 둘 수 있습니다. imports-loader로 "define = false"를 설정하여 CommonJS를 강제하면 이를 피할 수 있습니다.

예:

module: {
    loaders: [
        {
            test: /[\/\]node_modules[\/\]some-module[\/\]index\.js$/,
            loader: "imports-loader?define=>false"
        }
    ]
}

script-loader: 전역 스크립트 가져오기

전역 변수가 문제가 되지 않고 단순히 레거시 스크립트를 실행하는 것이 목표이므로 스크립트 로더를 사용할 수 있습니다.