Come importare jquery usando la sintassi ES6?

129

Sto scrivendo una nuova app utilizzando la ES6sintassi (JavaScript) tramite babeltranspiler e preset-es2015plugin, oltre che semantic-uiper lo stile.

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>

Struttura del progetto

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

Domanda

L'utilizzo del <script>tag classico per l'importazione jqueryfunziona bene, ma sto cercando di utilizzare la sintassi ES6.

  • Come faccio a importare jqueryper soddisfare semantic-uiutilizzando la sintassi di importazione ES6?
  • Devo importare dalla node_modules/directory o dal mio dist/(dove copio tutto)?
javascript  jquery  ecmascript-6  browserify  semantic-ui 
— Édouard Lopez
fonte
2
Bene, l'importazione da distnon ha senso poiché quella è la tua cartella di distribuzione con l'app pronta per la produzione. La creazione della tua app dovrebbe prendere ciò che è contenuto nei moduli del nodo e aggiungerlo alla cartella dist, jQuery incluso.
— nem035
Né importa da un file scss . A meno che non ci sia qualche fantastico plugin che mi sto perdendo!
— CodingIntrigue
@RGraham si chiama sassify , un plugin per browserify. Mi sto ispirando da oncletom gist
— Édouard Lopez
Lo controllerò, grazie!
— CodingIntrigue
@RGraham - la sintassi sembra strana, ma l'uso di "require" per i file css / sass è incoraggiato con strumenti di compilazione come webpack + babel. per esempio. require ( "../ node_modules / bootstrap / dist / css / bootstrap.min.css");
— arcseldon

Risposte:

129

index.js

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

Innanzitutto, come suggerito da @nem nel commento, l'importazione dovrebbe essere eseguita da node_modules/:

Bene, l'importazione da dist/non ha senso poiché quella è la tua cartella di distribuzione con l'app pronta per la produzione. La creazione della tua app dovrebbe prendere quello che c'è dentro node_modules/e aggiungerlo alla dist/cartella, jQuery incluso.

Successivamente, il glob - * as- è sbagliato in quanto so quale oggetto sto importando ( ad esempio jQuery e $), quindi un'istruzione di importazione diretta funzionerà.

Infine è necessario esporlo ad altri script utilizzando il file window.$ = $.

Quindi, importa come entrambi $e jQueryper coprire tutti gli usi, browserifyrimuovo la duplicazione di importazione, quindi nessun sovraccarico qui! ^ o ^ y

— Édouard Lopez
fonte
6
Non sono sicuro che qualcuno sia ancora in giro, ma potresti spiegare la necessità window.$ = $. Non capisco perché sia ​​necessario. Gli altri script non verranno automaticamente raggruppati in un unico jsscript quando browserify è magico?
— qarthandso
13
Perché non solo avere import {$,jQuery} from 'jquery';? Perché così tante importazioni?
— Jackie
4
Come trovi il nome esatto nome della classe, cioè jQuery?
— Avinash Raj
13
O ottengo Module '"jquery"' has no exported member 'jQuery'o Module '"jquery"' has no default exportcosa mi manca per favore?
— daslicht
4
Le versioni precedenti di jQuery non utilizzano le esportazioni denominate. Le versioni più recenti lo fanno. Il metodo di importazione dipende dalla versione di jQuery che stai utilizzando.
— pmont
55

Basato sulla soluzione di Édouard Lopez, ma su due righe:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
— ha7ilm
fonte
2
Questo ha funzionato per me, mentre l'approccio di risposta accettato non ha ... Ho usato più o meno lo stesso: import $ from 'jquery'; window.jQuery = $; window. $ = $;
— arcseldon
3
una riga:window.$ = window.jQuery = require('jquery');
— Nabil Baadillah
2
@NabilBaadillah require(CommonJS) non è import(modulo ES) e il one-liner non sembra possibile con import. (Qualcuno se ne frega?)
— Nicolas Le Thierry d'Ennequin,
14

Importa l'intero contenuto di JQuery nell'ambito globale. Questo inserisce $ nello scope corrente, contenente tutti i bind esportati da JQuery.

import * as $ from 'jquery';

Ora $ appartiene all'oggetto finestra.

— ivan hertz
fonte
1
questo ha funzionato per me. Il primo "import {jQuery as $} da 'jquery';" dà un errore dicendo "jQuery" non trovato.
— SpaceMonkey
12

Puoi creare un convertitore di moduli come di seguito:

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

Questo rimuoverà le variabili globali introdotte da jQuery ed esporterà l'oggetto jQuery come predefinito.

Quindi usalo nel tuo script:

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

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

Non dimenticare di caricarlo come modulo nel tuo documento:

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

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

— Yukulélé
fonte
1
Questo ha aiutato! In genere mi piace provare le basi prima di utilizzare qualsiasi IDE / DevEnv. Senza usare Node / NPM / Babble volevo capire l'importazione e l'esportazione di ES6. Ero riuscito a far funzionare l'importazione e l'esportazione di base, ma stavo lottando con l'inclusione di jquery. Avevo il mio codice personalizzato scritto come modulo ma continuavo a fare riferimento a jquery nel suo modo tradizionale usando il tag script in html. Quindi ho finito per avere 2 tag di script uno per includere jquery e un altro per includere app.js. Con la tua risposta, ho potuto sbarazzarmi del mio primo tag di script jquery e ho usato il jquery.module.js intermedio come hai suggerito.
— sidnc86
9

La risposta accettata non ha funzionato per me
nota: usando il rollup js non so se questa risposta appartiene qui
dopo
npm i - salva jquery
in custom.js

import {$, jQuery} from 'jquery';

o

import {jQuery as $} from 'jquery';

stavo ottenendo un errore : Module ... node_modules / jquery / dist / jquery.js non esporta jQuery
o
Module ... node_modules / jquery / dist / jquery.js non esporta $
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',
};

invece di rollup iniettare, provato 

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

Ha funzionato:
rimosso il rollup inject e i plugin commonjs

import * as jQuery from 'jquery';

quindi in custom.js

$(function () {
        console.log('Hello jQuery');
});
— Ritin
fonte
Sembra namedExportsche non esista più nel plugin commonjs
— Nicolas Hoizey il
7

Se aiuta qualcuno, le istruzioni di importazione di javascript vengono sollevate. Pertanto, se una libreria ha una dipendenza (ad esempio bootstrap) da jquery nello spazio dei nomi globale (finestra), questo NON funzionerà:

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

Questo perché l'importazione di bootstrap viene caricata e valutata prima che jQuery venga allegata alla finestra.

Un modo per aggirare questo problema è non importare jQuery direttamente, ma invece importare un modulo che a sua volta importa jQuery E lo allega alla finestra.

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

dove leaked-jquerysembra

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

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

— craigmichaelmartin
fonte
6

utenti webpack, aggiungi quanto segue al tuo pluginsarray.

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];
— Muhammad Reda
fonte
4
Qual è il vantaggio di questo approccio? Perché qui ti leghi al tuo strumento di costruzione.
— Édouard Lopez
questo è l'unico modo per farlo funzionare. Ho provato import {$, jQuery} from 'jquery';ma id non ha funzionato, credo perché non è definito (importato) in altri moduli.
— Muhammad Reda
2
Questa è la soluzione migliore per gli utenti di webpack perché jQuery dovrebbe essere disponibile globalmente in tutti i file, senza le istruzioni di importazione ridondanti.
— Amir
1 
import {jQuery as $} from 'jquery';
— Farsheed
fonte
1
dice jQuery non trovato. L'altra risposta ha funzionato "import * as $ from 'jquery';". Sai perché succede? Il mio file JS in cui sto importando jquery fa parte di un file Angular / Typescript
— SpaceMonkey,
1

Non ho ancora visto questa sintassi esatta pubblicata e ha funzionato per me in un ambiente ES6 / Webpack:

import $ from "jquery";

Tratto direttamente dalla pagina NPM di jQuery . Spero che questo aiuti qualcuno.

— Stephen Shank
fonte
1

Se non stai utilizzando strumenti di compilazione JS / NPM, puoi includere direttamente Jquery come: 

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

Puoi saltare l'importazione (riga 1) se hai già incluso jquery usando il tag script sotto head.

— VNN456
fonte
Non so perché, ma questo ha funzionato per me quando nessun altro lo faceva. Qualsiasi istruzione di importazione diversa dal nudo import 'filepath/jquery.js'generava qualche errore sul modulo che non esportava la funzione che volevo o $ non era una funzione o solo un SyntaxError alla vista della parola from.
— Galactic Ketchup
0

Prima di tutto, installali e salvali in package.json:

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

In secondo luogo, aggiungi un alias nella configurazione del webpack:

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

Per me funziona con l'ultimo jquery (3.2.1) e jquery-ui (1.12.1).

Vedi il mio blog per i dettagli: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

— cwtuan
fonte
0

Importa jquery (ho installato con 'npm install jquery@1.9.1')

import 'jquery/jquery.js';

Metti tutto il tuo codice che dipende da jquery all'interno di questo metodo

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

o dichiarare la variabile $ dopo l'importazione

var $ = window.$
— Yoseph
fonte
0

Volevo usare jQuery alread-buildy (da jquery.org) e tutte le soluzioni menzionate qui non funzionavano, il modo in cui ho risolto questo problema è stato l'aggiunta delle seguenti righe che dovrebbero farlo funzionare su quasi tutti gli ambienti:

 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
fonte
Ivan Castellanos dovresti espandere il tuo esempio per capire meglio come applicarlo
— north.inhale
0

Puoi importare in questo modo

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

Il mio stack di progetti è: ParcelJS + WordPress

WordPress ha jQuery v1.12.4 stesso e ho anche importato jQuery v3 ^ come modulo per altri moduli dipendenti e bootstrap/js/dist/collapse, ad esempio ... Sfortunatamente, non posso lasciare solo una versione di jQuery a causa di altre dipendenze modulari di WordPress. E naturalmente c'è conflitto tra due versioni di jquery. Tieni anche presente che abbiamo due modalità per questo progetto che esegue Wordpress (Apache) / ParcelJS (NodeJS), che rendono tutto un po 'difficile. Quindi la soluzione per questo conflitto stava cercando, a volte il progetto si interrompeva a sinistra, a volte a destra. COSÌ ... La mia soluzione finale (spero che sia così ...) è:

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

Ancora non ho capito come me stesso, ma questo metodo funziona. Errori e conflitti di due versioni di jQuery non si verificano più

— north.inhale
fonte
0

Se stai usando Webpack 4, la risposta è usare il ProvidePlugin. La loro documentazione copre specificamente angular.js con il caso d'uso jquery :

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

Il problema è che quando si utilizza la importsintassi angular.js e jquery verranno sempre importati prima di avere la possibilità di assegnare jquery a window.jQuery (le importistruzioni verranno sempre eseguite per prime indipendentemente da dove si trovano nel codice!). Ciò significa che angular vedrà sempre window.jQuery come non definito fino a quando non lo usi ProvidePlugin.

— Martin Konecny
fonte
0

Pika è un CDN che si occupa di fornire versioni dei moduli di pacchetti popolari

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

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

Skypack è Pika, quindi puoi anche usare: import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

— SamGoody
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.