javascript - vue에서 jquery 사용이 실패합니다. jquery를 도입하면 사용할 수 있는데 jquery를 도입하는 플러그인이 정의되어 있지 않습니다. ?

Question

vue에서 jquery 사용이 실패했습니다. jquery를 도입하면 사용할 수 있는데 jquery를 도입하는 플러그인이 정의되어 있지 않습니다.
import 도입이 지원되지 않기 때문에 소스 코드를 변경할 수 있습니까? 모듈화를 지원하기 위해

Answer 1

원래 포스터와 동일한 문제가 발생했습니다. jquery의 타사 플러그인 jquery.mockjax.js를 인용한 다음 main.js에서 require('./assets/jquery.mockjax.js')를 호출했습니다. .에서 $가 나타나면 정의되지 않은 것입니다. require('./assets/jquery.mockjax.js')，出现$此时是undefined。

我是这样解决的：
通过npm install的方式去安装的jquery-mockjax，此时发现可以用了，$也有定义了。

然后我尝试了找了一下两者的不同：
首先通过npm install安装的jquery-mockjax 的源码和我之前直接引入的js文件是相同的。

(function(root, factory) {
    'use strict';
    console.log(arguments);
    console.log('root', root);
    // AMDJS module definition
    if ( typeof define === 'function' && define.amd && define.amd.jQuery ) {
        console.log('this is in amdjs module definition');
        define(['jquery'], function($) {
            return factory($, root);
        });

    // CommonJS module definition
    } else if ( typeof exports === 'object' && module.exports) {
        console.log('this is CommonJs module definition');

        // NOTE: To use Mockjax as a Node module you MUST provide the factory with
        // a valid version of jQuery and a window object (the global scope):
        // var mockjax = require('jquery.mockjax')(jQuery, window);

        module.exports = factory;

    // Global jQuery in web browsers
    } else {
        console.log('this is global jquery in web browsers');
        return factory(root.jQuery || root.$, root);
    }
}(this, function($, window) {
    'use strict';

这是源码部分，采用UMD的方式。

方式一：
通过require('./assets/jquery.mockjax.js')的方式去引入该文件，webpack编译后的代码是直接进入第三个判断分支进行判断，直接调用了该工厂函数，webpack在处理的时候this传入的是modules.exports对象，此时module.exports对象是找不到jquery的，因此报错。尝试将源码中的this改为global后，是可以解决的。网上也提供了不修改源码，通过imports-loader的方式将this赋值为window。require('import-loader?this=>window!./assets/jquery.mockjax.js')
方式二：
通过require('jquery-mockjax')

제가 해결한 방법은 다음과 같습니다.
npm install을 통해 jquery-mockjax를 설치했는데 사용이 가능한 것을 확인했고, $도 정의되어 있습니다.

그런 다음 둘의 차이점을 찾아보았습니다.
먼저 npm install을 통해 설치된 jquery-mockjax의 소스코드는 앞서 직접 가져온 js 파일과 동일합니다.

으아악

UMD 방식을 사용한 소스코드 부분입니다. 🎜 🎜방법 1:
require('./assets/jquery.mockjax.js')를 통해 파일을 도입하면 webpack으로 컴파일된 코드가 바로 3차 판단 브랜치에 들어갈 것으로 판단됩니다. 팩토리 함수가 직접 호출되는데, webpack이 처리 중일 때 module.exports 객체에 전달됩니다. 이때 module.exports 객체는 jquery를 찾을 수 없으므로 오류가 보고됩니다. 소스코드에서 이를 전역으로 변경해 보신 후 해결하실 수 있습니다. 인터넷에는 소스코드를 수정하지 않고 imports-loader를 통해 이를 window에 할당하는 방법도 있습니다. require('import-loader?this=>window!./assets/jquery.mockjax.js')
방법 2:
require('jquery-mockjax 전달) '), webpack으로 컴파일한 파일은 2차 브랜치에 직접 들어갑니다. 컴파일된 파일을 읽어보면 webpack이 2차 브랜치의 판단 조건을 기본 Commonjs 도입 방식인 true로 직접 설정한 것을 알 수 있습니다. 이는 또한 이 메서드가 오류를 보고하지 않는 이유를 설명합니다. 🎜 🎜이 예시를 통해 포스터에 대한 힌트를 얻을 수 있었으면 좋겠습니다. 포스터의 jquery 타사 플러그인도 UMD 형식이라면 제가 겪었던 것과 동일한 오류일 가능성이 높습니다. 🎜 🎜근데 왜 webpack으로 npm 패키지를 컴파일하는 것이 직접 가져온 js 파일을 컴파일하는 것과 다른지 궁금합니다. 공식 문서에서 이 부분에 대한 설명이 어디에 있는지 찾을 수 없었습니다. 또한 위의 마스터가 나에게 답변을 주실 수 있기를 바랍니다. 🎜

Answer 2

먼저 package.json의 종속성에 "jquery": "^2.2.3"을 추가한 다음 npm install

webpack.base.conf.js에 추가하세요

var webpack = require("webpack")

module.exports 끝에 추가

으아악

그런 다음 npm run dev를 다시 실행하세요

main.js에서 import $ from 'jquery'

로 가져와도 괜찮습니다🎜

Answer 3

어떤 플러그인(특히 이전 플러그인)도 가져올 수 없습니다. 그렇지 않고 npm이 이 플러그인의 소스 다운로드를 찾을 수 없으면
1의 두 가지 옵션만 있습니다. src가 들어오는 곳

2. 플러그인을 직접 수정하고 메소드를 내보내 플러그인을 노출하세요

Answer 4

jq 플러그인을 사용할 수 없는 이유는 jq 플러그인을 도입할 때 해당 플러그인을 실행하는 js의 $가 vue global에 정의되어 있지 않아 메소드를 찾을 수 없기 때문입니다. 이제 두 가지 방법이 있다는 것을 알았습니다.
(1)
1. index.html에 jq 플러그인의 jq.js 및 js를 소개합니다.
2. webpack.base.conf.js에 전역 변수 $를 추가합니다.

으아악

3.jq 플러그인을 사용해야하는 구성 요소에는 jq가 필요합니다. var $ = require('jquery').
(2)
1.index.html에 jq.js를 소개합니다
2.jq 플러그인을 사용해야 하는 컴포넌트에서 해당 플러그인의 js를 import하고 jq만 요구하면 됩니다.

안되면 다시 말해주세요

Answer 5

왜 vue 대신 jq를 사용하는 것을 그토록 꺼리시나요? . .

Answer 6

이 플러그인은 어떤 모듈식 시스템 사양도 준수하지 않으므로 import를 통해 해당 객체나 플러그인 생성자를 얻을 수 없으며, 이 플러그인에서는 jQuery가 창(전역 변수)의 속성이 되도록 요구합니다. , 그래서 모듈식 접근 방식을 사용합니다. 또한 더 까다롭습니다.

으아아아

그러면 $('#a').particleground()를 호출할 수도 있지만 직접 테스트해 본 적이 없어서 잘 모르겠습니다

사실 스크립트를 사용하여 index.html에 jquery와 이 플러그인을 직접 도입하는 것이 가능해야 합니다. eslint가 유용하다면 전역 $

을 설정하세요.