ES6 सिंटैक्स का उपयोग करके jquery कैसे आयात करें?

128

मैं ट्रांसलेटर और प्लगइन्स के ES6माध्यम से ( साथ ही शैली के लिए ) (जावास्क्रिप्ट) सिंटैक्स का उपयोग करके एक नया ऐप लिख रहा हूं ।babelpreset-es2015semantic-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 सिंटैक्स का उपयोग करने की कोशिश कर रहा हूं।

मैं ES6 आयात सिंटैक्स का उपयोग करके कैसे jqueryसंतुष्ट semantic-uiकर सकता हूं ?
क्या मुझे node_modules/निर्देशिका या मेरे dist/(जहां मैं सब कुछ कॉपी करता हूं) से आयात करना चाहिए ?

— Oudouard लोपेज़
स्रोत

2

ठीक है, इससे आयात करने का distकोई मतलब नहीं है क्योंकि उत्पादन तैयार ऐप के साथ आपका वितरण फ़ोल्डर है। अपने ऐप का निर्माण करना चाहिए कि नोड मॉड्यूल के अंदर क्या होना चाहिए और इसे दूर फ़ोल्डर में जोड़ें, जिसमें jQuery शामिल है।

— nem035

और न ही एक scss फ़ाइल से आयात करता है । जब तक कुछ भयानक प्लगइन मुझे याद नहीं है!

— कोडिंगइंट्रिग्ज

@RGham इसे sassify कहते हैं , जो एक Browserify plugin है। मैं खुद को oncletom gist

— Lopez

मैं जाँच करूँगा कि धन्यवाद!

— कोडिंगइंट्रिग्यू

@RGhamham - वाक्यविन्यास अजीब लगता है, लेकिन css / sass फ़ाइलों के लिए "आवश्यकता" का उपयोग करके वेबपैक + बैबल जैसे बिल्ड टूल के साथ प्रोत्साहित किया जाता है। जैसे। ( "../ node_modules / बूटस्ट्रैप / जिले / सीएसएस / bootstrap.min.css") की आवश्यकता होती है;

— आर्केल्डन

129

index.js

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

पहले, जैसा कि @nem ने सुझाव दिया है, आयात node_modules/निम्न से किया जाना चाहिए :

ठीक है, इससे आयात करने का dist/कोई मतलब नहीं है क्योंकि उत्पादन तैयार ऐप के साथ आपका वितरण फ़ोल्डर है। अपने ऐप का निर्माण करना चाहिए जो अंदर है node_modules/और इसे dist/फ़ोल्डर में जोड़ें , जिसमें jQuery शामिल है।

अगला, ग्लोब - * as- गलत है क्योंकि मुझे पता है कि मैं किस वस्तु का आयात कर रहा हूं ( जैसे jQuery और $), इसलिए एक स्पष्ट आयात विवरण काम करेगा।

अंतिम आपको इसका उपयोग करके अन्य स्क्रिप्ट्स को उजागर करने की आवश्यकता है window.$ = $।

फिर, मैं दोनों के रूप में आयात करता हूं $और jQueryसभी उपयोगों को कवर करने के लिए, browserifyआयात दोहराव को हटाता हूं , इसलिए यहां कोई ओवरहेड नहीं है! ^ ओ ^ y

— Oudouard लोपेज़
स्रोत

6

यकीन नहीं होता है कि अगर कोई y'all अभी भी आसपास है, लेकिन क्या आप इसकी आवश्यकता समझा सकते हैं window.$ = $। मुझे समझ नहीं आता कि इसकी आवश्यकता क्यों है। jsजब ब्राउजर यह जादू करता है तो क्या अन्य स्क्रिप्ट्स को स्वचालित रूप से एक स्क्रिप्ट में बंडल नहीं किया जाएगा ?

— क्यूर्टहंडो

13

सिर्फ क्यों नहीं है import {$,jQuery} from 'jquery';? इतने आयात क्यों?

— जैकी

4

आपको नाम सटीक वर्ग नाम कैसे मिलता है, अर्थात jQuery?

— अविनाश राज

13

मैं या तो मिलता है Module '"jquery"' has no exported member 'jQuery'या Module '"jquery"' has no default exportमैं कृपया क्या याद आ रही है?

— daslicht

4

JQuery के पुराने संस्करण नामित निर्यात का उपयोग नहीं करते हैं। नए संस्करण करते हैं। आयात की विधि इस बात पर निर्भर करती है कि आप किस संस्करण का उपयोग कर रहे हैं?

— 6

55

Arddouard लोपेज के समाधान पर आधारित है, लेकिन दो लाइनों में:

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

— ha7ilm
स्रोत

2

इसने मेरे लिए काम किया, जबकि स्वीकृत उत्तर दृष्टिकोण नहीं था ... मैंने बहुत उपयोग किया: 'jquery' से $ आयात; window.jQuery = $; window; $ = $;

— आर्केल्डन

3

एक पंक्ति:window.$ = window.jQuery = require('jquery');

— नाबिल बेदिल्लाह

2

@ नबीलदिल्लह require( कॉमनजेएस ) import(ईएस मॉड्यूल) नहीं है और वन-लाइनर संभव नहीं है import। (कोई परवाह करता है?)

— निकोलस ले थिएरी डी'नेक्विन

13

वैश्विक दायरे में संपूर्ण JQuery की सामग्री आयात करें। यह वर्तमान दायरे में $ सम्मिलित करता है, जिसमें JQuery से सभी निर्यातित बाइंडिंग हैं।

import * as $ from 'jquery';

अब $ विंडो ऑब्जेक्ट के अंतर्गत आता है।

— ivan हर्ट्ज़
स्रोत

1

यह मेरे लिए काम किया। "Jquery 'से शीर्ष" आयात {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

— Yukulélé
स्रोत

1

यह एक मदद की! मैं आम तौर पर किसी भी IDE / DevEnv का उपयोग करने से पहले मूल बातें आज़माना पसंद करता हूं। नोड / एनपीएम / बबल का उपयोग किए बिना मैं ईएस 6 आयात और निर्यात को समझना चाहता था। मैं बुनियादी आयात और निर्यात काम करने में कामयाब रहा था लेकिन jquery के समावेश से जूझ रहा था। मेरे पास मेरा कस्टम कोड मॉड्यूल के रूप में लिखा गया था, लेकिन HTML में स्क्रिप्ट टैग का उपयोग करके अपने पारंपरिक तरीके से jquery को संदर्भित करता रहा। इसलिए मैंने jquery और अन्य में app.js. आपके उत्तर के साथ, मैं अपने पहले jquery स्क्रिप्ट टैग से छुटकारा पा सकता था और आपके द्वारा सुझाए गए मध्यवर्ती jquery.module.js का उपयोग कर सकता था।

— sidnc86

9

स्वीकार किए गए उत्तर ने मेरे लिए काम नहीं किया
: रोलअप js का उपयोग न करें, अगर यह उत्तर npm i --save jquery के
बाद custom.js में है

import {$, jQuery} from 'jquery';

या

import {jQuery as $} from 'jquery';

मैं हो रही थी त्रुटि : मॉड्यूल ... node_modules / jQuery / जिले / jquery.js निर्यात नहीं करता है jQuery
या
मॉड्यूल ... node_modules / jQuery / जिले / 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",
  },

इसने काम किया:
रोलअप इंजेक्शन और सामान्य प्लगइन्स को हटा दिया

import * as jQuery from 'jquery';

उसके बाद custom.js में

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

— Ritin
स्रोत

ऐसा लगता namedExportsहै कि आमजन प्लगइन में अब मौजूद नहीं है

— निकोलस होइजे

7

यदि यह किसी की मदद करता है, तो जावास्क्रिप्ट आयात विवरण फहराए जाते हैं। इस प्रकार, अगर किसी लाइब्रेरी में वैश्विक नाम स्थान (विंडो) में 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/4d9f3b03719e0a2ea3fb5ddbbfc453a10e98b6/javascript/util/leak_jquery.js.js

— craigmichaelmartin
स्रोत

6

वेबपैक उपयोगकर्ता, नीचे अपनी pluginsसरणी में जोड़ें ।

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];

— मुहम्मद रेडा
स्रोत

4

इस दृष्टिकोण का समर्थक क्या है? क्योंकि आप यहां अपने भवन उपकरण से खुद को बांध रहे हैं।

— atdouard लोपेज

यही एक तरीका है जिससे मुझे काम मिला। मैंने कोशिश की import {$, jQuery} from 'jquery';लेकिन आईडी काम नहीं आई, मेरा मानना है कि यह अन्य मॉड्यूल में परिभाषित (आयातित) नहीं है।

— मुहम्मद रेडा

2

यह वेबपैक उपयोगकर्ताओं के लिए सबसे अच्छा समाधान है क्योंकि अनावश्यक रूप से आयात किए गए बयानों के बिना jQuery को सभी फाइलों में वैश्विक रूप से उपलब्ध होना चाहिए।

— अमीर

1

import {jQuery as $} from 'jquery';

— Farsheed
स्रोत

1

यह कहता है कि jQuery नहीं मिला। दूसरे उत्तर ने "आयात" को "jquery" से $ के रूप में आयात किया। " क्या आप जानते हैं कि ऐसा क्यों होता है? मेरी जेएस फ़ाइल जहाँ मैं jquery का आयात कर रहा हूँ, एक कोणीय / टाइपस्क्रिप्ट फ़ाइल का हिस्सा है

— SpaceMonkey

1

मैंने अभी तक इस सटीक वाक्यविन्यास को नहीं देखा है, और इसने मेरे लिए एक ES6 / Webpack वातावरण में काम किया है:

import $ from "jquery";

सीधे jQuery के एनपीएम पेज से लिया गया । आशा है कि यह किसी की मदद करता है।

— स्टीफन शंक
स्रोत

1

यदि आप किसी JS बिल्ड टूल्स / NPM का उपयोग नहीं कर रहे हैं, तो आप सीधे Jquery को इसमें शामिल कर सकते हैं:

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

यदि आप पहले से ही सिर के नीचे स्क्रिप्ट टैग का उपयोग करके jquery को शामिल करते हैं तो आप आयात (पंक्ति 1) को छोड़ सकते हैं।

— VNN456
स्रोत

मुझे पता नहीं क्यों, लेकिन यह मेरे लिए तब काम आया जब किसी और ने नहीं किया। नंगे के अलावा किसी भी आयात के बयान import 'filepath/jquery.js'ने मॉड्यूल को उस फ़ंक्शन के बारे में कुछ त्रुटि दी जो मैं चाहता था या $ फ़ंक्शन नहीं कर रहा था या शब्द की दृष्टि में केवल एक सिंटेक्सऑयर from।

— गांगेय केचप

0

सबसे पहले, उन्हें पैकेज में संस्थापित करें और सहेजें।

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 स्थापित jquery@1.9.1' के साथ स्थापित किया है)

import 'jquery/jquery.js';

अपना सारा कोड डालें जो इस विधि के अंदर jquery पर निर्भर है

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

या आयात के बाद चर $ की घोषणा

var $ = window.$

— Yoseph
स्रोत

0

मैं alread-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)

— इवान कैस्टेलानोस
स्रोत

इवान कैस्टेलानोस को आपको बेहतर तरीके से समझने के लिए अपने उदाहरण का विस्तार करना चाहिए कि इसे कैसे लागू करें

— उत्तर.हेल्ले

0

आप इस तरह आयात कर सकते हैं

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

— Slinger।
स्रोत

0

मेरा प्रोजेक्ट स्टैक है: ParcelJS + WordPress

वर्डप्रेस को jQuery v1.12.4 ही मिला है और मैंने jQuery v3 ^ को अन्य निर्भर मॉड्यूल के साथ-साथ मॉड्यूल के लिए भी आयात किया है bootstrap/js/dist/collapse, उदाहरण के लिए ... दुर्भाग्य से, मैं अन्य वर्डप्रेस मॉड्यूलर निर्भरता के कारण केवल एक jQuery संस्करण नहीं छोड़ सकता। और संभोग के दो द्वंद्व संस्करण के बीच संघर्ष पैदा होता है। यह भी ध्यान रखें कि हमें Wordpress (Apache) / 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 के संस्करण की त्रुटियां और संघर्ष अब उत्पन्न नहीं होते हैं

— north.inhale
स्रोत

0

यदि आप वेबपैक 4 का उपयोग कर रहे हैं, तो उत्तर का उपयोग करना है ProvidePlugin। उनके प्रलेखन में विशेष रूप से jquery उपयोग के मामले के साथ कोणीय.js शामिल हैं :

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

मुद्दा यह है कि जब importवाक्यविन्यास कोणीय.जेएस और jquery का उपयोग करना हमेशा आयात किया जाएगा इससे पहले कि आपको window.jQuery को jquery असाइन करने का मौका मिले ( importकथन हमेशा पहले कोई बात नहीं चलेगा जहां वे कोड में हैं!)। इसका मतलब है कि जब तक आप उपयोग नहीं करते हैं तब तक कोणीय हमेशा window.jQuery को अपरिभाषित दिखाई देगा ProvidePlugin।

— मार्टिन कोन्सेनी
स्रोत

0

पिका एक सीडीएन है जो लोकप्रिय पैकेजों के मॉड्यूल संस्करण प्रदान करने का ख्याल रखता है

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

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

स्काइपैक पिका है, इसलिए आप भी इस्तेमाल कर सकते हैं: import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

— SamGoody
स्रोत