Comment importer jquery en utilisant la syntaxe ES6?

129

J'écris une nouvelle application utilisant la ES6syntaxe (JavaScript) via babeltranspiler et les preset-es2015plugins, ainsi que semantic-uipour le style.

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>

Structure du projet

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

Question

L'utilisation de <script>balises classiques pour importer jqueryfonctionne bien, mais j'essaie d'utiliser la syntaxe ES6.

  • Comment importer jquerypour satisfaire à l' semantic-uiaide de la syntaxe d'importation ES6?
  • Dois-je importer depuis le node_modules/répertoire ou mon dist/(où je copie tout)?
javascript  jquery  ecmascript-6  browserify  semantic-ui 
— Édouard Lopez
source
2
Eh bien, importer depuis distn'a pas de sens puisqu'il s'agit de votre dossier de distribution avec une application prête pour la production. La création de votre application doit prendre ce qui se trouve à l'intérieur des modules de nœuds et l'ajouter au dossier dist, jQuery inclus.
— nem035
L'importation à partir d'un fichier scss non plus . Sauf s'il y a un plugin génial qui me manque!
— CodingIntrigue
@RGraham ça s'appelle sassify , un plugin browserify. Je m'inspire d' oncletom gist
— Édouard Lopez
Je vais vérifier cela, merci!
— CodingIntrigue
@RGraham - la syntaxe semble étrange, mais l'utilisation de "require" pour les fichiers css / sass est encouragée avec des outils de construction comme webpack + babel. par exemple. require ("../ node_modules / bootstrap / dist / css / bootstrap.min.css");
— arcseldon

Réponses:

129

index.js

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

Tout d'abord, comme @nem l'a suggéré dans le commentaire, l'importation doit être effectuée à partir de node_modules/:

Eh bien, importer depuis dist/n'a pas de sens puisqu'il s'agit de votre dossier de distribution avec une application prête pour la production. La création de votre application doit prendre ce qu'il y a à l'intérieur node_modules/et l'ajouter au dist/dossier, jQuery inclus.

Ensuite, le glob -* as - est faux car je sais quel objet j'importe ( par exemple jQuery et $), donc une instruction d' importation straigforward fonctionnera.

Enfin, vous devez l'exposer à d'autres scripts en utilisant le window.$ = $.

Ensuite, j'importe comme les deux $etjQuery pour couvrir toutes les utilisations, browserifysupprimez la duplication d'import, donc pas de frais généraux ici! ^ o ^ y

— Édouard Lopez
source
6
Je ne sais pas si vous êtes toujours là, mais pourriez-vous expliquer la nécessité window.$ = $. Je ne comprends pas pourquoi c'est nécessaire. Les autres scripts ne seront-ils pas automatiquement regroupés dans un seul jsscript lorsque browserify est-ce magique?
— qarthandso
13
Pourquoi pas simplement import {$,jQuery} from 'jquery';? Pourquoi tant d'importations?
— Jackie
4
Comment trouvez-vous le nom de la classe exacte, c'est jQuery-à- dire ?
— Avinash Raj
13
Soit je reçois Module '"jquery"' has no exported member 'jQuery'ou Module '"jquery"' has no default exportque me manque-t-il s'il vous plaît?
— daslicht
4
Les anciennes versions de jQuery n'utilisent pas d'exportations nommées. Les nouvelles versions le font. La méthode d'importation dépend de la version de jQuery que vous utilisez.
— pmont
55

Basé sur la solution d'Édouard Lopez, mais en deux lignes:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
— ha7ilm
source
2
Cela a fonctionné pour moi, alors que l'approche de réponse acceptée n'a pas ... J'ai utilisé à peu près la même chose: import $ from 'jquery'; window.jQuery = $; fenêtre. $ = $;
— arcseldon
3
une ligne:window.$ = window.jQuery = require('jquery');
— Nabil Baadillah
2
@NabilBaadillah require(CommonJS) n'est pas import(module ES) et le one-liner ne semble pas possible avec import. (Someone cares?)
— Nicolas Le Thierry d'Ennequin
14

Importez tout le contenu de JQuery dans l'étendue globale. Cela insère $ dans la portée actuelle, contenant toutes les liaisons exportées à partir de JQuery.

import * as $ from 'jquery';

Maintenant, le $ appartient à l'objet window.

— Ivan Hertz
source
1
cela a fonctionné pour moi. Le haut "import {jQuery as $} de 'jquery';" donne une erreur indiquant "jQuery" introuvable.
— SpaceMonkey
12

Vous pouvez créer un convertisseur de module comme ci-dessous:

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

Cela supprimera les variables globales introduites par jQuery et exportera l'objet jQuery par défaut.

Ensuite, utilisez-le dans votre script:

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

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

N'oubliez pas de le charger en tant que module dans votre document:

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

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

— Yukulélé
source
1
Celui-ci a aidé! J'aime généralement essayer les bases avant d'utiliser n'importe quel IDE / DevEnv. Sans utiliser Node / NPM / Babble, je voulais comprendre l'importation et l'exportation ES6. J'avais réussi à faire fonctionner l'importation et l'exportation de base, mais j'avais du mal à l'inclusion de jquery. J'ai fait écrire mon code personnalisé en tant que module mais j'ai continué à référencer jquery de sa manière traditionnelle en utilisant la balise script en html. J'ai donc fini par avoir 2 balises de script, l'une pour inclure jquery et l'autre pour inclure app.js. Avec votre réponse, je pourrais me débarrasser de ma première balise de script jquery et utiliser le jquery.module.js intermédiaire comme vous l'avez suggéré.
— sidnc86
9

La réponse acceptée n'a pas fonctionné pour moi
Remarque: l'utilisation de rollup js ne sait pas si cette réponse appartient ici
après
npm i --save jquery
in custom.js

import {$, jQuery} from 'jquery';

ou

import {jQuery as $} from 'jquery';

Je recevais erreur : Module ... node_modules / jquery / dist / jquery.js ne pas exporter jQuery
ou
module ... node_modules / jquery / dist / jquery.js n'exporte pas $
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',
};

au lieu de rollup inject, essayé 

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

Cela a fonctionné:
suppression des plugins rollup inject et commonjs

import * as jQuery from 'jquery';

puis dans custom.js

$(function () {
        console.log('Hello jQuery');
});
— Ritin
source
On dirait namedExportsqu'il n'existe plus dans le plugin commonjs
— Nicolas Hoizey
7

Si cela aide quelqu'un, les instructions d'importation javascript sont levées. Ainsi, si une bibliothèque a une dépendance (par exemple bootstrap) sur jquery dans l'espace de noms global (fenêtre), cela ne fonctionnera PAS:

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

Ceci est dû au fait que l'importation de bootstrap est hissée et évaluée avant que jQuery ne soit attaché à window.

Une façon de contourner ce problème est de ne pas importer directement jQuery, mais plutôt d'importer un module qui lui-même importe jQuery ET l'attache à la fenêtre.

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

où leaked-jqueryressemble

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

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

— craigmichaelmartin
source
6

utilisateurs webpack, ajoutez ce qui suit à votre pluginsbaie.

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];
— Muhammad Reda
source
4
Quel est l'avantage de cette approche? Parce que vous vous liez à votre outil de construction ici.
— Édouard Lopez
c'est la seule façon dont je l'ai fait fonctionner. J'ai essayé import {$, jQuery} from 'jquery';mais l'id n'a pas fonctionné, je crois parce qu'il n'est pas défini (importé) dans d'autres modules.
— Muhammad Reda
2
C'est la meilleure solution pour les utilisateurs de webpack car jQuery devrait être disponible globalement dans tous les fichiers, sans les instructions d'importation redondantes.
— Amir
1 
import {jQuery as $} from 'jquery';
— Farsheed
source
1
il dit que jQuery est introuvable. L'autre réponse fonctionnait "import * as $ from 'jquery';". Savez-vous pourquoi cela se produit? Mon fichier JS dans lequel j'importe jquery fait partie d'un fichier Angular /
— Typescript
1

Je n'ai pas encore vu cette syntaxe exacte publiée, et cela a fonctionné pour moi dans un environnement ES6 / Webpack:

import $ from "jquery";

Tiré directement de la page NPM de jQuery . J'espère que cela aide quelqu'un.

— Stephen Shank
source
1

Si vous n'utilisez aucun outil de build JS / NPM, vous pouvez directement inclure Jquery comme: 

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

Vous pouvez ignorer l'importation (ligne 1) si vous avez déjà inclus jquery en utilisant la balise de script sous l'en-tête.

— VNN456
source
Je ne sais pas pourquoi, mais celui-ci a fonctionné pour moi alors qu'aucun autre ne l'a fait. Toute instruction d'importation autre que la nue a import 'filepath/jquery.js'jeté une erreur sur le module n'exportant pas la fonction que je voulais ou $ n'étant pas une fonction ou juste une SyntaxError à la vue du mot from.
— Galactic Ketchup
0

Tout d'abord, installez-les et enregistrez-les dans package.json:

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

Deuxièmement, ajoutez un alias dans la configuration du pack Web:

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

Cela fonctionne pour moi avec les derniers jquery (3.2.1) et jquery-ui (1.12.1).

Voir mon blog pour plus de détails: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

— cwtuan
source
0

Importer jquery (j'ai installé avec 'npm install jquery@1.9.1')

import 'jquery/jquery.js';

Mettez tout votre code qui dépend de jquery dans cette méthode

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

ou déclarer la variable $ après l'importation

var $ = window.$
— Yoseph
source
0

Je voulais utiliser le jQuery déjà construit (de jquery.org) et toutes les solutions mentionnées ici ne fonctionnaient pas.J'ai résolu ce problème en ajoutant les lignes suivantes qui devraient le faire fonctionner sur presque tous les environnements:

 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
source
Ivan Castellanos, vous devriez élargir votre exemple pour mieux comprendre comment l'appliquer
— north.inhale
0

Vous pouvez importer comme ça

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

Ma pile de projets est: ParcelJS + WordPress

WordPress a lui-même jQuery v1.12.4 et j'ai également importé jQuery v3 ^ comme module pour d'autres modules dépendants ainsi que bootstrap/js/dist/collapse, par exemple ... Malheureusement, je ne peux pas laisser une seule version de jQuery à cause d'autres dépendances modulaires WordPress. Et bien sûr, il y a un conflit entre deux versions de jquery. Gardez également à l'esprit que nous avons deux modes pour ce projet exécutant Wordpress (Apache) / ParcelJS (NodeJS), ce qui rend tout un peu difficile. Donc, la solution de ce conflit était la recherche, parfois le projet s'est cassé à gauche, parfois à droite. SO ... Ma dernière solution (je l'espère ...) est:

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

Je ne comprenais toujours pas comment moi-même, mais cette méthode fonctionne. Les erreurs et conflits de deux versions de jQuery ne surviennent plus

— north.inhale
source
0

Si vous utilisez Webpack 4, la réponse est d'utiliser le ProvidePlugin. Leur documentation couvre spécifiquement angular.js avec le cas d'utilisation de jquery :

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

Le problème est que lors de l'utilisation de la importsyntaxe angular.js et jquery seront toujours importés avant que vous n'ayez la possibilité d'assigner jquery à window.jQuery (les importinstructions seront toujours exécutées en premier, peu importe où elles se trouvent dans le code!). Cela signifie que angular verra toujours window.jQuery comme non défini jusqu'à ce que vous l'utilisiez ProvidePlugin.

— Martin Konecny
source
0

Pika est un CDN qui se charge de fournir des versions de modules de packages populaires

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

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

Skypack est Pika, vous pouvez donc également utiliser: import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

— SamGoody
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.