ES6 구문을 사용하여 jquery를 가져 오는 방법은 무엇입니까?

128

(JavaScript)를 사용하여 새 앱을 작성하고 있습니다. ES6babel트랜스 파일러와 preset-es2015플러그인을 통해 구문을 있습니다.semantic-ui 하여 스타일 하고 있습니다.

index.js

import * as stylesheet from '../assets/styles/app.scss';
import * as jquery2 from '../dist/scripts/jquery.min';
import * as jquery3 from '../node_modules/jquery/dist/jquery.min';

console.log($('my-app'));

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
<body>
<script src="dist/app.js"></script>
</body>
</html>

프로젝트 구조

.
├── app/
│   ├── index.js
├── assets/
├── dist/
│   ├── scripts/
│   │   ├── jquery.min.js
├── index.html
├── node_modules/
│   ├── jquery/
│   │   ├── dist/
│   │   │   ├── jquery.min.js
├── package.json
└── tests/

package.json

  …
  "scripts": {
    "build:app": "browserify -e ./app/index.js -o ./dist/app.js",
    "copy:jquery": "cpy 'node_modules/jquery/dist/jquery.min.js' ./dist/scripts/",
    …
  },
  "devDependencies": {
    "babel-core": "6.3.x",
    "babel-preset-es2015": "6.3.x",
    "babelify": "7.2.x",
    "cpy": "3.4.x",
    "npm-run-all": "1.4.x",
    "sassify": "0.9.x",
    "semantic-ui": "2.1.x",
    …
  },
  "browserify": {
    "transform": [
      [ "babelify", { "presets": [ "es2015"]}],
      [ "sassify", { "auto-inject": true}]
    ]
  }

질문

클래식 <script>태그를 사용 하여 가져 오기jquery 잘 작동하지만 ES6 구문을 사용하려고합니다.

  • 어떻게 가져 오나요 jquery만족시키기 위해semantic-ui ES6 가져 오기 구문을 사용하여?
  • node_modules/디렉토리 에서 가져와야합니까, 아니면 내 dist/(모든 것을 복사하는 위치) 에서 가져와야 합니까?
javascript  jquery  ecmascript-6  browserify  semantic-ui 
— 에두아르 로페즈
소스
2
글쎄, 가져 오기는 dist프로덕션 준비 앱이있는 배포 폴더이기 때문에 의미가 없습니다. 앱을 빌드하려면 노드 모듈 내부에있는 내용을 jQuery가 포함 된 dist 폴더에 추가해야합니다.
— nem035
scss 파일 에서 가져 오기도 하지 않습니다 . 내가 놓친 멋진 플러그인이 없다면!
— CodingIntrigue
@RGraham은 browserify 플러그인 인 sassify 라고 합니다. 나는 oncletom 요점
— Édouard Lopez
확인하겠습니다, 감사합니다!
— CodingIntrigue
@RGraham-구문이 이상해 보이지만 css / sass 파일에 "require"를 사용하는 것은 webpack + babel과 같은 빌드 도구를 사용하는 것이 좋습니다. 예. require ( "../ node_modules / bootstrap / dist / css / bootstrap.min.css");
— arcseldon

답변:

129

index.js

import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;

먼저 @nem 이 의견에서 제안했듯이 가져 오기는 다음에서 수행해야합니다 node_modules/.

글쎄, 가져 오기는 dist/프로덕션 준비 앱이있는 배포 폴더이기 때문에 의미가 없습니다. 앱을 빌드하려면 안에있는 것을 가져 와서 jQuery가 포함 된 폴더에 node_modules/추가해야합니다 dist/.

다음으로, glob –* as – 내가 가져 오는 객체 ( 예 : jQuery 및 $)를 알기 때문에 잘못되었으므로 간단한 import 문 이 작동합니다.

마지막으로 window.$ = $.

그럼, 모두로 가져 오기 $및 jQuery모든 용도를 커버하는,browserify 제거 가져 오기 복제, 그래서 아무 오버 헤드 여기! ^ o ^ y

— 에두아르 로페즈
소스
6
아직 주변에 있는지 확실하지 않지만 window.$ = $. 왜 그게 필요한지 이해가 안 돼요. jsbrowserify가 마술을 할 때 다른 스크립트가 자동으로 단일 스크립트로 묶이지 않습니까?
— qarthandso
13
왜 안돼 import {$,jQuery} from 'jquery';? 수입품이 많은 이유는 무엇입니까?
— 재키
4
이름이 정확한 클래스 이름을 찾는 방법, 즉 jQuery?
— Avinash 주권
13
나는 얻 Module '"jquery"' has no exported member 'jQuery'거나 Module '"jquery"' has no default export내가 놓친 것이 무엇입니까?
— daslicht
4
이전 버전의 jQuery는 명명 된 내보내기를 사용하지 않습니다. 최신 버전은 그렇습니다. 가져 오기 방법은 사용중인 jQuery 버전에 따라 다릅니다.
— pmont
55

Édouard Lopez의 솔루션을 기반으로하지만 두 줄로 표시됩니다.

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
— ha7ilm
소스
2
이것은 나를 위해 일했지만 수락 된 답변 접근법은 그렇지 않았습니다 ... 나는 거의 똑같이 사용했습니다. import $ from 'jquery'; window.jQuery = $; window. $ = $;
— arcseldon
3
한 줄 :window.$ = window.jQuery = require('jquery');
— Nabil Baadillah
2
@NabilBaadillah require(CommonJS)는 import(ES 모듈)이 아니며 하나의 라이너는 import. (누군가 관심?)
— Nicolas Le Thierry d' Ennequin
13

Global 범위에서 전체 JQuery의 내용을 가져옵니다. 그러면 JQuery에서 내 보낸 모든 바인딩이 포함 된 $가 현재 범위에 삽입됩니다.

import * as $ from 'jquery';

이제 $는 창 개체에 속합니다.

— 이반 헤르츠
소스
1
이것은 나를 위해 일했습니다. 최상위 "import {jQuery as $} from 'jquery';" "jQuery"를 찾을 수 없다는 오류가 표시됩니다.
— SpaceMonkey
12

아래와 같이 모듈 변환기를 만들 수 있습니다.

// 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

— 유쿨 렐레
소스
1
이것은 도움이되었습니다! 나는 일반적으로 IDE / DevEnv를 사용하기 전에 기본 사항을 시험해 보는 것을 좋아합니다. Node / NPM / Babble을 사용하지 않고 ES6 가져 오기 및 내보내기를 이해하고 싶었습니다. 기본 가져 오기 및 내보내기 작업을 수행했지만 jquery 포함에 어려움을 겪었습니다. 사용자 정의 코드를 모듈로 작성했지만 html의 스크립트 태그를 사용하여 기존 방식으로 jquery를 계속 참조했습니다. 그래서 jquery를 포함하는 스크립트 태그와 app.js를 포함하는 두 개의 스크립트 태그가 생겼습니다. 귀하의 답변으로 첫 번째 jquery 스크립트 태그를 제거하고 제안한대로 중간 jquery.module.js를 사용할 수 있습니다.
— sidnc86
9

받아 들인 대답이 나를 위해 작동하지 않았습니다.
참고 : 롤업 js를 사용 하면 npm i
이후 에이 대답이 여기에 속하는지 알 수 없습니다
.custom.js에 jquery
저장

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');
});
— 리틴
소스
namedExportscommonjs 플러그인에 더 이상 존재하지 않는 것 같습니다
— Nicolas Hoizey
7

누구에게나 도움이된다면 javascript 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';

어떻게 leaked-jquery생겼는지

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
export default $;
export jQuery;

예 : https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js

— 크레이그 마이클 마틴
소스
6

webpack 사용자는 아래를 plugins어레이에 추가하십시오 .

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];
— 무하마드 레다
소스
4
이 접근 방식의 장점은 무엇입니까? 당신은 여기서 당신의 건축 도구에 자신을 묶고 있기 때문입니다.
— Édouard Lopez
이것이 내가 작동하게하는 유일한 방법입니다. 시도 import {$, jQuery} from 'jquery';했지만 id가 작동하지 않았습니다. 다른 모듈에서 정의 (가져 오기)되지 않았기 때문입니다.
— Muhammad Reda
2
중복 import 문없이 jQuery를 모든 파일에서 전역 적으로 사용할 수 있어야하므로 웹팩 사용자에게 가장 적합한 솔루션입니다.
— Amir
1 
import {jQuery as $} from 'jquery';
— Farsheed
소스
1
jQuery를 찾을 수 없다고 말합니다. 다른 대답은 "import * as $ from 'jquery';"로 작동했습니다. 왜 그런지 아십니까? 내가 jQuery를 수입하고있어 내 JS 파일은 각도 / 타이프 라이터 파일의 일부이다
— SpaceMonkey
1

이 정확한 구문은 아직 게시되지 않았으며 ES6 / Webpack 환경에서 저에게 효과적이었습니다.

import $ from "jquery";

jQuery의 NPM 페이지 에서 직접 가져옵니다 . 이것이 누군가를 돕기를 바랍니다.

— 스티븐 생크
소스
1

JS 빌드 도구 / NPM을 사용하지 않는 경우 다음과 같이 Jquery를 직접 포함 할 수 있습니다. 

import  'https://code.jquery.com/jquery-1.12.4.min.js';
const $ = window.$;

head 아래에 script 태그를 사용하여 jquery를 이미 포함했다면 import (Line 1)를 건너 뛸 수 있습니다.

— VNN456
소스
이유는 모르겠지만 다른 사람이하지 않았을 때 이것이 저에게 효과적이었습니다. 베어 이외의 모든 import 문 import 'filepath/jquery.js'은 내가 원했던 함수를 내 보내지 않거나 $가 함수가 아니거나 단어를 볼 때 SyntaxError가 아니라는 모듈에 대한 오류를 던졌습니다 from.
— 은하 케첩
0

먼저 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

— cwtuan
소스
0

jquery 가져 오기 ( 'npm install jquery@1.9.1'로 설치)

import 'jquery/jquery.js';

이 메소드 안에 jquery에 의존하는 모든 코드를 넣으십시오.

+function ($) { 
    // your code
}(window.jQuery);

또는 가져 오기 후 변수 $ 선언

var $ = window.$
— 요셉
소스
0

이미 빌드 된 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)
— 이반 카스텔라 노스
소스
이반 카스텔라 당신은 더 나은 귀하의 예를 확장하여 적용하는 방법을 이해한다
— north.inhale
0

다음과 같이 가져올 수 있습니다.

import("jquery").then((jQuery) => {
  window.$ = jQuery;
  window.jQuery = jQuery;
  import("bootstrap").then((_bs)=>{
    $(function() {});
  })
});
— SlingEr.
소스
0

내 프로젝트 스택 : ParcelJS + WordPress

WordPress에는 jQuery v1.12.4 자체가 있으며 , 예를 들어 다른 종속 모듈에 대한 모듈로 jQuery v3 ^ 도 가져 왔습니다. bootstrap/js/dist/collapse예를 들어 ... 불행히도 다른 WordPress 모듈 종속성으로 인해 하나의 jQuery 버전 만 남길 수 없습니다. 그리고 물론 두 jquery 버전간에 충돌이 발생합니다. 또한 Wordpress (Apache) / ParcelJS (NodeJS)를 실행하는이 프로젝트에는 두 가지 모드가 있다는 점을 기억하십시오. 마녀는 모든 것을 약간 어렵게 만듭니다. 그래서이 갈등에 대한 해결책은 검색이었습니다. 때로는 프로젝트가 왼쪽에서, 때로는 오른쪽에서 깨졌습니다. 그래서 ... 내 최종 솔루션 (그렇기를 바랍니다 ...)은 다음과 같습니다.

    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 버전의 오류 및 충돌이 더 이상 발생하지 않습니다.

— 북쪽.
소스
0

Webpack 4를 사용하는 경우 대답은 ProvidePlugin. 그들의 문서는 특히 jquery 사용 사례 와 함께 angular.js를 다룹니다 .

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

문제는 import구문 angular.js 및 jquery 를 사용할 때 jquery를 window.jQuery에 할당 할 기회를 갖기 전에 항상 가져 오는 import것입니다 ( 문은 코드의 어디에 있든 항상 먼저 실행됩니다!). 즉, angular는를 사용할 때까지 항상 window.jQuery를 정의되지 않은 것으로 간주합니다 ProvidePlugin.

— 마틴 코네 크니
소스
0

Pika는 인기있는 패키지의 모듈 버전을 제공하는 CDN입니다.

<script type='module'>
    import * as $ from 'https://cdn.skypack.dev/jquery';

    // use it!
    $('#myDev').on('click', alert);
</script>

Skypack은 Pika이므로 다음을 사용할 수도 있습니다. import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

— SamGoody
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.