ES6 sözdizimi kullanılarak jquery nasıl içe aktarılır?

129

Transpiler ve eklentiler ES6aracılığıyla (JavaScript) sözdizimini kullanarak yeni bir uygulama yazıyorum .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>

Proje yapısı

.
├── 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}]
    ]
  }

Soru

<script>İçe aktarmak için klasik etiketi kullanmak jqueryiyi çalışıyor, ancak ES6 sözdizimini kullanmaya çalışıyorum.

  • Tatmin jqueryetmek için nasıl içe aktarırımsemantic-ui ES6 ithalat sözdizimi kullanarak?
  • Ben içe olmalı node_modules/dizin veya benim dist/(I kopya her şey)?
javascript  jquery  ecmascript-6  browserify  semantic-ui 
— Édouard Lopez
kaynak
2
Pekala, buradan içe aktarma, distüretime hazır uygulamanızın bulunduğu dağıtım klasörünüz olduğu için mantıklı değil. Uygulamanızı oluşturmak, düğüm modüllerinin içindekileri almalı ve onu jQuery dahil olmak üzere dist klasörüne eklemelidir.
— nem035
Bir scss dosyasından içe aktarma da yapılmaz . Kaçırdığım harika bir eklenti yoksa!
— CodingIntrigue
@RGraham buna tarayıcı tabanlı bir eklenti olan sassify denir . Oncletom gist'ten
— Édouard Lopez
Bunu kontrol edeceğim, teşekkürler!
— CodingIntrigue
@RGraham - sözdizimi tuhaf görünüyor, ancak css / sass dosyaları için "gereksinim" kullanmak webpack + babel gibi derleme araçlarıyla teşvik ediliyor. Örneğin. ( "../ node_modules / önyükleme / dist / CSS / bootstrap.min.css") gerektirir;
— arcseldon

Yanıtlar:

129

index.js

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

İlk olarak, @nem'in yorumda önerdiği gibi , içe aktarma işlemi şuradan yapılmalıdır node_modules/:

Pekala, buradan içe aktarma, dist/üretime hazır uygulamanızın bulunduğu dağıtım klasörünüz olduğu için mantıklı değil. Uygulamanızı oluşturmak, içinde bulunanları almalı node_modules/ve dist/jQuery dahil klasöre eklemelidir .

Sonra, glob - * as- hangi nesneyi içe aktardığımı bildiğim için yanlıştır ( örn. jQuery Ve $), bu nedenle bir straigforward import ifadesi çalışacaktır.

Son olarak, bunu diğer komut dosyalarına ifşa etmeniz gerekir. window.$ = $ .

Ardından, her ikisi olarak içe aktarıyorum $ve jQuerytüm kullanımları kapsamak için, browserifyiçe aktarma kopyasını kaldırıyorum, yani burada ek yük yok! ^ O ^ y

— Édouard Lopez
kaynak
6
Hala etrafta olup olmadığından emin değilim ama ihtiyacını açıklayabilir misin window.$ = $? Bunun neden gerekli olduğunu anlamıyorum. jsTarayıcının sihir olduğunu doğruladığında, diğer komut dosyaları otomatik olarak tek bir komut dosyası içinde toplanmaz mı?
— qarthandso
13
Neden sadece sahip değilsin import {$,jQuery} from 'jquery';? Neden bu kadar çok ithalat var?
— Jackie
4
İsmi tam sınıf adını nasıl buluyorsunuz, yani jQuery?
— Avinash Raj
13
Ya anladım ya Module '"jquery"' has no exported member 'jQuery'da Module '"jquery"' has no default exportneyi özlüyorum lütfen?
— daslicht
4
JQuery'nin eski sürümleri adlandırılmış dışa aktarmalar kullanmaz. Daha yeni sürümler yapar. İçe aktarma yöntemi, kullandığınız jQuery sürümüne bağlıdır.
— pmont
55

Édouard Lopez'in çözümüne dayanarak, ancak iki satırda:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
— ha7ilm
kaynak
2
Bu benim için işe yaradı, oysa kabul edilen yanıt yaklaşımı ... Ben de aynı şeyi kullandım: 'jquery'den $ ithal; window.jQuery = $; pencere. $ = $;
— arcseldon
3
tek satır:window.$ = window.jQuery = require('jquery');
— Nabil Baadillah
2
@NabilBaadillah require(CommonJS) import(ES modülü) değildir ve tek satırlık import. (Birinin umurunda mı?)
— Nicolas Le Thierry d'Ennequin
14

JQuery'nin tüm içeriğini Global kapsamda içe aktarın. Bu, JQuery'den dışa aktarılan tüm bağlamaları içeren geçerli kapsama $ ekler.

import * as $ from 'jquery';

Şimdi $ pencere nesnesine aittir.

— Ivan hertz
kaynak
1
bu benim için çalıştı. En üstteki "{jQuery'yi $} olarak 'jquery'den içe aktar;" "jQuery" bulunamadı diyen bir hata veriyor.
— SpaceMonkey
12

Aşağıdaki gibi bir modül dönüştürücü oluşturabilirsiniz:

// jquery.module.js
import 'https://code.jquery.com/jquery-3.3.1.min.js'
export default window.jQuery.noConflict(true)

Bu, jQuery tarafından tanıtılan global değişkenleri kaldıracak ve jQuery nesnesini varsayılan olarak dışa aktaracaktır.

Sonra bunu komut dosyanızda kullanın:

// script.js
import $ from "./jquery.module.js";

$(function(){
  $('body').text('youpi!');
});

Belgenize modül olarak yüklemeyi unutmayın:

<script type='module' src='./script.js'></script>

http://plnkr.co/edit/a59ETj3Yo2PJ0Aqkxbeu?p=preview

— Yukulélé
kaynak
1
Bu yardımcı oldu! Genellikle herhangi bir IDE / DevEnv kullanmadan önce temel bilgileri denemek isterim. Node / NPM / Babble kullanmadan ES6 içe ve dışa aktarımı anlamak istedim. Temel ithalat ve ihracat işini başardım ama jquery dahil etme ile mücadele ediyordum. Özel kodumu modül olarak yazdım, ancak html'deki script etiketini kullanarak jquery'ye geleneksel şekilde başvurmaya devam ettim. Bu yüzden biri jquery, diğeri de app.js içeren 2 komut dosyası etiketi elde ettim. Cevabınızla, ilk jquery betik etiketimden kurtulabilir ve önerdiğiniz gibi ara jquery.module.js'yi kullanabilirim.
— sidnc86
9

Kabul edilen yanıt benim için işe yaramadı
not: toplama js'yi kullanmak , bu yanıtın npm i --save jquery'den
sonra buraya ait olup olmadığını bilmiyorum custom.js'de


import {$, jQuery} from 'jquery';

veya

import {jQuery as $} from 'jquery';

hata alıyordum : Module ... node_modules / jquery / dist / jquery.js, jQuery
veya
Module dışarı aktarmıyor ... node_modules / jquery / dist / jquery.js, $ rollup.config.js dosyasını dışa
aktarmıyor

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',
};

toparlama enjeksiyonu yerine denendi 

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",
  },

Bu işe yaradı:
toplu yerleştirme ve ortak js eklentileri kaldırıldı

import * as jQuery from 'jquery';

sonra custom.js'de

$(function () {
        console.log('Hello jQuery');
});
— Ritin
kaynak
namedExportsCommonjs eklentisinde artık yok gibi görünüyor
— Nicolas Hoizey
7

Herhangi birine yardımcı olursa, javascript içe aktarma ifadeleri kaldırılır. Bu nedenle, bir kitaplığın genel ad alanındaki (pencere) jquery'ye bağımlılığı (ör. Bootstrap) varsa, bu çalışmayacaktır:

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
import 'bootstrap/dist/js/bootstrap.min';

Bunun nedeni, önyükleme işleminin kaldırılması ve jQuery pencereye eklenmeden önce değerlendirilmesidir.

Bunu aşmanın bir yolu, jQuery'yi doğrudan içe aktarmak değil, bunun yerine jQuery'yi içe aktaran ve pencereye ekleyen bir modülü içe aktarmaktır.

import jQuery from './util/leaked-jquery';
import 'bootstrap/dist/js/bootstrap.min';

nereye leaked-jquerybenziyor

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

Ör. Https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js

— craigmichaelmartin
kaynak
6

webpack kullanıcıları, dizinize aşağıdakileri ekleyin plugins.

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];
— Muhammed Reda
kaynak
4
Bu yaklaşımın avantajı nedir? Çünkü burada kendinizi inşa aracınıza bağlıyorsunuz.
— Édouard Lopez
onu çalıştırmamın tek yolu bu. Denedim import {$, jQuery} from 'jquery';ama id çalışmadı, inanıyorum çünkü diğer modüllerde tanımlanmamış (içe aktarılmış).
— Muhammad Reda
2
Bu, web paketi kullanıcıları için en iyi çözümdür çünkü jQuery, gereksiz içe aktarma ifadeleri olmadan tüm dosyalarda global olarak kullanılabilir olmalıdır.
— Amir
1 
import {jQuery as $} from 'jquery';
— Farsheed
kaynak
1
jQuery bulunamadı diyor. Diğer cevap "jquery"; "den $ olarak içe aktar * çalıştı. Bunun neden olduğunu biliyor musun? Jquery'yi içe aktardığım JS dosyam bir Angular / Typescript dosyasının bir parçası
— SpaceMonkey
1

Herhangi bir JS oluşturma aracı / NPM kullanmıyorsanız, Jquery'yi şu şekilde doğrudan ekleyebilirsiniz: 

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

Başlık altında komut dosyası etiketi kullanarak jquery eklediyseniz içe aktarmayı (Satır 1) atlayabilirsiniz.

— VNN456
kaynak
Nedenini bilmiyorum, ama bu benim için hiçbiri işe yaramadı. Çıplak dışındaki herhangi bir içe aktarma ifadesi import 'filepath/jquery.js', modülün istediğim işlevi dışa aktarmaması veya $ bir işlev olmaması veya yalnızca bir Sözdizimi Hatası olmasıyla ilgili bazı hatalar attı from.
— Galaktik Ketçap
0

Öncelikle bunları package.json'a kurun ve kaydedin:

npm i --save jquery
npm i --save jquery-ui-dist

İkinci olarak, web paketi yapılandırmasına bir takma ad ekleyin:

resolve: {
  root: [
    path.resolve(__dirname, '../node_modules'),
    path.resolve(__dirname, '../src'),
  ],
  alias: {
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
  },
  extensions: ['', '.js', '.json'],
}

Benim için son jquery (3.2.1) ve jquery-ui (1.12.1) ile çalışıyor.

Ayrıntılı bilgi için bloguma bakın: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

— cwtuan
kaynak
0

Jquery'yi içe aktar ('npm install jquery@1.9.1' ile yükledim)

import 'jquery/jquery.js';

Jquery'ye bağlı tüm kodunuzu bu yöntemin içine koyun

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

veya içe aktarmadan sonra $ değişkenini bildir

var $ = window.$
— Yoseph
kaynak
0

Alread-buildy jQuery'yi (jquery.org'dan) kullanmak istedim ve burada bahsedilen tüm çözümler işe yaramadı, bu sorunu nasıl düzelttim, neredeyse her ortamda çalışmasını sağlayacak aşağıdaki satırları ekledim:

 export default  ( typeof module === 'object' && module.exports && typeof module.exports.noConflict === 'function' )
    ? module.exports.noConflict(true)
    : ( typeof window !== 'undefined' ? window : this ).jQuery.noConflict(true)
— Ivan Castellanos
kaynak
Ivan Castellanos, nasıl uygulanacağını daha iyi anlamak için örneğinizi genişletmelisiniz
— north.inhale
0

Bunun gibi içe aktarabilirsin

import("jquery").then((jQuery) => {
  window.$ = jQuery;
  window.jQuery = jQuery;
  import("bootstrap").then((_bs)=>{
    $(function() {});
  })
});
— Sapancı.
kaynak
0

Proje yığınım : ParcelJS + WordPress

WordPress'in kendisi jQuery v1.12.4'ü aldı ve ayrıca jQuery v3 ^ 'yi diğer bağlı modüller için modül olarak bootstrap/js/dist/collapseve örneğin içe aktardım ... Ne yazık ki, diğer WordPress modüler bağımlılıkları nedeniyle yalnızca bir jQuery sürümünü bırakamıyorum. Ve tabii ki iki jquery versiyonu arasında bir çatışma var. Ayrıca Wordpress (Apache) / ParcelJS (NodeJS) çalıştıran bu proje için iki modumuz olduğunu unutmayın, cadı her şeyi biraz zorlaştırıyor. Yani bu çatışmanın çözümü arayıştaydı, proje bazen solda, bazen sağ tarafta kırıldı. Öyleyse ... Son çözümüm (umarım öyledir ...):

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

Hala nasıl olduğumu anlamadım ama bu yöntem işe yarıyor. İki jQuery sürümünün hataları ve çakışmaları artık ortaya çıkmıyor

— north.inhale
kaynak
0

Webpack 4 kullanıyorsanız, cevap ProvidePlugin. Onların belgeler, jquery ile angularjs kapsayan kullanım durumunda:

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

Sorun şu ki, importsözdizimi angular.js ve jquery kullanılırken , jquery'yi window.jQuery'ye atama şansınız olmadan önce her zaman içe aktarılacaktır ( importifadeler kodun neresinde olurlarsa olsunlar her zaman önce çalışır!). Bu, açısal seçeneğinin siz kullanana kadar her zaman window.jQuery'yi tanımsız olarak göreceği anlamına gelir ProvidePlugin.

— Martin Konecny
kaynak
0

Pika, popüler paketlerin modül sürümlerini sağlamaya özen gösteren bir CDN'dir.

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

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

Skypack Pika'dır, dolayısıyla şunları da kullanabilirsiniz: import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

— SamGoody
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.