Jak zaimportować jQuery przy użyciu składni ES6?

129

Piszę nową aplikację przy użyciu ES6składni (JavaScript) poprzez babeltranspiler i preset-es2015wtyczki, a także semantic-uidla stylu.

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>

Struktura projektu

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

Pytanie

Używanie klasycznego <script>tagu do importowania jquerydziała dobrze, ale próbuję użyć składni ES6.

  • Jak zaimportować, jqueryaby spełnić semantic-uiwymagania składni importu ES6?
  • Czy powinienem importować z node_modules/katalogu, czy z mojego dist/(gdzie kopiuję wszystko)?
javascript  jquery  ecmascript-6  browserify  semantic-ui 
— Édouard Lopez
źródło
2
Cóż, importowanie z distnie ma sensu, ponieważ jest to folder dystrybucyjny z aplikacją gotową do produkcji. Budowanie aplikacji powinno wziąć to, co znajduje się w modułach węzłów i dodać je do folderu dist, w tym jQuery.
— nem035
Nie można też importować z pliku scss . Chyba że brakuje mi jakiejś niesamowitej wtyczki!
— CodingIntrigue
@RGraham nazywa się sassify , wtyczka browserify. Inspiruję
— Édouard Lopez
Sprawdzę to, dzięki!
— CodingIntrigue
@RGraham - składnia wygląda dziwnie, ale używanie „require” dla plików css / sass jest zalecane za pomocą narzędzi do budowania, takich jak webpack + babel. na przykład. require ("../ moduły_węzłów / bootstrap / dist / css / bootstrap.min.css");
— arcseldon

Odpowiedzi:

129

index.js

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

Po pierwsze, jak zasugerował @nem w komentarzu, import należy wykonać z node_modules/:

Cóż, importowanie z dist/nie ma sensu, ponieważ jest to folder dystrybucyjny z aplikacją gotową do produkcji. Budowanie aplikacji powinno wziąć to, co jest w środku node_modules/i dodać to do dist/folderu, w tym jQuery.

Następnie glob - * as- jest błędny, ponieważ wiem, jaki obiekt importuję ( np. jQuery I $), więc prosta instrukcja importu będzie działać.

Na koniec musisz udostępnić go innym skryptom przy użyciu rozszerzenia window.$ = $.

Następnie importuję jako oba $i, jQueryaby pokryć wszystkie zastosowania, usuwam browserifypowielanie importu, więc nie ma tutaj narzutów! ^ o ^ y

— Édouard Lopez
źródło
6
Nie jestem pewien, czy nadal jesteście w pobliżu, ale czy mógłbyś wyjaśnić potrzebę window.$ = $. Nie rozumiem, dlaczego jest to potrzebne. Czy inne skrypty nie zostaną automatycznie połączone w jeden jsskrypt, gdy browserify to magia?
— qarthandso
13
Dlaczego po prostu nie import {$,jQuery} from 'jquery';? Dlaczego tak dużo importu?
— Jackie
4
Jak znaleźć dokładną nazwę klasy, tj. jQuery?
— Avinash Raj
13
Albo dostaję, Module '"jquery"' has no exported member 'jQuery'albo Module '"jquery"' has no default exportczego mi brakuje?
— daslicht
4
Starsze wersje jQuery nie używają nazwanych eksportów. Nowsze wersje tak. Metoda importu zależy od używanej wersji jQuery.
— pmont
55

Oparty na rozwiązaniu Édouarda Lopeza, ale w dwóch liniach:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
— ha7ilm
źródło
2
To zadziałało dla mnie, podczas gdy zaakceptowane podejście do odpowiedzi nie ... Użyłem tego samego: import $ z 'jquery'; window.jQuery = $; window. $ = $;
— arcseldon
3
jedna linia:window.$ = window.jQuery = require('jquery');
— Nabil Baadillah
2
@NabilBaadillah require(CommonJS) nie jest import(moduł ES), a jednoliniowy nie wydaje się możliwy w przypadku import. (Ktoś to obchodzi?)
— Nicolas Le Thierry d'Ennequin
14

Zaimportuj całą zawartość JQuery w zakresie globalnym. Spowoduje to wstawienie znaku $ do bieżącego zakresu, zawierającego wszystkie wyeksportowane powiązania z JQuery.

import * as $ from 'jquery';

Teraz $ należy do obiektu window.

— ivan hertz
źródło
1
to działało dla mnie. Na górze "importuj {jQuery as $} z 'jquery';" wyświetla błąd informujący, że nie znaleziono „jQuery”.
— SpaceMonkey
12

Możesz stworzyć konwerter modułów jak poniżej:

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

Spowoduje to usunięcie zmiennych globalnych wprowadzonych przez jQuery i wyeksportowanie obiektu jQuery jako domyślnego.

Następnie użyj go w swoim skrypcie:

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

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

Nie zapomnij załadować go jako modułu w swoim dokumencie:

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

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

— Yukulélé
źródło
1
Ten pomógł! Generalnie lubię wypróbować podstawy przed użyciem dowolnego IDE / DevEnv. Bez używania Node / NPM / Babble chciałem zrozumieć import i eksport w ES6. Udało mi się uruchomić podstawowy import i eksport, ale walczyłem z włączeniem jquery. Mój własny kod został napisany jako moduł, ale nadal odwoływałem się do jquery w tradycyjny sposób, używając tagu script w html. Więc skończyło się na tym, że miałem 2 tagi skryptów, jeden zawierający jquery, a drugi zawierający app.js. Dzięki twojej odpowiedzi mógłbym pozbyć się mojego pierwszego tagu skryptu jquery i użyć pośredniego jquery.module.js, jak zasugerowałeś.
— sidnc86
9

Zaakceptowana odpowiedź nie zadziałała dla mnie
uwaga: używając pakietu rollup js nie wiem, czy ta odpowiedź należy tutaj
po
npm i --save jquery
in custom.js

import {$, jQuery} from 'jquery';

lub

import {jQuery as $} from 'jquery';

byłem coraz błąd : Moduł ... node_modules / jQuery / dist / jquery.js nie eksportować jQuery
lub
module ... node_modules / jQuery / dist / jquery.js nie eksportować $
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',
};

zamiast rollup wstrzyknąć, próbował 

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

To zadziałało:
usunęliśmy wtyczki do pakietu zbiorczego i wtyczki commonjs

import * as jQuery from 'jquery';

następnie w custom.js

$(function () {
        console.log('Hello jQuery');
});
— Ritin
źródło
Wygląda na to, namedExportsże nie istnieje już we wtyczce commonjs
— Nicolas Hoizey
7

Jeśli to komuś pomoże, instrukcje importu javascript są podnoszone. Tak więc, jeśli biblioteka ma zależność (np. Bootstrap) od jquery w globalnej przestrzeni nazw (oknie), to NIE zadziała:

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

Dzieje się tak, ponieważ import bootstrap jest podnoszony i oceniany przed dołączeniem jQuery do okna.

Jednym ze sposobów obejścia tego problemu jest nie importowanie jQuery bezpośrednio, ale zaimportowanie modułu, który sam importuje jQuery ORAZ dołącza go do okna.

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

gdzie leaked-jquerywygląda

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

Np. Https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js

— craigmichaelmartin
źródło
6

użytkownicy webpacka, dodaj poniższe do swojej pluginstablicy.

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];
— Muhammad Reda
źródło
4
Jaka jest zaleta tego podejścia? Ponieważ wiążesz się tutaj z narzędziem do budowania.
— Édouard Lopez
to jedyny sposób, w jaki to działało. Próbowałem, import {$, jQuery} from 'jquery';ale id nie zadziałało, wydaje mi się, że nie jest zdefiniowane (importowane) w innych modułach.
— Muhammad Reda
2
Jest to najlepsze rozwiązanie dla użytkowników webpacka, ponieważ jQuery powinno być dostępne globalnie we wszystkich plikach, bez zbędnych instrukcji importu.
— Amir
1 
import {jQuery as $} from 'jquery';
— Farsheed
źródło
1
mówi, że nie znaleziono jQuery. Druga odpowiedź zadziałała "import * as $ from 'jquery';". Czy wiesz, dlaczego tak się dzieje? Mój plik JS, do którego importuję jquery, jest częścią pliku Angular /
— Typescript
1

Nie widziałem jeszcze opublikowanej dokładnej składni i zadziałała dla mnie w środowisku ES6 / Webpack:

import $ from "jquery";

Zrobione bezpośrednio ze strony NPM jQuery . Mam nadzieję, że to komuś pomoże.

— Stephen Shank
źródło
1

Jeśli nie używasz żadnych narzędzi do budowania JS / NPM, możesz bezpośrednio dołączyć Jquery jako: 

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

Możesz pominąć import (linia 1), jeśli już włączyłeś jquery za pomocą tagu script pod nagłówkiem.

— VNN456
źródło
Nie wiem dlaczego, ale ten działał dla mnie, podczas gdy żaden inny. Każda instrukcja importu inna niż gołe import 'filepath/jquery.js'powodowała błąd dotyczący modułu nie eksportującego funkcji, którą chciałem, lub $ nie będącego funkcją lub po prostu SyntaxError na widok tego słowa from.
— Galactic Ketchup
0

Przede wszystkim zainstaluj i zapisz je w pliku package.json:

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

Po drugie, dodaj alias w konfiguracji webpacka:

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

Działa dla mnie z ostatnim jquery (3.2.1) i jquery-ui (1.12.1).

Zobacz mój blog, aby uzyskać szczegółowe informacje: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

— cwtuan
źródło
0

Importuj jquery (zainstalowałem z 'npm install jquery@1.9.1')

import 'jquery/jquery.js';

Umieść cały swój kod zależny od jquery wewnątrz tej metody

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

lub zadeklaruj zmienną $ po imporcie

var $ = window.$
— Yoseph
źródło
0

Chciałem użyć już buildy jQuery (z jquery.org) i wszystkie wymienione tutaj rozwiązania nie działały, jak naprawiłem ten problem, dodając następujące linie, które powinny sprawić, że będzie działać w prawie każdym środowisku:

 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
źródło
Ivan Castellanos, powinieneś rozszerzyć swój przykład, aby lepiej zrozumieć, jak go zastosować
— północ. Wdychanie
0

Możesz importować w ten sposób

import("jquery").then((jQuery) => {
  window.$ = jQuery;
  window.jQuery = jQuery;
  import("bootstrap").then((_bs)=>{
    $(function() {});
  })
});
— SlingEr.
źródło
0

Mój stos projektów to: ParcelJS + WordPress

WordPress dostał sam jQuery v1.12.4 i mam też zaimportować jQuery v3 ^ jako moduł dla innych zależnych modułów, a także bootstrap/js/dist/collapsenp. ... Niestety nie mogę zostawić tylko jednej wersji jQuery ze względu na inne zależności modułowe WordPress. I oczywiście istnieje konflikt między dwiema wersjami jquery. Pamiętaj również, że mamy dwa tryby dla tego projektu z uruchomionym Wordpress (Apache) / ParcelJS (NodeJS), co sprawia, że ​​wszystko jest trochę trudne. Tak więc rozwiązaniem tego konfliktu było szukanie, czasem projekt pękał po lewej, czasem po prawej stronie. WIĘC ... Moje ostateczne rozwiązanie (mam nadzieję, że tak ...) to:

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

Nadal nie rozumiałem, jak ja, ale ta metoda działa. Nie występują już błędy i konflikty dwóch wersji jQuery

— północ. wdech
źródło
0

Jeśli używasz Webpack 4, odpowiedzią jest użycie ProvidePlugin. Ich dokumentacja w szczególności obejmuje angular.js z przypadkiem użycia jquery :

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

Problem polega na tym, że przy używaniu importskładni angular.js i jquery będą zawsze importowane, zanim będzie można przypisać jquery do window.jQuery ( importinstrukcje będą zawsze uruchamiane jako pierwsze, bez względu na to, gdzie są w kodzie!). Oznacza to, że angular zawsze będzie widzieć window.jQuery jako niezdefiniowane, dopóki nie użyjesz ProvidePlugin.

— Martin Konecny
źródło
0

Pika to CDN, który zajmuje się dostarczaniem wersji modułowych popularnych pakietów

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

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

Skypack to Pika, więc możesz również użyć: import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

— SamGoody
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.