Comment importer jquery en utilisant la syntaxe ES6?

ES6 une nouvelle application utilisant la syntaxe ES6 (JavaScript) via babel transstackr et les plugins preset-es2015 , ainsi que la 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

        

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

Utiliser la classique pour importer jquery fonctionne jquery , mais j’essaie d’utiliser la syntaxe ES6.

  • Comment puis-je importer jquery pour satisfaire semantic-ui interface utilisateur semantic-ui aide de la syntaxe d’importation ES6?
  • Dois-je importer à partir du node_modules/ ou de mon dist/ (où je copie tout)?

    index.js

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

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

    Eh bien, l’importation depuis dist/ n’a aucun sens puisque c’est votre dossier de dissortingbution avec une application prête à la production. La construction de votre application doit prendre en compte ce que node_modules/ et l’append au dossier dist/ , jQuery inclus.

    Ensuite, le glob – * as est incorrect car je sais quel object je suis en train d’ importer ( par exemple jQuery et $ ), donc une instruction d’ importation rapide fonctionnera.

    Enfin, vous devez l’exposer à d’autres scripts à l’aide de la window.$ = $ .

    Ensuite, browserify à la fois $ et jQuery pour couvrir tous les usages, browserify supprimer les doublons d’importation, donc pas de frais généraux ici! ^ o ^ y

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

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

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

    J’obtenais une 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 injecter, 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é l’injection de rollup et les plugins commonjs

     import * as jQuery from 'jquery'; 

    puis dans custom.js

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

    les utilisateurs de webpack, ajoutez le ci-dessous à votre tableau de plugins .

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

    Importez l’intégralité du contenu de JQuery dans la scope globale. Cela insère $ dans la scope actuelle, contenant toutes les liaisons exscopes depuis JQuery.

     import * as $ from 'jquery'; 

    Maintenant, le $ appartient à l’object window.

     import {jQuery as $} from 'jquery'; 

    Si cela aide quelqu’un, les instructions d’importation javascript sont hissé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'; 

    C’est parce que l’importation de bootstrap est hissée et évaluée avant que jQuery ne soit attaché à la fenêtre.

    Une façon de contourner ce problème consiste à ne pas importer directement jQuery, mais à importer un module qui importe lui-même jQuery ET le joint à la fenêtre.

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

    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

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

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

    Deuxièmement, ajoutez un alias dans la configuration de 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

    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.$