Webpack에서 jQuery 플러그인 종속성 관리

질문 : Webpack에서 jQuery 플러그인 종속성 관리

---

내 애플리케이션에서 Webpack을 사용하고 있는데, 여기에서 모든 JavaScript 파일 / 코드에 대한 bundle.js와 jQuery 및 React와 같은 모든 라이브러리에 대한 vendor.js의 두 가지 진입 점을 만듭니다. 종속성으로 jQuery가있는 플러그인을 사용하고이를 vendor.js에도 포함하려면 어떻게해야합니까? 해당 플러그인에 여러 종속성이 있으면 어떻게됩니까?

현재 https://github.com/mbklein/jquery-elastic 이 jQuery 플러그인을 사용하려고합니다. Webpack 문서에는 providePlugin 및 imports-loader가 언급되어 있습니다. providePlugin을 사용했지만 여전히 jQuery 객체를 사용할 수 없습니다. 내 webpack.config.js는 다음과 같습니다.

var webpack = require('webpack');
var bower_dir = __dirname + '/bower_components';
var node_dir = __dirname + '/node_modules';
var lib_dir = __dirname + '/public/js/libs';

var config = {
    addVendor: function (name, path) {
        this.resolve.alias[name] = path;
        this.module.noParse.push(new RegExp(path));
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jquery: "jQuery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
    ],
    entry: {
        app: ['./public/js/main.js'],
        vendors: ['react','jquery']
    },
    resolve: {
        alias: {
            'jquery': node_dir + '/jquery/dist/jquery.js',
            'jquery.elastic': lib_dir + '/jquery.elastic.source.js'
        }
    },
    output: {
        path: './public/js',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'jsx-loader' },
            { test: /\.jquery.elastic.js$/, loader: 'imports-loader' }
        ]
    }
};
config.addVendor('react', bower_dir + '/react/react.min.js');
config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js');
config.addVendor('jquery.elastic', lib_dir +'/jquery.elastic.source.js');

module.exports = config;

그러나 이것에도 불구하고 브라우저 콘솔에 여전히 오류가 발생합니다.

잡히지 않은 ReferenceError : jQuery가 정의되지 않았습니다.

마찬가지로 imports-loader를 사용하면 오류가 발생합니다.

요구가 정의되지 않았습니다. '

이 줄에서 :

var jQuery = require("jquery")

그러나 vendor.js 파일에 추가하지 않고 대신 다른 JavaScript 코드 파일을 포함하는 방법과 같이 일반적인 AMD 방식으로 필요한 경우 동일한 플러그인을 사용할 수 있습니다.

define(
[
    'jquery',
    'react',
    '../../common-functions',
    '../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
    $("#myInput").elastic() //It works

});

그러나 이것은 jquery.elastic.source.js가 bundle.js의 JavaScript 코드와 함께 번들로 제공되고 모든 jQuery 플러그인이 vendor.js 번들에 포함되기를 원하므로 제가 원하는 것은 아닙니다. 그렇다면 이것을 달성하는 방법은 무엇입니까?

답변

---

레거시 공급 업체 모듈을 포함하는 방법을 서로 다른 방식으로 혼합했습니다. 이것이 내가 그것을 다루는 방법입니다.

1. dist보다 unminified CommonJS/AMD를 선호

대부분의 모듈 package.json main 필드에 dist 버전을 연결합니다. 이것은 대부분의 개발자에게 유용하지만, webpack의 경우 src 버전을 별칭으로 지정하는 것이 좋습니다. 이렇게하면 webpack이 종속성을 더 잘 최적화 할 수 있기 때문입니다 (예 : DedupePlugin ).

// webpack.config.js

module.exports = {
    ...
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};

그러나 대부분의 경우 dist 버전도 잘 작동합니다.

---

2. ProvidPlugin을 사용하여 암묵적 globals을 주입합니다.

$ 또는 jQuery 에서 수행하는 것과 같이 특정 전역의 존재에 의존합니다. $ 식별자를 만날 때마다 var $ = require("jquery") 앞에 추가하도록 webpack을 구성 할 수 있습니다.

var webpack = require("webpack");

    ...

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

---

3. imports-loader 를 사용하여 구성합니다.

일부 레거시 모듈은 this window 개체에 의존합니다. 모듈은 CommonJS 콘텍스트에서 실행되는 경우에 문제가된다 this 동일 module.exports . 이 경우 imports-loader this 를 재정의 할 수 있습니다.

npm i imports-loader --save-dev 를 실행 한 다음

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

imports-loader를 사용하여 모든 종류의 변수를 수동으로 주입 할 수도 있습니다. 그러나 대부분의 경우 ProvidePlugin 은 암시 적 전역에 대해 더 유용합니다.

---

4. imports-loader 를 사용하여 AMD를 비활성화합니다.

AMD, CommonJS 및 레거시와 같은 다양한 모듈 스타일을 지원하는 모듈이 있습니다. 그러나 대부분의 경우 먼저 define 확인한 다음 일부 기발한 코드를 사용하여 속성을 내 보냅니다. define = false 를 설정하여 CommonJS 경로를 강제하는 데 도움이 될 수 있습니다.

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

---

5. script-loader 를 사용하여 스크립트를 전체적으로 가져옵니다.

전역 변수에 관심이없고 레거시 스크립트가 작동하기를 원하는 경우 스크립트 로더를 사용할 수도 있습니다. <script> 태그를 통해 포함시킨 것처럼 전역 컨텍스트에서 모듈을 실행합니다.

---

6. noParse를 사용하여 large dists 포함

모듈의 AMD / CommonJS 버전이없고 dist noParse 로 플래그 지정할 수 있습니다. 그런 다음 웹팩은 모듈을 구문 분석하지 않고 포함하기 만하면 빌드 시간을 개선하는 데 사용할 수 있습니다. ProvidePlugin 과 같이 AST가 필요한 모든 기능이 작동하지 않습니다.

module: {
    noParse: [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]
}

출처 : https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack