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

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

어플리케이션에서 Webpack을 사용하고 있습니다.여기서 2개의 엔트리 포인트를 만듭니다.모든 JavaScript 파일/코드에 대한 bundle.js와 jQuery 및 React와 같은 모든 라이브러리에 대한 vendors.js입니다.jQuery를 의존관계로 사용하여 vendors.js에도 포함시키고 싶은 플러그인을 사용하려면 어떻게 해야 합니까?이러한 플러그인에 여러 개의 종속성이 있는 경우에는 어떻게 해야 합니까?

현재 이 jQuery 플러그인을 사용하려고 합니다.https://github.com/mbklein/jquery-elastic.Webpack 매뉴얼에서는 servicePlugin 및 imports-loader에 대해 설명하고 있습니다.providPlugin을 사용했는데 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;

그런데도 브라우저 콘솔에 다음과 같은 오류가 발생합니다.

수집되지 않은 참조 오류: jQuery가 정의되지 않았습니다.

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

require는 정의되어 있지 않습니다.'

다음 행에 있습니다.

var jQuery = require("jquery")

단, 같은 플러그인을 vendors.js 파일에 추가하지 않고 다른 JavaScript 코드 파일을 포함하는 일반적인 AMD 방식으로 사용할 수 있습니다.

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

});

하지만 이것은 jquery.elastic을 의미하기 때문에 제가 하고 싶은 일이 아닙니다.source.js는 JavaScript 코드와 함께 bundle.js로 번들되며 모든 jQuery 플러그인을 vendors.js 번들에 포함시키고 싶습니다.그럼 어떻게 해야 할까요?

레거시 벤더 모듈을 포함하는 방법은 여러 가지가 있습니다.저는 이렇게 대처합니다.

1. 최소화되지 않은 CommonJS/AMD를 선호한다.dist

대부분의 모듈은dist의 버전main그들의 분야package.json이 기능은 대부분의 개발자에게 유용하지만 웹 팩의 경우src이 방법을 사용하면 의존관계를 보다 효율적으로 최적화할 수 있기 때문입니다(예를 들어 를 사용하는 경우).

// webpack.config.js

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

다만, 대부분의 경우,dist버전도 정상적으로 동작합니다.

---

2. 를 사용합니다.ProvidePlugin암묵적인 구형을 주사하다

대부분의 레거시 모듈은 jQuery 플러그인이 다음과 같이 특정 글로벌 존재에 의존합니다.$또는jQuery이 시나리오에서는 웹 팩을 설정하여 프리펜드할 수 있습니다.var $ = require("jquery")세계와 마주칠 때마다$식별자

var webpack = require("webpack");

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

---

3. Import-loader를 사용하여 설정한다.this

은 ""에 합니다.this가 되다window 이 Common(공통)에서 실행되는 경우에 합니다.:this는 「」와 같습니다.module.exports이 .을 덮어쓸 수 .this수입품 거래와 함께요

실행합니다.npm i imports-loader --save-dev에.

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

Import-loader를 사용하여 모든 종류의 변수를 수동으로 주입할 수도 있습니다., '아주머니'는ProvidePlugin암묵적인 글로벌에 관해서는 더 유용합니다.

---

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

AMD, CommonJ, 레거시 등 다양한 모듈 스타일을 지원하는 모듈이 있습니다.의 경우, 에 「 」, 「 」를 합니다.define그런 다음 이상한 코드를 사용하여 부동산을 내보냅니다.하는 데 이 될 수 .「JS」의 설정에 define = false.

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

---

5. 스크립트 로더를 사용하여 스크립트를 글로벌하게 Import하다

글로벌 변수를 신경 쓰지 않고 레거시 스크립트가 작동하도록 하려면 스크립트 로더를 사용할 수도 있습니다.합니다.은 마치 를 .이것은 마치 를 통해 모듈을 포함시킨 것과 같습니다.<script>붙이다

---

. 6. 을 합니다.noParse 원고를

의 AMD/CommonJ AMD/Common을 JS의 경우dist를 붙일 수 noParse그러면 웹 팩은 해석 없이 모듈을 포함하므로 빌드 시간을 단축하는 데 사용할 수 있습니다.즉, AST를 필요로 하는 기능은ProvidePlugin을 사용하다

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

jquery에 대한 글로벌 액세스의 경우 몇 가지 옵션이 있습니다.최근 웹 팩 프로젝트에서 jquery에 대한 글로벌 액세스를 원했기 때문에 플러그인 선언에 다음 사항을 추가했습니다.

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

이는 jquery가 JavaScript 소스 코드 내에서 글로벌 참조 $ 및 jQuery를 통해 액세스할 수 있음을 의미합니다.

물론 npm을 통해 jquery를 설치해야 합니다.

$ npm i jquery --save

이 접근방식의 실천 예를 들자면, 제 앱을 github에 포킹해 주세요.

을 하려고 잘 jQuery 을 사용해야 , 을 jQuery에 .또한 다음 명령어를 입력했습니다.entry.js:

var $ = require('jquery');
window.jQuery = $;
window.$ = $;

가 곳 .jqueryplugin.min.js ★★★★★★★★★★★★★★★★★」window.$이치노

노출을 하면서 일을 잘하게 했어요.$ ★★★★★★★★★★★★★★★★★」jQueryWeb pack 3.8.1 웹 팩

j쿼리하다 you you you you you you you you 、 you 、 you 、 you you 、 。@3.2.1최신 버전을 설치하거나 다른 버전을 지정합니다.

npm install --save jquery@3.2.1

expose-loader아직 설치되지 않은 경우 개발 종속성으로 간주됩니다.

npm install expose-loader --save-dev

jQuery를 로드 및 표시하도록 웹 팩을 구성합니다.

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  entry: [
    // entry bits
  ],
  output: {
    // output bits
  },
  module: {
    rules: [
      // any other rules
      {
        // Exposes jQuery for use outside Webpack build
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      }
    ]
  },
  plugins: [
    // Provides jQuery for other JS bundled with Webpack
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

webpack.config.js 파일에서 다음을 추가합니다.

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

npm을 사용하여 jQuery를 설치합니다.

$ npm i jquery --save

app.js 파일에서 다음 행을 추가합니다.

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

이건 나한테 효과가 있었어.:)

이를 webpack.config.js의 플러그인 어레이에 추가합니다.

new webpack.ProvidePlugin({
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
})

보통 jquery가 필요합니다.

require('jquery');

다른 스크립트에 표시되는 문제가 해결되지 않으면 (엔트리의 js)를 통해 글로벌콘텍스트에 명시적으로 배치해 보겠습니다.

window.$ = jQuery;

제공된 답변 중 몇 가지를 시도해 봤지만 모두 효과가 없는 것 같습니다.그리고 이렇게 해봤어요.

new webpack.ProvidePlugin({
    'window.jQuery'    : 'jquery',
    'window.$'         : 'jquery',
    'jQuery'           : 'jquery',
    '$'                : 'jquery'
});

어떤 버전을 사용하든 작동되는 것 같습니다.

이것은 Web Pack 3으로 동작합니다.

webpack.config.babel.disc 파일에서 다음을 수행합니다.

resolve: {
    alias: {
         jquery: "jquery/src/jquery"
    },
 ....
}

또한 Provid Plugin 사용

new webpack.ProvidePlugin({
        '$': 'jquery',
        'jQuery': 'jquery',
    })

편집: 웹 팩을 단순한 웹 프로젝트의 모듈 번들러로 사용하여 자체 코드를 정리할 수 있습니다.다음 솔루션은 웹 팩 설정에 많은 시간을 할애하지 않고 모듈 내에서 예상대로 외부 라이브러리를 작동시키고 싶은 사용자를 위한 것입니다.(-1 이후 편집)

아직 문제가 있거나 외부 구성/웹 팩 플러그인 추가 구성을 피하고 싶은 경우 빠르고 심플한(es6) 솔루션:

<script src="cdn/jquery.js"></script>
<script src="cdn/underscore.js"></script>
<script src="etc.js"></script>
<script src="bundle.js"></script>

모듈 내부:

const { jQuery: $, Underscore: _, etc } = window;

제가 찾은 최고의 솔루션은 다음과 같습니다.

https://github.com/angular/angular-cli/issues/5139#issuecomment-283634059

기본적으로 typings.d.ts에 더미 변수를 추가하고 코드에서 "import * as $ from 'jquery"를 삭제한 후 수동으로 jQuery 스크립트에 태그를 SPA html에 추가해야 합니다.이렇게 하면 웹 팩이 방해가 되지 않고 모든 스크립트에서 동일한 글로벌 jQuery 변수에 액세스할 수 있습니다.

이 기능은 webpack.config.js에서 사용할 수 있습니다.

    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),

다른 javascript 또는 HTML 추가:

global.jQuery = require('jquery');

언급URL : https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack