Bagaimana cara mengimpor jquery menggunakan sintaks ES6?

129

Saya sedang menulis aplikasi baru menggunakan ES6sintaks (JavaScript) melalui babeltranspiler dan preset-es2015plugin, serta semantic-uiuntuk gayanya.

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>

Struktur proyek

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

Pertanyaan

Menggunakan <script>tag klasik untuk mengimpor jqueryberfungsi dengan baik, tetapi saya mencoba menggunakan sintaks ES6.

  • Bagaimana cara mengimpor jqueryuntuk memenuhi semantic-uipenggunaan sintaks impor ES6?
  • Haruskah saya mengimpor dari node_modules/direktori atau milik saya dist/(tempat saya menyalin semuanya)?
javascript  jquery  ecmascript-6  browserify  semantic-ui 
— Édouard Lopez
sumber
2
Nah, mengimpor dari disttidak masuk akal karena itu adalah folder distribusi Anda dengan aplikasi siap produksi. Membangun aplikasi Anda harus mengambil apa yang ada di dalam modul node dan menambahkannya ke folder dist, termasuk jQuery.
— nem035
Juga tidak mengimpor dari file scss . Kecuali ada beberapa plugin luar biasa yang saya lewatkan!
— CodingIntrigue
@RGraham ini disebut sassify , plugin browserify. Saya menginspirasi diri saya sendiri dari inti oncletom
— Édouard Lopez
Saya akan memeriksanya, terima kasih!
— CodingIntrigue
@RGraham - sintaksnya terlihat aneh, tetapi menggunakan "require" untuk file css / sass didorong dengan alat build seperti webpack + babel. misalnya. membutuhkan ("../ node_modules / bootstrap / dist / css / bootstrap.min.css");
— arcseldon

Jawaban:

129

index.js

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

Pertama, seperti yang disarankan @nem dalam komentar, impor harus dilakukan dari node_modules/:

Nah, mengimpor dari dist/tidak masuk akal karena itu adalah folder distribusi Anda dengan aplikasi siap produksi. Membangun aplikasi Anda harus mengambil apa yang ada di dalamnya node_modules/dan menambahkannya ke dist/folder, termasuk jQuery.

Selanjutnya, glob - * as- salah karena saya tahu objek apa yang saya impor ( misalnya jQuery dan $), jadi pernyataan import langsung akan berfungsi.

Terakhir, Anda perlu mengeksposnya ke skrip lain menggunakan window.$ = $.

Kemudian, saya mengimpor sebagai keduanya $dan jQueryuntuk mencakup semua penggunaan, browserifymenghapus duplikasi impor, jadi tidak ada biaya tambahan di sini! ^ o ^ y

— Édouard Lopez
sumber
6
Tidak yakin apakah ada yang masih ada tetapi bisakah Anda menjelaskan kebutuhannya window.$ = $. Saya tidak mengerti mengapa itu dibutuhkan. Tidakkah skrip lain akan secara otomatis digabungkan menjadi satu jsskrip ketika browserify memang ajaib?
— qarthandso
13
Kenapa tidak punya import {$,jQuery} from 'jquery';? Mengapa banyak sekali impor?
— Jackie
4
Bagaimana Anda menemukan nama nama kelas yang tepat, yaitu jQuery?
— Avinash Raj
13
Saya mendapatkan Module '"jquery"' has no exported member 'jQuery'atau Module '"jquery"' has no default exportapa yang saya lewatkan?
— daslicht
4
Versi jQuery yang lebih lama tidak menggunakan ekspor bernama. Versi yang lebih baru bisa. Metode impor bergantung pada versi jQuery yang Anda gunakan.
— pmont
55

Berdasarkan solusi Édouard Lopez, tetapi dalam dua baris:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
— ha7ilm.dll
sumber
2
Ini berhasil untuk saya, sedangkan pendekatan jawaban yang diterima tidak ... Saya menggunakan banyak hal yang sama: import $ dari 'jquery'; window.jQuery = $; jendela. $ = $;
— arcseldon
3
satu baris:window.$ = window.jQuery = require('jquery');
— Nabil Baadillah
2
@NabilBaadillah require(CommonJS) bukan import(modul ES) dan one-liner tampaknya tidak memungkinkan import. (Seseorang peduli?)
— Nicolas Le Thierry d'Ennequin
14

Impor seluruh konten JQuery dalam lingkup Global. Ini memasukkan $ ke dalam cakupan saat ini, yang berisi semua binding yang diekspor dari JQuery.

import * as $ from 'jquery';

Sekarang $ milik objek jendela.

— ivan hertz
sumber
1
ini berhasil untuk saya. Bagian atas "import {jQuery as $} dari 'jquery';" memberikan kesalahan yang mengatakan "jQuery" tidak ditemukan.
— SpaceMonkey
12

Anda dapat membuat konverter modul seperti di bawah ini:

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

Ini akan menghapus variabel global yang diperkenalkan oleh jQuery dan mengekspor objek jQuery sebagai default.

Kemudian gunakan di skrip Anda:

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

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

Jangan lupa untuk memuatnya sebagai modul di dokumen Anda:

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

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

— Yukulélé
sumber
1
Yang ini membantu! Saya biasanya ingin mencoba dasar-dasar sebelum menggunakan IDE / DevEnv. Tanpa menggunakan Node / NPM / Babble saya ingin memahami impor dan ekspor ES6. Saya telah berhasil mendapatkan pekerjaan impor dan ekspor dasar tetapi berjuang dengan inklusi jquery. Saya memiliki kode kustom saya yang ditulis sebagai modul tetapi terus merujuk jquery dengan cara tradisionalnya menggunakan tag skrip di html. Jadi saya akhirnya memiliki 2 tag skrip, satu untuk menyertakan jquery dan lainnya untuk menyertakan app.js. Dengan jawaban Anda, saya bisa menyingkirkan tag script jquery pertama saya dan menggunakan jquery.module.js perantara seperti yang Anda sarankan.
— sidnc86
9

Jawaban yang diterima tidak berfungsi untuk saya
catatan: menggunakan rollup js tidak tahu apakah jawaban ini termasuk di sini
setelah
npm i --save jquery
di custom.js

import {$, jQuery} from 'jquery';

atau

import {jQuery as $} from 'jquery';

saya mendapatkan kesalahan : Module ... node_modules / jquery / dist / jquery.js tidak mengekspor jQuery
atau
Module ... node_modules / jquery / dist / jquery.js tidak mengekspor $
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',
};

Alih-alih menyuntikkan rollup, coba 

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

Ini berhasil:
hapus plugin injeksi rollup dan commonjs

import * as jQuery from 'jquery';

lalu di custom.js

$(function () {
        console.log('Hello jQuery');
});
— Ritin
sumber
Sepertinya namedExportssudah tidak ada lagi di plugin commonjs
— Nicolas Hoizey
7

Jika itu membantu siapa pun, pernyataan impor javascript akan diangkat. Jadi, jika perpustakaan memiliki ketergantungan (misalnya bootstrap) pada jquery di namespace global (jendela), ini TIDAK akan berfungsi:

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

Ini karena impor bootstrap diangkat dan dievaluasi sebelum jQuery dipasang ke jendela.

Salah satu cara untuk menyiasatinya adalah dengan tidak mengimpor jQuery secara langsung, tetapi mengimpor modul yang dengan sendirinya mengimpor jQuery DAN menempelkannya ke jendela.

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

dimana leaked-jquerykelihatannya

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

Misalnya, https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js

— craigmichaelmartin
sumber
6

pengguna webpack, tambahkan di bawah ini ke pluginsarray Anda .

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];
— Muhammad Reda
sumber
4
Apa keuntungan dari pendekatan ini? Karena Anda mengikatkan diri Anda pada alat bangunan Anda di sini.
— Édouard Lopez
ini adalah satu-satunya cara saya membuatnya bekerja. Saya mencoba import {$, jQuery} from 'jquery';tetapi id tidak berfungsi, saya percaya karena tidak ditentukan (diimpor) di modul lain.
— Muhammad Reda
2
Ini adalah solusi terbaik untuk pengguna webpack karena jQuery harus tersedia secara global di semua file, tanpa pernyataan impor yang berlebihan.
— Amir
1 
import {jQuery as $} from 'jquery';
— Farsheed
sumber
1
Dikatakan jQuery tidak ditemukan. Jawaban lain bekerja "import * as $ from 'jquery';". Tahukah Anda mengapa hal itu terjadi? File JS saya tempat saya mengimpor jquery adalah bagian dari file Angular / Typecript
— SpaceMonkey
1

Saya belum melihat sintaks yang tepat ini diposting, dan itu berfungsi untuk saya di lingkungan ES6 / Webpack:

import $ from "jquery";

Diambil langsung dari halaman NPM jQuery . Semoga ini bisa membantu seseorang.

— Stephen Shank
sumber
1

Jika Anda tidak menggunakan alat build / NPM JS, Anda dapat langsung memasukkan Jquery sebagai: 

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

Anda dapat melewati import (Baris 1) jika Anda sudah memasukkan jquery menggunakan tag script di bawah head.

— VNN456
sumber
Saya tidak tahu mengapa, tetapi yang ini berhasil untuk saya ketika tidak ada orang lain yang melakukannya. Pernyataan impor apa pun selain yang telanjang import 'filepath/jquery.js'melemparkan beberapa kesalahan tentang modul yang tidak mengekspor fungsi yang saya inginkan atau $ tidak menjadi fungsi atau hanya SyntaxError saat melihat kata tersebut from.
— Galactic Ketchup
0

Pertama-tama, instal dan simpan di package.json:

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

Kedua, tambahkan alias dalam konfigurasi webpack:

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

Ini bekerja untuk saya dengan jquery terakhir (3.2.1) dan jquery-ui (1.12.1).

Lihat blog saya untuk detailnya: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

— cwtuan.dll
sumber
0

Impor jquery (Saya menginstal dengan 'npm install jquery@1.9.1')

import 'jquery/jquery.js';

Masukkan semua kode Anda yang bergantung pada jquery di dalam metode ini

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

atau nyatakan variabel $ setelah impor

var $ = window.$
— Yoseph
sumber
0

Saya ingin menggunakan jQuery alread-buildy (dari jquery.org) dan semua solusi yang disebutkan di sini tidak berfungsi, cara saya memperbaiki masalah ini adalah menambahkan baris berikut yang akan membuatnya berfungsi di hampir setiap lingkungan:

 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
sumber
Ivan Castellanos Anda harus memperluas contoh Anda untuk lebih memahami bagaimana menerapkannya
— north.inhale
0

Anda dapat mengimpor seperti ini

import("jquery").then((jQuery) => {
  window.$ = jQuery;
  window.jQuery = jQuery;
  import("bootstrap").then((_bs)=>{
    $(function() {});
  })
});
— SlingEr.
sumber
0

Tumpukan proyek saya adalah: ParcelJS + WordPress

WordPress mendapatkan jQuery v1.12.4 sendiri dan saya juga mengimpor jQuery v3 ^ sebagai modul untuk modul lain yang bergantung serta bootstrap/js/dist/collapse, misalnya ... Sayangnya, saya tidak dapat meninggalkan hanya satu versi jQuery karena ketergantungan modular WordPress lainnya. Dan tentu saja muncul konflik antara dua versi jquery. Juga perlu diingat kami mendapat dua mode untuk proyek ini yang menjalankan Wordpress (Apache) / ParcelJS (NodeJS), penyihir membuat semuanya sedikit kesulitan. Jadi penyelesaian untuk konflik ini adalah mencari, terkadang proyek rusak di kiri, terkadang di sisi kanan. JADI ... Solusi terakhir saya (saya harap begitu ...) adalah:

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

Saya masih tidak mengerti bagaimana diri saya sendiri, tetapi metode ini berhasil. Kesalahan dan konflik dari dua versi jQuery tidak lagi muncul

— north.inhale
sumber
0

Jika Anda menggunakan Webpack 4, jawabannya adalah menggunakan ProvidePlugin. Dokumentasi mereka secara khusus mencakup angular.js dengan kasus penggunaan jquery :

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

Masalahnya adalah saat menggunakan importsintaks angular.js dan jquery akan selalu diimpor sebelum Anda memiliki kesempatan untuk menetapkan jquery ke window.jQuery ( importpernyataan akan selalu berjalan pertama kali di mana pun mereka berada dalam kode!). Ini berarti bahwa angular akan selalu melihat window.jQuery sebagai tidak terdefinisi sampai Anda menggunakannya ProvidePlugin.

— Martin Konecny
sumber
0

Pika adalah CDN yang menangani penyediaan versi modul dari paket populer

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

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

Skypack adalah Pika, jadi Anda juga bisa menggunakan: import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

— SamGoody
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.