programing

웹 팩: 각도 자동 검출 jQuery를 만들고 jqLite 대신 angular.element로 사용하는 방법

topblog 2023. 3. 19. 17:48
반응형

웹 팩: 각도 자동 검출 jQuery를 만들고 jqLite 대신 angular.element로 사용하는 방법

각도 1.4입니다.이 프로젝트에서는 여러 jQuery 플러그인을 사용하며, 이 플러그인은 각도 방향으로 포장됩니다.으로 사용되었습니다.angular.elementangularangular.element jqLite가

j 대신 .Query'는 jqLite의 angular를 나타냅니다.를 요구하려고 .app.jsrequire('jquery')jQuery를 사용하여 합니다.require(expose?$!expose?jQuery!jquery).

내가 뭘 angular.elementjqLite를 .

제 연구 결과는 다음과 같습니다.

  1. Common() Import(가져오기) 에도 변수 JS(가져오기) 및 Angular(가져오기)에 됩니다.window.angular 안 돼요.expose웹 팩을 사용한 경우:Angular는 Common으로 로드되었을 때 글로벌하게 'window.angular'에 할당됩니까?JS 모듈?
  2. Provider 모든 에 Provider Plugin을 합니다.Query's jQuery's jQuery's jQuery's jQuery's 。require('jquery')가 100% 접속하지 않는 것 jQuery직접 을 시도합니다.window.jQuerybindJQuery이 방법은 도움이 되지 않습니다.웹 팩을 사용하여 jQuery를 실제 Window 객체에 노출합니다.
  3. Plugin, Provider Plugin과 Plugin은imports-loader부적합한 것 같습니다.는 ★★★★★★★★★를 원한다.window.jQuery만 아니라.jQuery.
  4. 를 사용하면 jquery는 window 객체에 도달합니다.문제는 Babel이 모든 Import를 결과 코드의 모듈 상단에 호이스트한다는 것입니다.그렇기 때문에require(expose?jquery!jquery)import angular from "angular" 파일, 번들 내, " " " "require("angular")ery jquery 전를 를 Angular import Import ququ jquery 。ECMA6 Import Webpack Loader 。
  5. .import" " 가 require jquery: "jquery" :import "jquery" ★★★★★★★★★★★★★★★★★」import $ from "jquery" 아니라, 이에요.require(jquery): (Petr Averyanov: ECMAScript 6 imports에서 Webpack loaders 구문(imports/exports/expose?)을 사용하는 방법).jquery 소스 코드는 jquery가 필요한 방법을 나타내는 특수 래퍼로 래핑됩니다(AMD/require, Common).JS 또는 글로벌하게<script>이치노한 논거를 한다.noGlobal하여 jquery를 .window.jQuery「」의 해, 「」noGlobal 2.2. 、 . jquery 2.2.4 、import "jquery" noGlobal === true ★★★★★★★★★★★★★★★★★」window.jQuery작성되지 않았습니다.의 jquery는 IIRC를 jquery는 IIRC를 인식하지 못했습니다.import Common(공통)으로 JS 를 추가했습니다.import네임스페이스로 edjquery를 수 했습니다.edjquery 를 、 를 ed edjquery는 edjquery를 angular로 설정합니다.

: 제 세: : 제제 details details details details detailsapp.js:

'use strict';

require("expose?$!expose?jQuery!jquery");
require("metisMenu/dist/metisMenu");
require("expose?_!lodash");
require("expose?angular!angular");

import angular from "angular";
import "angular-animate";
import "angular-messages";
import "angular-resource";
import "angular-sanitize";
import "angular-ui-router";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
import "angular-bootstrap";

require("../assets/styles/style.scss");
require("../assets/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css");

// Import all html files to put them in $templateCache
// If you need to use lazy loading, you will probably need
// to remove these two lines and explicitly require htmls
const templates = require.context(__dirname, true, /\.html$/);
templates.keys().forEach(templates);

import HomeModule from "home/home.module";
import UniverseDirectives from "../components/directives";

angular.module("Universe", [
    "ngAnimate",
    "ngMessages",
    "ngResource",
    "ngSanitize",
    "ui.router",
    "ui.bootstrap",

    HomeModule.name,
    UniverseDirectives.name,
])
.config(function($urlRouterProvider, $locationProvider, $stateProvider){
    // $urlRouterProvider.otherwise('/');

    // $locationProvider.html5Mode(true);

    $stateProvider
      .state('test', {
        url: "/test",
        template: "This is a test"
      });
});

John-Reilly로부터 다음과 같은 답변을 받았습니다.

bob-sponge의 답변은 정확하지 않습니다.Provide 플러그인은 실제로 처리 중인 모듈에서 텍스트 치환을 수행하고 있기 때문에 제공할 필요가 있습니다.window.jQuery 있는 것) (각도가 찾고 있는 것)jQuery.

고객님의 고객명webpack.config.js다음 항목을 플러그인에 추가해야 합니다.

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

이는 웹 팩 ProvidPlugin을 사용하며 웹 패키지화 시점(© 2016 John Reilly)에서 코드 투 창의 모든 참조를 사용합니다.jQuery는 jQuery가 포함된 웹 팩 모듈에 대한 참조로 대체됩니다.번들된 파일을 보면, 이 코드를 체크할 수 있습니다.window 반대하다jQuery.

jQuery = isUndefined(jqName) ?
  __webpack_provided_window_dot_jQuery : // use jQuery (if present)
    !jqName ? undefined : // use jqLite
    window[jqName]; // use jQuery specified by `ngJq`

그렇습니다. 웹 팩은 Angular에 jQuery를 제공하면서도 아직 배치하지 않았습니다.jQuery로 window

!업데이트

ES6 예제에서는 angular에 대해 여전히 공통Js를 사용해야 합니다.

import $ from "jquery"

window.$ = $;
window.jQuery = $;

var angular = require("angular");

아래가 원래의 답입니다.

나는 더 쉬운 해결책을 목표로 하고 싶다.jQuery 창을 글로벌하게 만들면 각도도 이를 인식할 수 있습니다.

var $ = require("jquery")

window.$ = $;
window.jQuery = $;

var angular = require("angular");

또는 고객님의 경우(OUT DATED):

import $ from "jquery"

window.$ = $;
window.jQuery = $;

import angular from "angular";

이것이 도움이 되었으면 합니다:)

이 경우 Provid Plugin을 사용하는 것이 좋습니다.다음 행을 플러그인 섹션에서 웹 팩 구성에 추가하면 jquery를 앱에서 사용할 수 있습니다.

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

webpack + Angular에서 jQuery not jQLite를 사용하고 싶은 일본어 기사가 있습니다.JS도 같은 문제에 대해 이야기하고 있는 것 같습니다(일본어는 아직 모릅니다.나는 영어로 번역하기 위해 구글을 이용했고, 이 멋진 답변에 대한 크레딧은 cither로 보내졌다.

그는 이 문제를 해결하기 위한 네 가지 방법을 제공합니다.

  1. 창에 직접 할당(대단히 쿨하지 않음)

    window.jQuery = require('jquery');
var angular = require('angular');
console.log(angular.element('body'));
//[body, prevObject: jQuery.fn.init[1], context: document, selector: "body"]

  2. 노출 로더를 사용합니다(좋지만 그다지 쿨하지는 않습니다).

    npm install --saveDev expose-loader

    webpack.config.js

    module.exports = {
    entry: "./index",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [{
            test: /\/jquery.js$/,
            loader: "expose?jQuery"
        }]
    }
};

    사용방법:

    require('jquery');
var angular = require('angular');
console.log(angular.element('body'));
//[body, prevObject: jQuery.fn.init[1], context: document, selector: "body"]

  3. 노출 로더 사용(더 우수)

    npm install --saveDev expose-loader

    webpack.config.js

        module.exports = {
    entry: "./index",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [{
            test: /\/angular\.js$/,
            loader: "imports?jQuery=jquery"
        }, {
            test: /\/jquery.js$/,
            loader: "expose?jQuery"
        }]
    }
};

    사용방법:

    var angular = require('angular');
console.log(angular.element('body'));
//[body, prevObject: jQuery.fn.init[1], context: document, selector: "body"]

  4. Provid Plugin 사용(최적의 솔루션)

    이것은 실제로 스터드가 여기서 받아들인 대답과 같다.

    module.exports = {
    entry: "./index",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    plugins: [
        new webpack.ProvidePlugin({
            "window.jQuery": "jquery"
        })
    ],
};

    사용방법:

    var angular = require('angular');
console.log(angular.element('body'));
//[body, prevObject: jQuery.fn.init[1], context: document, selector: "body"]

똑같은 문제가 있어서 여기서 얘기하려고요..expose-loader이치노ProvidePluginJquery에 합니다.window좋은 생각이기도 합니다.

그래서 저는 저의 해결책을 제시합니다.이것은 @BobSponge의 답변과 @Bob의 힌트/코멘트를 매쉬업한 것입니다.그래서 독창적인 것은 아무것도 없고, 나에게 효과가 있는 것(Babel/ES6, BTW를 사용하지 않는 프로젝트에서는)을 보여 주고, 왜 효과가 있는지를 설명하려고 할 뿐입니다.

(마지막) 방법은 노출 로더를 사용하는 것입니다.

그들의 페이지에서 설명한 것처럼 우리는 그 안에module.loaders:

{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },

'에서는plugins츠키다

        new webpack.ProvidePlugin(
        {
            $: 'jquery',
            jQuery: 'jquery',
            _: 'lodash',
            // [...] some other libraries that put themselves in the global scope.
            //angular: 'angular', // No, I prefer to require it everywhere explicitly.
        }),

코드 내에서 이들 변수의 글로벌 오카렌스를 찾아 각 모듈의 로컬 변수에 입력해야 합니다.기존 프로젝트의 이행을 용이하게 합니다(Require에서).JS에서 Webpack으로)와 같이...만약 당신이 수입에 명시적인 것을 선호한다면 우리는 이 플러그인이 없어도 된다고 생각합니다.

그리고 중요한 것은 어플리케이션의 엔트리 포인트에서는 원하는 순서대로 요구한다는 것입니다.제 경우 벤더 번들을 작성했기 때문에 이 번들의 순서는 다음과 같습니다.

require('jquery');

require('lodash');
// [...]

var angular = require('angular');
// Use the angular variable to declare the app module, etc.

은 웹 팩이 합니다.requires(플러그인/로더를 사용하여 순서를 변경하는 경우는 제외).그러나 Import는 격리되어 있기 때문에(글로벌 리크가 없기 때문에) Angular는 jQuery 라이브러리를 볼 수 없었습니다.에, 「」가 하게 됩니다.expose했다)window.jQuery = require('jquery');하지만 효과가 없었습니다.아마 너무 늦었을지도 모릅니다.)

언급URL : https://stackoverflow.com/questions/36065931/webpack-how-to-make-angular-auto-detect-jquery-and-use-it-as-angular-element-in

반응형

'programing' 카테고리의 다른 글

리액션이 있는 루프에는 어떻게 사용합니까?  (0) 2023.03.19
단일 SQL에 여러 "WITH AS"를 포함할 수 있습니까? - Oracle SQL  (0) 2023.03.19
컨슈머에서 프로바이더의 컨텍스트 값을 업데이트하려면 어떻게 해야 합니까?  (0) 2023.03.19
jPOST 매개 변수로 문자열 전송 쿼리  (0) 2023.03.19
오류: 소스 경로가 없습니다. resources\android\icon\drawable-hdpi-icon.png  (0) 2023.03.19

'programing'의 다른글

  • 현재글웹 팩: 각도 자동 검출 jQuery를 만들고 jqLite 대신 angular.element로 사용하는 방법

관련글

댓글

티스토리툴바