Comment faire pour importer jquery en utilisant ES6 syntaxe?

index.js

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

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

Bien, l'importation à partir dist/ n'a pas de sens puisque c'est votre dossier de distribution avec la production de prêt application. La construction de votre application doit prendre ce qui est à l'intérieur de node_modules/ et l'ajouter à la dist/ dossier, jQuery inclus.

Prochain, le glob –* as– à tort je sais ce que l'objet que je suis à l'importation (par exemple jQuery et $), donc une straigforward instruction d'importation fonctionne.

Dernier vous avez besoin de l'exposer à d'autres scripts à l'aide de la window.$ = $.

Puis, j'ai de l'importation, à la fois $ et jQuery pour couvrir tous les usages, browserify éliminer les chevauchements, donc pas de frais généraux ici! ^o^y

D'importer la totalité de JQuery contenu dans la portée Globale. Cela insère $ dans le champ d'application actuel, contenant tous de l'export des fixations de la JQuery.

import * as $ from 'jquery';

Maintenant l' $ appartient à l'objet window.

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

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

Cela permettra d'éliminer des variables globales introduit par jQuery et l'exportation de l'objet jQuery en tant que par défaut.

Ensuite l'utiliser dans votre script:

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

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

Ne pas oublier de charger un module dans votre document:

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

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

webpack utilisateurs, ajouter le ci-dessous pour votre plugins tableau.

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

Tout d'abord, de les installer et de les enregistrer dans le paquet.json:

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

Deuxièmement, ajouter un alias dans webpack de configuration:

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

Fonctionner pour moi avec la dernière 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

Je voulais utiliser le alread-buildy jQuery (à partir de jquery.org) et toutes les solutions mentionnées ici ne fonctionne pas, comment j'ai résolu ce problème est d'ajouter les lignes suivantes, qui devrait permettre de travailler 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)

Mon projet de la pile est: ParcelJS + WordPress

WordPress ai jQuery v1.12.4 lui-même et j'ai également importer jQuery v3^ comme module pour d'autres en fonction des modules ainsi que bootstrap/js/dist/collapse, par exemple... Malheureusement, je ne peux pas laisser une seule version jQuery due à d'autres WordPress modulaire dépendances.
Et bien sûr il y a conflit entre deux version jquery. Aussi garder à l'esprit que nous avons obtenu deux modes pour ce projet en cours d'exécution WordPress(Apache) /ParcelJS (NodeJS), la sorcière faire tout petit peu de difficulté. Donc à la solution de ce conflit était à la recherche, parfois, le projet a éclaté sur la gauche, parfois sur le côté droit.
ALORS... Mon finall solution (j'espère que ça donc...) 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 comprend toujours pas comment moi-même, mais cette méthode fonctionne. Des erreurs et des conflits des deux version jQuery ne se posent plus