web-dev-qa-db-fra.com

Comment importer jquery en utilisant la syntaxe ES6?

J'écris une nouvelle application en utilisant la syntaxe ES6 (JavaScript) à travers le transpiler babel et les plugins preset-es2015, ainsi que semantic-ui pour 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 de 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

Utiliser la balise <script> classique pour importer jquery fonctionne bien, mais j'essaie d'utiliser la syntaxe ES6.

  • Comment puis-je importer jquery pour satisfaire semantic-ui en utilisant la syntaxe d'importation ES6?
  • Devrais-je importer à partir du répertoire node_modules/ ou de mon dist/ (où je copie tout)?
jqueryimportecmascript-6browserifysemantic-ui
93
Édouard Lopez

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/:

Importer à partir de dist/ n'a pas de sens puisqu'il s'agit de votre dossier de distribution avec l'application prête à la production. Pour construire votre application, vous devez insérer le contenu de node_modules/ dans le dossier dist/, jQuery inclus.

Ensuite, le glob --* as– est erroné, car je sais quel objet je veux importer (par exemplejQuery et $), de sorte qu'un instruction d'importation fonctionnera. 

Enfin, vous devez l'exposer à d'autres scripts à l'aide du window.$ = $.

Ensuite, j'importe en tant que $ et jQuery pour couvrir tous les usages, browserify supprimer la duplication d'importation, donc pas de surcharge ici! ^ o ^ y

104
Édouard Lopez

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

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

La réponse acceptée n'a pas fonctionné pour moi 
note: en utilisant rollup js ne sais pas si cette réponse appartient ici 
après
npm i --save jquery
dans custom.js

import {$, jQuery} from 'jquery';

ou

import {jQuery as $} from 'jquery';

je devenais erreur : Module ... node_modules/jquery/dist/jquery.js n'exporte pas 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é:
enlevé les plugins rollup inject et commonjs

import * as jQuery from 'jquery';

puis dans custom.js

$(function () {
        console.log('Hello jQuery');
});
7
Ritin

Vous pouvez créer un convertisseur de module:

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

5
Yukulélé

utilisateurs de WebPack, ajoutez ce qui suit à votre tableau plugins.

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

Si cela peut aider quelqu'un, les déclarations 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';

En effet, l'importation de bootstrap est levée et évaluée avant que jQuery ne soit attaché à window.

Une façon de contourner ce problème consiste à ne pas importer jQuery directement, mais à importer un module qui lui-même importe jQuery AND et l'attache à la fenêtre.

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

où leaked-jquery ressemble à

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

4
craigmichaelmartin

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

import * as $ from 'jquery';

Maintenant, le $ appartient à l'objet window.

3
ivan hertz
import {jQuery as $} from 'jquery';
1
Farsheed

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 webpack:

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 le dernier 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

0
cwtuan

Je voulais utiliser le jQuery alread-buildy (de jquery.org) et toutes les solutions mentionnées ici ne fonctionnaient pas. La résolution de ce problème ajoutait les lignes suivantes qui devaient le faire fonctionner dans 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)
0
Ivan Castellanos

Importer jquery (j'ai installé avec 'npm install [email protected]')

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 import

var $ = window.$
0
Yoseph