Come importare jquery usando la syntax ES6?

Sto scrivendo una nuova app usando la syntax ES6 (JavaScript) tramite il transpiler babel e i plug preset-es2015 , oltre al semantic-ui per 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

        

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

Usare il classico tag per importare jquery funziona bene, ma sto cercando di usare la syntax ES6.

  • Come posso importare jquery per soddisfare semantic-ui usando la syntax di importazione ES6?
  • Dovrei importare dalla node_modules/ directory o dal mio dist/ (dove copio tutto)?

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é questa è la cartella di distribuzione con l’app di produzione pronta. Costruire la tua app dovrebbe prendere ciò che è contenuto in node_modules/ e aggiungerlo alla cartella dist/ , jQuery inclusa.

Successivamente, glob – * as – è errato perché so quale object sto importando ( ad es. jQuery e $ ), quindi funzionerà una dichiarazione di importazione straigforward.

Per ultimo è necessario esporlo ad altri script usando la window.$ = $ .

Quindi, importa come $ e jQuery per coprire tutti gli usi, browserify rimuove la duplicazione delle importazioni, quindi non sovraccarico qui! ^ O ^ y

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

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

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

 import {$, jQuery} from 'jquery'; 

o

 import {jQuery as $} from 'jquery'; 

Stavo ricevendo errore : Modulo … node_modules / jquery / dist / jquery.js non esporta jQuery
o
Modulo … 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, iniettato, 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", }, 

Questo ha funzionato:
rimosso i plug-in iniett e commonjs

 import * as jQuery from 'jquery'; 

quindi in custom.js

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

utenti del webpack, aggiungi il sotto al tuo plugins .

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

Importa l’intero contenuto di JQuery in ambito globale. Questo inserisce $ nello scope corrente, contenente tutti i binding esportati da JQuery.

 import * as $ from 'jquery'; 

Ora $ appartiene all’object della finestra.

 import {jQuery as $} from 'jquery'; 

Se aiuta qualcuno, vengono caricate le istruzioni di importazione javascript. Pertanto, se una libreria ha una dipendenza (ad es. Bootstrap) su 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 issata e valutata prima che jQuery sia collegato alla finestra.

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

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

dove sembra un leaked-jquery

 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

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'], } 

Funziona per me 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

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