어떻게 ES6 구문을 사용하여 JQuery와 가져?

해결법

1.
```
import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;
```
@nem 코멘트에서 제안 첫째는, 가져 오기가 node_modules에서 수행해야 / :

다음으로, 글로브 - 내가 (예를 들어, jQuery를하고 $)를 수입하고있어 개체를 알고 같은 straigforward import 문이 작동 할 수 있도록 * 된 직후는 잘못된 것입니다.

마지막으로 당신은 창을 사용하여 다른 스크립트에 노출해야합니다. $ = $.

그런 다음, 그래서 오버 헤드 여기에, 모든 용도, browserify 제거 가져 오기 중복을 충당하기 위해 모두 $와 jQuery를로 가져올 수 없습니다! ^ o ^ Y
2.두 줄 에두아르 로페즈의 솔루션을 기반으로하지만, :

두 줄 에두아르 로페즈의 솔루션을 기반으로하지만, :
```
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
```
3.글로벌 범위에서 전체 jQuery의 내용을 가져옵니다. JQuery와 모든 내 보낸 바인딩을 포함하는 현재 범위에이 삽입 $.

글로벌 범위에서 전체 jQuery의 내용을 가져옵니다. JQuery와 모든 내 보낸 바인딩을 포함하는 현재 범위에이 삽입 $.
```
import * as $ from 'jquery';
```
이제 $는 window 객체에 속한다.
4.아래 같은 모듈 컨버터를 만들 수 있습니다 :

아래 같은 모듈 컨버터를 만들 수 있습니다 :
```
// jquery.module.js
import 'https://code.jquery.com/jquery-3.3.1.min.js'
export default window.jQuery.noConflict(true)
```
이 jQuery를 도입 전역 변수를 제거하고 기본값으로의 jQuery 객체를 내 보냅니다.

그런 다음 스크립트에서 사용 :
```
// script.js
import $ from "./jquery.module.js";

$(function(){
  $('body').text('youpi!');
});
```
문서의 모듈로로드하는 것을 잊지 마세요 :
```
<script type='module' src='./script.js'></script>
```
http://plnkr.co/edit/a59ETj3Yo2PJ0Aqkxbeu?p=preview

5.허용 대답은 나를 위해 작동하지 않았다 참고 :이 대답은 여기에 속하는 경우 롤업 JS를 사용 몰라 후 NPM 내가 --save JQuery와 custom.js에서

허용 대답은 나를 위해 작동하지 않았다 참고 :이 대답은 여기에 속하는 경우 롤업 JS를 사용 몰라 후 NPM 내가 --save JQuery와 custom.js에서

import {$, jQuery} from 'jquery';

또는

import {jQuery as $} from 'jquery';

나는 오류가 발생했습니다 : 모듈 ... node_modules / JQuery와 / DIST / jquery.js 내 보내지 않습니다 jQuery를 또는 모듈 ... node_modules / JQuery와 / DIST / jquery.js 내 보내지 않습니다 $ rollup.config.js

export default {
    entry: 'source/custom',
    dest: 'dist/custom.min.js',
    plugins: [
        inject({
            include: '**/*.js',
            exclude: 'node_modules/**',
            jQuery: 'jquery',
            // $: 'jquery'
        }),
        nodeResolve({
            jsnext: true,
        }),
        babel(),
        // uglify({}, minify),
    ],
    external: [],
    format: 'iife', //'cjs'
    moduleName: 'mycustom',
};

대신 롤업 분사의 시도

commonjs({
   namedExports: {
     // left-hand side can be an absolute path, a path
     // relative to the current directory, or the name
     // of a module in node_modules
     // 'node_modules/jquery/dist/jquery.js': [ '$' ]
     // 'node_modules/jquery/dist/jquery.js': [ 'jQuery' ]
        'jQuery': [ '$' ]
},
format: 'cjs' //'iife'
};

package.json

  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-eslint": "6.1.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-external-helpers": "6.18.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-register": "6.9.0",
    "eslint": "2.12.0",
    "eslint-config-airbnb-base": "3.0.1",
    "eslint-plugin-import": "1.8.1",
    "rollup": "0.33.0",
    "rollup-plugin-babel": "2.6.1",
    "rollup-plugin-commonjs": "3.1.0",
    "rollup-plugin-inject": "^2.0.0",
    "rollup-plugin-node-resolve": "2.0.0",
    "rollup-plugin-uglify": "1.0.1",
    "uglify-js": "2.7.0"
  },
  "scripts": {
    "build": "rollup -c",
  },

이것은 일 : 롤업 주입 한 commonjs 플러그인 삭제

import * as jQuery from 'jquery';

다음 custom.js에서

$(function () {
        console.log('Hello jQuery');
});

6.웹팩 사용자의 경우 플러그인의 배열에 아래에 추가 할 수 있습니다.

웹팩 사용자의 경우 플러그인의 배열에 아래에 추가 할 수 있습니다.
```
let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];
```
7.이 사람이 도움이된다면, 자바 스크립트 import 문이 게양되어있다. 따라서, 라이브러리는 전역 네임 스페이스 (창)에서 JQuery와에 (예를 들어 부트 스트랩)이하지 않습니다 작업을 종속성이있는 경우 :

이 사람이 도움이된다면, 자바 스크립트 import 문이 게양되어있다. 따라서, 라이브러리는 전역 네임 스페이스 (창)에서 JQuery와에 (예를 들어 부트 스트랩)이하지 않습니다 작업을 종속성이있는 경우 :
```
import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
import 'bootstrap/dist/js/bootstrap.min';
```
jQuery를 창에 부착하기 전에 부트 스트랩의 가져 오기가 게양되고 평가되기 때문입니다.

한 가지 방법이 직접 jQuery를 가져올 것입니다 주위에 얻을 대신 자체가 창으로 jQuery를 및 첨부합니다 그것을 가져 모듈을 가져옵니다.
```
import jQuery from './util/leaked-jquery';
import 'bootstrap/dist/js/bootstrap.min';
```
여기서 유출 - JQuery와 모양이 좋아
```
import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
export default $;
export jQuery;
```
EG, https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js
8.당신이 어떤 JS 빌드 도구를 사용하지 않는 경우 / NPM은, 당신은 직접 jQuery를 같이 포함 할 수 있습니다 :

당신이 어떤 JS 빌드 도구를 사용하지 않는 경우 / NPM은, 당신은 직접 jQuery를 같이 포함 할 수 있습니다 :
```
import  'https://code.jquery.com/jquery-1.12.4.min.js';
const $ = window.$;
```
이미 머리에서 스크립트 태그를 사용하여 jQuery를 포함하는 경우는 수입 (1 호선)을 건너 뛸 수 있습니다.
9.
```
import {jQuery as $} from 'jquery';
```
10.나는이 정확한 구문은 아직 게시하고,이 ES6 / 웹팩 환경에서 나를 위해 일한 보지 못했다 :

나는이 정확한 구문은 아직 게시하고,이 ES6 / 웹팩 환경에서 나를 위해 일한 보지 못했다 :
```
import $ from "jquery";
```
jQuery의 NPM 페이지에서 직접 촬영. 이 사람을 도움이되기를 바랍니다.
11.우선, 설치하고 package.json에 저장 :

우선, 설치하고 package.json에 저장 :
```
npm i --save jquery
npm i --save jquery-ui-dist
```
둘째, 웹팩 구성의 별칭을 추가 :
```
resolve: {
  root: [
    path.resolve(__dirname, '../node_modules'),
    path.resolve(__dirname, '../src'),
  ],
  alias: {
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
  },
  extensions: ['', '.js', '.json'],
}
```
그것은 지난 JQuery와 (3.2.1)와 JQuery와 - UI (1.12.1)와 나를 위해 작동합니다.

세부 내 블로그를 참조하십시오 http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html
12.가져 오기 JQuery와 (나는 'jquery@1.9.1를 설치 NPM'와 함께 설치)

가져 오기 JQuery와 (나는 'jquery@1.9.1를 설치 NPM'와 함께 설치)
```
import 'jquery/jquery.js';
```
이 방법 내부 JQuery와에 따라 모든 코드를 넣어
```
+function ($) { 
    // your code
}(window.jQuery);
```
또는 수입 후 변수 $ 선언
```
var $ = window.$
```
13.나는을 벌써-buildy jQuery를 (jquery.org에서)를 사용하여 원하는 모든 솔루션은 내가 거의 모든 환경에서 작동해야 다음 행을 추가하고이 문제를 해결하는 방법, 작동하지 않았다 여기에 언급 :

나는을 벌써-buildy jQuery를 (jquery.org에서)를 사용하여 원하는 모든 솔루션은 내가 거의 모든 환경에서 작동해야 다음 행을 추가하고이 문제를 해결하는 방법, 작동하지 않았다 여기에 언급 :
```
 export default  ( typeof module === 'object' && module.exports && typeof module.exports.noConflict === 'function' )
    ? module.exports.noConflict(true)
    : ( typeof window !== 'undefined' ? window : this ).jQuery.noConflict(true)
```

14.이 같은 가져올 수 있습니다

이 같은 가져올 수 있습니다

import("jquery").then((jQuery) => {
  window.$ = jQuery;
  window.jQuery = jQuery;
  import("bootstrap").then((_bs)=>{
    $(function() {});
  })
});

15.내 프로젝트 스택은 다음과 같습니다 ParcelJS + 워드 프레스

내 프로젝트 스택은 다음과 같습니다 ParcelJS + 워드 프레스

워드 프레스는 jQuery를 자체 v1.12.4 있고 난 또한 jQuery를이 V3 ^ 다른 따라 모듈을위한 모듈로 잘 부트 스트랩 / JS / DIST / 축소로, 예를 들어 ... 불행하게도, 나는 때문에 하나의 jQuery 버전을 떠날 수 가져왔다 다른 워드 프레스 모듈 의존성. 그리고 당연히 충돌이 개 JQuery와 버전 사이에 발생있다. 또한 명심 우리는 워드 프레스 (아파치)를 실행하는이 프로젝트 / ParcelJS (NodeJS), 마녀 메이크업 모두의 작은 비트 어려움에 대한 두 가지 모드를 얻었다. 그래서이 충돌이 검색되었습니다위한 솔루션으로, 때로는 프로젝트는 때로는 오른쪽에, 왼쪽에 끊었다. SO ... 내하면 마지막 솔루션은 (내가 ... 그래서 희망)입니다 :
```
    import $ from 'jquery'
    import 'popper.js'
    import 'bootstrap/js/dist/collapse'
    import 'bootstrap/js/dist/dropdown'
    import 'signalr'

    if (typeof window.$ === 'undefined') {
        window.$ = window.jQ = $.noConflict(true);
    }

    if (process) {
        if (typeof window.jQuery === 'undefined') {
            window.$ = window.jQuery = $.noConflict(true);
        }
    }

    jQ('#some-id').do('something...')    

    /* Other app code continuous below.......... */
```
난 아직도 어떻게 자신을 이해하지 못했지만,이 방법은 작동합니다. 오류 및 더 이상 발생하지 않습니다이 개 jQuery를 버전의 충돌
16.당신이 웹팩 4를 사용하는 경우, 대답은 ProvidePlugin을 사용하는 것입니다. 이들 문서는 특히 JQuery와 사용 사례와 angular.js을 다룹니다

당신이 웹팩 4를 사용하는 경우, 대답은 ProvidePlugin을 사용하는 것입니다. 이들 문서는 특히 JQuery와 사용 사례와 angular.js을 다룹니다
```
new webpack.ProvidePlugin({
  'window.jQuery': 'jquery'
});
```
문제는 당신이 window.jQuery에 할당 JQuery와에 기회가 있기 전에 수입 구문 angular.js 및 jQuery를 사용할 때하는 것은 항상 가져올 것입니다 (그들은 코드에서 어디에 import 문이 항상 먼저 상관없이 실행할 수 없게됩니다!). 당신이 ProvidePlugin을 사용할 때까지 정의되지로 각도는 항상 window.jQuery을 볼 수 있음이 의미합니다.
17.새앙 토끼는 인기있는 패키지의 모듈 버전을 제공하는 역할을 담당합니다 CDN입니다

새앙 토끼는 인기있는 패키지의 모듈 버전을 제공하는 역할을 담당합니다 CDN입니다
```
<script type='module'>
    import * as $ from 'https://cdn.skypack.dev/jquery';

    // use it!
    $('#myDev').on('click', alert);
</script>
```
Skypack 당신은 또한 사용할 수 있도록, 새앙 토끼입니다 : 수입 * 'https://cdn.pika.dev/jquery@^3.5.1'에서 $로;

from https://stackoverflow.com/questions/34338411/how-to-import-jquery-using-es6-syntax by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 내 웹 사이트에 "추가 즐겨 찾기"버튼 또는 링크를 추가하는 방법은 무엇입니까? (0)	2020.10.16
[JQUERY] 자바 스크립트 및 사용 jQuery를 함께 jQuery를로드 (0)	2020.10.16
[JQUERY] 비활성화 및 HTML 입력 버튼을 활성화 (0)	2020.10.16
[JQUERY] 새로 고침 / JQuery와 / 아약스 사용하여 사업부의 내용을 다시로드 (0)	2020.10.16
[JQUERY] jQuery를 아약스 (JSONP)는 타임 아웃을 무시하고 오류 이벤트가 발생하지 않습니다 (0)	2020.10.16

복붙노트

[JQUERY] 어떻게 ES6 구문을 사용하여 JQuery와 가져?

어떻게 ES6 구문을 사용하여 JQuery와 가져?

해결법

1.

2.두 줄 에두아르 로페즈의 솔루션을 기반으로하지만, :

3.글로벌 범위에서 전체 jQuery의 내용을 가져옵니다. JQuery와 모든 내 보낸 바인딩을 포함하는 현재 범위에이 삽입 $.

4.아래 같은 모듈 컨버터를 만들 수 있습니다 :

5.허용 대답은 나를 위해 작동하지 않았다 참고 :이 대답은 여기에 속하는 경우 롤업 JS를 사용 몰라 후 NPM 내가 --save JQuery와 custom.js에서

6.웹팩 사용자의 경우 플러그인의 배열에 아래에 추가 할 수 있습니다.

7.이 사람이 도움이된다면, 자바 스크립트 import 문이 게양되어있다. 따라서, 라이브러리는 전역 네임 스페이스 (창)에서 JQuery와에 (예를 들어 부트 스트랩)이하지 않습니다 작업을 종속성이있는 경우 :

8.당신이 어떤 JS 빌드 도구를 사용하지 않는 경우 / NPM은, 당신은 직접 jQuery를 같이 포함 할 수 있습니다 :

9.

10.나는이 정확한 구문은 아직 게시하고,이 ES6 / 웹팩 환경에서 나를 위해 일한 보지 못했다 :

11.우선, 설치하고 package.json에 저장 :

12.가져 오기 JQuery와 (나는 'jquery@1.9.1를 설치 NPM'와 함께 설치)

13.나는을 벌써-buildy jQuery를 (jquery.org에서)를 사용하여 원하는 모든 솔루션은 내가 거의 모든 환경에서 작동해야 다음 행을 추가하고이 문제를 해결하는 방법, 작동하지 않았다 여기에 언급 :

14.이 같은 가져올 수 있습니다

15.내 프로젝트 스택은 다음과 같습니다 ParcelJS + 워드 프레스

16.당신이 웹팩 4를 사용하는 경우, 대답은 ProvidePlugin을 사용하는 것입니다. 이들 문서는 특히 JQuery와 사용 사례와 angular.js을 다룹니다

17.새앙 토끼는 인기있는 패키지의 모듈 버전을 제공하는 역할을 담당합니다 CDN입니다

'JQUERY' 카테고리의 다른 글

티스토리툴바