javascript - Hvordan importere jquery ved hjelp av ES6-syntaks?

Jeg skriver en ny app ved å bruke (JavaScript) ES6-syntaks gjennom babel-transpiler og preset-es2015-plugins, samt semantic-ui for stilen.

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>

Prosjektstruktur

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

Spørsmål

Å bruke den klassiske <script>-taggen for å importere jquery fungerer fint, men jeg prøver å bruke ES6-syntaksen.

  • Hvordan importerer jeg jquery for å tilfredsstille semantic-ui ved å bruke ES6 import-syntaks?
  • Bør jeg importere fra node_modules/-katalogen eller fra dist/ (der jeg kopierer alt)?

Svar #1

index.js

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

Først, som @nem foreslo i kommentaren, bør importen gjøres fra node_modules/:

Vel, å importere fra dist/ gir ikke mening siden det er distribusjonsmappen din med ferdig app klar for produksjon. Å bygge appen din bør ta det som er inne i node_modules/ og legge det til dist/-mappen, inkludert jQuery.

Videre er glob -* as- feil siden jeg vet hvilket objekt jeg importerer (f.eks. jQuery og $), så en enkel importsetning vil fungere.

Til slutt må du eksponere det til andre skript ved å bruke window.$=$.

Deretter importerer jeg både som $ og jQuery for å dekke alle bruksområder, browserify fjerner importduplikater, så ingen ekstra belastning her! ^o^y

Svar #2

Basert på løsningen til Édouard Lopez, men på to linjer:

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

Svar #3

Du kan lage en modulomformer som nedenfor:

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

Dette vil fjerne globale variabler introdusert av jQuery (jQuery & $) og eksportere jQuery-objektet som standard.

Bruk det deretter i skriptet ditt:

// script.js
import $ from "./jquery.module.js";
    
$(function(){
  $('body').text('youpi!');
});

Ikke glem å laste det som en modul i dokumentet ditt:

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

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

Svar #4

Importer hele innholdet av JQuery i det globale området. Dette setter inn $i det nåværende området, som inneholder alle de eksporterte bindingene fra JQuery.

import * as $ from 'jquery';

Nå tilhører $vindusobjektet.

Svar #5

Hvis det hjelper noen, blir JavaScript import-setninger hevet. Derfor, hvis et bibliotek har en avhengighet (f.eks. bootstrap) på jQuery i det globale navnerommet (window), vil ikke dette fungere:

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

Dette er fordi importen av bootstrap blir hevet og evaluert før jQuery blir festet til vinduet.

En måte å komme rundt dette på er å ikke importere jQuery direkte, men i stedet importere en modul som selv importerer jQuery OG fester det til vinduet.

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

hvor leaked-jquery ser ut

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

Svar #6

webpack-brukere, legg til følgende i din plugins-array.

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

Relaterte artikler