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 সিনট্যাক্সটি ব্যবহার করার চেষ্টা করছি।

  • আমি কীভাবে ইএস 6 আমদানি সিনট্যাক্স ব্যবহার করে jqueryসন্তুষ্ট করতে semantic-uiআমদানি করব?
  • আমাকে node_modules/ডিরেক্টরি থেকে বা আমার dist/(যেখানে আমি সমস্ত কিছু অনুলিপি করে) থেকে আমদানি করা উচিত ?

2
ঠিক আছে, আমদানি করা distঅর্থহীন নয় কারণ এটি উত্পাদন প্রস্তুত অ্যাপের সাথে আপনার বিতরণ ফোল্ডার। আপনার অ্যাপ্লিকেশন তৈরি করতে নোড মডিউলগুলির মধ্যে যা আছে তা নেওয়া উচিত এবং এটিকে ডি ফোল্ডারে যুক্ত করা উচিত, jQuery অন্তর্ভুক্ত।
nem035

অথবা কোনও এসএসএস ফাইল থেকে আমদানি করে না । কিছু দুর্দান্ত প্লাগইন না থাকলে আমি মিস করছি!
কোডিংইন্ট্রিগ

@ আরগ্রাহাম এটিকে সাসাইফ , একটি ব্রাউজারিফাই প্লাগইন বলে। আমি নিজেকে অ্যানক্লিটম টোটা
লোপেজ

আমি এটি পরীক্ষা করে দেখব, ধন্যবাদ!
কোডিংইন্ট্রিগ

@ আরগ্রাহাম - সিনট্যাক্সটি দেখতে অদ্ভুত লাগছে তবে সিএসএস / স্যাস ফাইলের জন্য "প্রয়োজনীয়" ব্যবহার করা ওয়েবপ্যাক + বাবেলের মতো বিল্ড সরঞ্জামগুলির সাহায্যে উত্সাহিত করা হয়েছে। যেমন। ( "../ node_modules / বুটস্ট্র্যাপ / Dist / সিএসএস / bootstrap.min.css") প্রয়োজন;
আর্সেল্ডন

উত্তর:


129

index.js

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

প্রথমে, @ নেমকে মন্তব্যে পরামর্শ হিসাবে , আমদানিটি থেকে করা উচিত node_modules/:

ঠিক আছে, আমদানি করা dist/অর্থহীন নয় কারণ এটি উত্পাদন প্রস্তুত অ্যাপের সাথে আপনার বিতরণ ফোল্ডার। আপনার অ্যাপ্লিকেশনটি তৈরি করা ভিতরে থাকা উচিত node_modules/এবং এটিকে dist/ফোল্ডারে যুক্ত করা উচিত, jQuery অন্তর্ভুক্ত।

এরপরে, গ্লোব - * as- ভুল হিসাবে আমি জানি যে আমি কোন বস্তুটি আমদানি করছি ( যেমন jQuery এবং $), সুতরাং একটি স্ট্রিংগওয়ার্ড আমদানি বিবৃতি কাজ করবে।

সর্বশেষে আপনাকে এটি ব্যবহার করে অন্যান্য স্ক্রিপ্টগুলিতে প্রকাশ করতে হবে window.$ = $

তারপরে, আমি উভয় হিসাবে আমদানি করি $এবং jQueryসমস্ত ব্যবহারগুলি কভার করতে, browserifyআমদানি সদৃশ সরিয়ে ফেলি , সুতরাং এখানে কোনও ওভারহেড নেই! ^ ণ ^ Y


6
নিশ্চিত যে আপনি যদি এখনও রয়েছেন তবে আপনি কী প্রয়োজন তা ব্যাখ্যা করতে পারেন window.$ = $। কেন দরকার তা বুঝতে পারছি না। jsব্রাউজারিফাই করার সময় কি অন্য স্ক্রিপ্টগুলি স্বয়ংক্রিয়ভাবে একটি স্ক্রিপ্টে বান্ডেল হবে না ?
কুর্তান্দসো

13
শুধু নেই কেন import {$,jQuery} from 'jquery';? এত আমদানি কেন?
জ্যাকি

4
আপনি নামের সঠিক শ্রেণীর নামটি কীভাবে খুঁজে পান jQuery?
অবিনাশ রাজ

13
আমি হয় পেয়েছি Module '"jquery"' has no exported member 'jQuery'বা Module '"jquery"' has no default exportআমি কী মিস করছি দয়া করে?
ড্যাসলিচ

4
JQuery এর পুরানো সংস্করণ নামযুক্ত রফতানি ব্যবহার করে না। আরও নতুন সংস্করণ না। আমদানির পদ্ধতিটি আপনি jQuery এর কোন সংস্করণ ব্যবহার করছেন তার উপর নির্ভর করে।
pmont

55

অ্যাডার্ড লোপেজের সমাধানের ভিত্তিতে, তবে দুটি লাইনে:

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

2
এটি আমার পক্ষে কাজ করেছে, যদিও স্বীকৃত উত্তর পদ্ধতির ব্যবহার হয়নি ... আমি অনেকটা একই ব্যবহার করেছি: আমদানি '' জ্যাকুয়ারি 'থেকে; window.jQuery = $; উইন্ডো $ = $;
আর্সেল্ডন

3
এক লাইন:window.$ = window.jQuery = require('jquery');
নাবিল বাদিল্লাহ

2
@ নাবিলবাডিল্লাহ require( কমনজেএস ) নেই import(ইএস মডিউল) এবং ওয়ান-লাইনার দিয়ে এটি সম্ভব বলে মনে হচ্ছে না import। (কেউ
উদ্বিগ্ন

13

গ্লোবাল স্কোপে পুরো JQuery এর সামগ্রীগুলি আমদানি করুন। এটি জেসকিরি থেকে রফতানি হওয়া সমস্ত বাইন্ডিংগুলি সহ বর্তমান স্কোপটিতে সন্নিবেশ করায়।

import * as $ from 'jquery';

এখন the উইন্ডো অবজেক্টের অন্তর্গত।


1
এটি আমার জন্য কাজ করেছে। 'Jquery' থেকে শীর্ষ "আমদানি {jQuery qu as হিসাবে;" "jQuery" পাওয়া যায়নি বলে ত্রুটি দেয়।
স্পেসমুনকি

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 ব্যবহার করার আগে বেসিকগুলি চেষ্টা করে দেখতে চাই। নোড / এনপিএম / ব্যাবল ব্যবহার না করেই আমি ES6 আমদানি এবং রফতানি বুঝতে চাইছিলাম। আমি বেসিক আমদানি এবং রফতানি কাজ করতে সক্ষম হয়েছি কিন্তু jquery অন্তর্ভুক্তির সাথে লড়াই করে যাচ্ছিলাম। আমার কাস্টম কোডটি মডিউল হিসাবে লেখা ছিল তবে html এ স্ক্রিপ্ট ট্যাগটি ব্যবহার করে jquery এর প্রচলিত পদ্ধতিতে রেফারেন্স করে রেখেছি। সুতরাং আমি শেষ করেছি 2 স্ক্রিপ্ট ট্যাগ থাকার সাথে একটিতে jquery এবং অন্যটি app.js অন্তর্ভুক্ত করা যায় include আপনার উত্তর দিয়ে, আমি আমার প্রথম jquery স্ক্রিপ্ট ট্যাগ থেকে মুক্তি পেতে পারি এবং আপনার পরামর্শ অনুসারে মধ্যবর্তী jquery.module.js ব্যবহার করতে পারি।
sidnc86

9

গৃহীত উত্তরটি আমার পক্ষে কার্যকর হয়নি
নোট: রোলআপ জেএস ব্যবহার করে জানা যাবে না উত্তরটি এনপিএম-এর
পরে এখানে আছে - কাস্টম.জেএস-এ সেভ জ্যাকোয়ারি


import {$, jQuery} from 'jquery';

অথবা

import {jQuery as $} from 'jquery';

আমি ত্রুটি পাচ্ছিলাম: মডিউল ... নোড_মডিউলগুলি / jquery / dist / jquery.js jQuery
বা
মডিউল রফতানি করে না ... নোড_মডিউলগুলি / jquery / dist / jquery.js $ রোলআপ.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');
});

দেখে মনে হচ্ছে সাধারণ namedExportsজন্মা প্লাগইনে আর নেই
নিকোলাস হোইজে

7

যদি এটি কাউকে সহায়তা করে তবে জাভাস্ক্রিপ্ট আমদানি বিবৃতিগুলি উত্তোলন করা হবে। সুতরাং, যদি কোনও লাইব্রেরির গ্লোবাল নেমস্পেসে (উইন্ডো) জ্যুচুরিতে নির্ভরতা (যেমন বুটস্ট্র্যাপ) থাকে তবে এটি কাজ করবে না:

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--irch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js


6

ওয়েবপ্যাক ব্যবহারকারীগণ, আপনার pluginsঅ্যারেতে নীচে যুক্ত করুন ।

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

4
এই পদ্ধতির প্রো কি? কারণ আপনি এখানে নিজের বিল্ডিং সরঞ্জামে নিজেকে আবদ্ধ করছেন।
লোপেজ

এটি কেবলমাত্র এটিই কাজ করে চলেছে। আমি চেষ্টা করেছি import {$, jQuery} from 'jquery';কিন্তু আইডি কাজ করে না, আমি বিশ্বাস করি কারণ এটি অন্যান্য মডিউলগুলিতে সংজ্ঞায়িত (আমদানি করা) হয়নি।
মুহাম্মদ রেদা

2
ওয়েবপ্যাক ব্যবহারকারীদের জন্য এটি সর্বোত্তম সমাধান কারণ অযথা আমদানির বিবরণী ছাড়াই jQuery সমস্ত ফাইলে বিশ্বব্যাপী উপলব্ধ হওয়া উচিত।
আমির

1
import {jQuery as $} from 'jquery';

1
এটি jQuery পাওয়া যায় না বলে। অন্যান্য উত্তর "jquery" থেকে import হিসাবে * আমদানি করে; "কাজ করে। কেন এমন হয় জানো? আমার জেএস ফাইল যেখানে আমি jquery আমদানি করছি এটি একটি কৌনিক / টাইপসক্রিপ্ট ফাইলের অংশ
স্পেসমুনকি

1

আমি এখনও পোস্ট করা এই সঠিক সিনট্যাক্সটি দেখতে পাইনি এবং এটি আমার জন্য ES6 / ওয়েবপ্যাক পরিবেশে কাজ করেছে:

import $ from "jquery";

সরাসরি jQuery এর এনপিএম পৃষ্ঠা থেকে নেওয়া । আশা করি এটি কাউকে সাহায্য করবে।


1

আপনি যদি কোনও জেএস বিল্ড সরঞ্জাম / এনপিএম ব্যবহার না করে থাকেন তবে জ্যাকারিটিকে সরাসরি আপনি অন্তর্ভুক্ত করতে পারেন:

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

আপনি ইতিমধ্যে মাথার নীচে স্ক্রিপ্ট ট্যাগ ব্যবহার করে jquery অন্তর্ভুক্ত করা হলে আপনি আমদানি (লাইন 1) এড়িয়ে যেতে পারেন।


আমি জানি না কেন, তবে অন্য কেউ যখন করেনি তখন এই আমার পক্ষে কাজ করেছিল। খালি ব্যতীত অন্য কোনও আমদানি বিবৃতিটি import 'filepath/jquery.js'আমি চাইছি যে ফাংশনটি আমি চাইছিলাম তা রফতানি না করা বা function ফাংশন না হয়ে কেবল শব্দটির দৃষ্টিতে কেবল একটি সিনট্যাক্স ইরর না করে কিছু ত্রুটি ফেলেছিল 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


0

আমদানি jquery (আমি 'এনপিএম ইনস্টল jquery@1.9.1' ইনস্টল করেছি)

import 'jquery/jquery.js';

আপনার পদ্ধতির সমস্ত কোড রাখুন যা এই পদ্ধতির অভ্যন্তরে জ্যাকুরিতে নির্ভর করে

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

বা আমদানির পরে পরিবর্তনশীল declare ঘোষণা করুন

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)

ইভান ক্যাসেলেলানোস আপনার কীভাবে এটি প্রয়োগ করবেন তা আরও ভালভাবে বোঝার জন্য আপনার উদাহরণটি প্রসারিত করা উচিত
inhale

0

আপনি এই মত আমদানি করতে পারেন

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

0

আমার প্রকল্পের স্ট্যাকটি হ'ল: পার্সেলজেএস + ওয়ার্ডপ্রেস

ওয়ার্ডপ্রেস নিজেই jQuery v1.12.4 পেয়েছে এবং আমি অন্যান্য নির্ভরশীল মডিউলগুলির জন্য মডিউল হিসাবে jQuery v3 importও আমদানি করেছি bootstrap/js/dist/collapse, উদাহরণস্বরূপ ... দুর্ভাগ্যক্রমে, অন্যান্য ওয়ার্ডপ্রেস মডিউলার নির্ভরতার কারণে আমি কেবল একটি jQuery সংস্করণ ছেড়ে যেতে পারি না। এবং অবশ্যই দুটি jquery সংস্করণ মধ্যে বিরোধ দেখা দেয়। এছাড়াও মনে রাখবেন আমরা ওয়ার্ডপ্রেস (অ্যাপাচি) / পার্সেলজেএস (নোডজেএস) চলমান এই প্রকল্পের জন্য দুটি মোড পেয়েছি, ডাইনী সবকিছুকে কিছুটা অসুবিধা তৈরি করে। সুতরাং এই বিরোধের সমাধান অনুসন্ধান করা ছিল, কখনও কখনও প্রকল্পটি বামদিকে, কখনও কখনও ডানদিকে ভেঙে যায়। সুতরাং ... আমার ফাইনাল সমাধান (আমি এটি আশা করি ...) হ'ল:

    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

আপনি যদি ওয়েবপ্যাক 4 ব্যবহার করেন তবে উত্তরটি হ'ল ব্যবহার করা ProvidePlugin। তাদের ডকুমেন্টেশনে বিশেষত কৌণিক.জেগুলি জেকারি ব্যবহারের ক্ষেত্রে অন্তর্ভুক্ত করা হয়েছে:

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

সমস্যাটি হ'ল importসিন্ট্যাক্স ব্যবহার করার সময় কৌণিক.জে এবং জকিউরিটি সর্বদা আমদানি করা হবে আপনার উইন্ডো.জেকিউয়েরিতে jquery বরাদ্দ করার সুযোগ পাওয়ার আগে (কোডগুলি importযেখানেই থাকুক না কেন বিবৃতি সর্বদা প্রথমে চলে যাবে!)। এর অর্থ হ'ল কৌণিকটি সর্বদা উইন্ডো.জিক্যুরিটিকে আপনি ব্যবহার না করা অবধি সংজ্ঞায়িত হিসাবে দেখতে পাবেন 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';

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.