Saya sedang menulis aplikasi baru menggunakan ES6
sintaks (JavaScript) melalui babel
transpiler dan preset-es2015
plugin, serta semantic-ui
untuk 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 jquery
berfungsi dengan baik, tetapi saya mencoba menggunakan sintaks ES6.
- Bagaimana cara mengimpor
jquery
untuk memenuhisemantic-ui
penggunaan sintaks impor ES6? - Haruskah saya mengimpor dari
node_modules/
direktori atau milik sayadist/
(tempat saya menyalin semuanya)?
javascript
jquery
ecmascript-6
browserify
semantic-ui
Édouard Lopez
sumber
sumber
dist
tidak 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.Jawaban:
index.js
Pertama, seperti yang disarankan @nem dalam komentar, impor harus dilakukan dari
node_modules/
:Selanjutnya, glob -
* as
- salah karena saya tahu objek apa yang saya impor ( misalnyajQuery
dan$
), jadi pernyataan import langsung akan berfungsi.Terakhir, Anda perlu mengeksposnya ke skrip lain menggunakan
window.$ = $
.Kemudian, saya mengimpor sebagai keduanya
$
danjQuery
untuk mencakup semua penggunaan,browserify
menghapus duplikasi impor, jadi tidak ada biaya tambahan di sini! ^ o ^ ysumber
window.$ = $
. Saya tidak mengerti mengapa itu dibutuhkan. Tidakkah skrip lain akan secara otomatis digabungkan menjadi satujs
skrip ketika browserify memang ajaib?import {$,jQuery} from 'jquery';
? Mengapa banyak sekali impor?jQuery
?Module '"jquery"' has no exported member 'jQuery'
atauModule '"jquery"' has no default export
apa yang saya lewatkan?Berdasarkan solusi Édouard Lopez, tetapi dalam dua baris:
sumber
window.$ = window.jQuery = require('jquery');
require
(CommonJS) bukanimport
(modul ES) dan one-liner tampaknya tidak memungkinkanimport
. (Seseorang peduli?)Impor seluruh konten JQuery dalam lingkup Global. Ini memasukkan $ ke dalam cakupan saat ini, yang berisi semua binding yang diekspor dari JQuery.
Sekarang $ milik objek jendela.
sumber
Anda dapat membuat konverter modul seperti di bawah ini:
Ini akan menghapus variabel global yang diperkenalkan oleh jQuery dan mengekspor objek jQuery sebagai default.
Kemudian gunakan di skrip Anda:
Jangan lupa untuk memuatnya sebagai modul di dokumen Anda:
http://plnkr.co/edit/a59ETj3Yo2PJ0Aqkxbeu?p=preview
sumber
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
atau
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
Alih-alih menyuntikkan rollup, coba
package.json
Ini berhasil:
hapus plugin injeksi rollup dan commonjs
lalu di custom.js
sumber
namedExports
sudah tidak ada lagi di plugin commonjsJika 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:
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.
dimana
leaked-jquery
kelihatannyaMisalnya, https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js
sumber
pengguna webpack, tambahkan di bawah ini ke
plugins
array Anda .sumber
import {$, jQuery} from 'jquery';
tetapi id tidak berfungsi, saya percaya karena tidak ditentukan (diimpor) di modul lain.sumber
Saya belum melihat sintaks yang tepat ini diposting, dan itu berfungsi untuk saya di lingkungan ES6 / Webpack:
Diambil langsung dari halaman NPM jQuery . Semoga ini bisa membantu seseorang.
sumber
Jika Anda tidak menggunakan alat build / NPM JS, Anda dapat langsung memasukkan Jquery sebagai:
Anda dapat melewati import (Baris 1) jika Anda sudah memasukkan jquery menggunakan tag script di bawah head.
sumber
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 tersebutfrom
.Pertama-tama, instal dan simpan di package.json:
Kedua, tambahkan alias dalam konfigurasi webpack:
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
sumber
Impor jquery (Saya menginstal dengan 'npm install [email protected]')
Masukkan semua kode Anda yang bergantung pada jquery di dalam metode ini
atau nyatakan variabel $ setelah impor
sumber
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:
sumber
Anda dapat mengimpor seperti ini
sumber
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:Saya masih tidak mengerti bagaimana diri saya sendiri, tetapi metode ini berhasil. Kesalahan dan konflik dari dua versi jQuery tidak lagi muncul
sumber
Jika Anda menggunakan Webpack 4, jawabannya adalah menggunakan
ProvidePlugin
. Dokumentasi mereka secara khusus mencakup angular.js dengan kasus penggunaan jquery :Masalahnya adalah saat menggunakan
import
sintaks angular.js dan jquery akan selalu diimpor sebelum Anda memiliki kesempatan untuk menetapkan jquery ke window.jQuery (import
pernyataan 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 menggunakannyaProvidePlugin
.sumber
Pika adalah CDN yang menangani penyediaan versi modul dari paket populer
Skypack adalah Pika, jadi Anda juga bisa menggunakan:
import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';
sumber