¿Cómo importar jquery usando la sintaxis ES6?

Estoy escribiendo una nueva aplicación usando ES6la sintaxis (JavaScript) a través babeldel transpilador y los preset-es2015complementos, así como semantic-uiel estilo.

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'));

índice.html

<!DOCTYPE html>
<html lang="fr">
<head>
<body>
<script src="dist/app.js"></script>
</body>
</html>

Estructura del proyecto

.
├── app/
│   ├── index.js
├── assets/
├── dist/
│   ├── scripts/
│   │   ├── jquery.min.js
├── index.html
├── node_modules/
│   ├── jquery/
│   │   ├── dist/
│   │   │   ├── jquery.min.js
├── package.json
└── tests/

paquete.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}]
    ]
  }

Pregunta

Usar <script>la etiqueta clásica para importar jqueryfunciona bien, pero estoy intentando usar la sintaxis de ES6.

¿ Cómo importo jquerypara satisfacer semantic-uiel uso de la sintaxis de importación de ES6?
¿Debo importar desde el node_modules/directorio o desde mi dist/(donde copio todo)?

Dec 17 '15 22:12 Édouard Lopez

index.js

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

Primero, como sugirió @nem en el comentario, la importación debe realizarse desde node_modules/:

Bueno, importar desde dist/no tiene sentido ya que esa es su carpeta de distribución con la aplicación lista para producción. La creación de su aplicación debe tomar lo que hay dentro node_modules/y agregarlo a la dist/carpeta, incluido jQuery.

A continuación, el glob – * as– es incorrecto porque sé qué objeto estoy importando ( por ejemplo jQuery , y $), por lo que una declaración de importación directa funcionará.

Por último, debe exponerlo a otros scripts utilizando el archivo window.$ = $.

Luego, importo como ambos $y jQuerypara cubrir todos los usos, browserifyelimino la duplicación de importación, ¡así que no hay gastos generales aquí! ^o^y

Dec 17 '2015 17:12 Édouard Lopez

Basado en la solución de Édouard Lopez, pero en dos líneas:

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

Feb 11 '2017 12:02 ha7ilm

Puede crear un convertidor de módulo como se muestra a continuación:

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

Esto eliminará las variables globales introducidas por jQuery ( jQuery& $) y exportará el objeto jQuery de forma predeterminada.

Luego úsalo en tu script:

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

No olvides cargarlo como módulo en tu documento:

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

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

Oct 15 '2018 22:10 Yukulélé

Importe todo el contenido de JQuery en el ámbito global. Esto inserta $ en el alcance actual, que contiene todos los enlaces exportados desde JQuery.

import * as $ from 'jquery';

Ahora el $ pertenece al objeto de la ventana.

Jul 07 '2017 02:07 ivan hertz