¿Cómo importar jquery usando la sintaxis ES6?

128

Estoy escribiendo una nueva aplicación usando la ES6sintaxis (JavaScript) a través del babeltranspiler y los preset-es2015complementos, así como semantic-uipara el 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'));

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

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

Pregunta

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

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

javascript jquery ecmascript-6 browserify semantic-ui Édouard Lopez
fuente

2

Bueno, importar desde distno tiene sentido ya que esa es su carpeta de distribución con la aplicación lista para producción. La construcción de su aplicación debe tomar lo que hay dentro de los módulos de nodo y agregarlo a la carpeta dist, jQuery incluido.

nem035

Tampoco importa desde un archivo scss . ¡A menos que haya algún plugin increíble que me estoy perdiendo!

CodingIntrigue

@RGraham se llama sassify , un complemento de browserify. Me estoy inspirando en la esencia de Oncletom

Édouard Lopez

Lo comprobaré, ¡gracias!

CodingIntrigue

@RGraham: la sintaxis parece extraña, pero se recomienda usar "require" para archivos css / sass con herramientas de compilación como webpack + babel. p.ej. require ("../ node_modules / bootstrap / dist / css / bootstrap.min.css");

arcseldon

129

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 hacerse 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 - * asestá mal, ya que sé qué objeto estoy importando ( por ejemplo, jQuery y $), por lo que funcionará una declaración de importación sencilla .

Por último, debe exponerlo a otros scripts utilizando 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

Édouard Lopez
fuente

66

No estoy seguro si todavía hay alguno, pero ¿podría explicar la necesidad window.$ = $? No entiendo por qué es necesario. ¿No se jsincluirán automáticamente otros scripts en un solo script cuando browserify sea mágico?

qarthandso

13

¿Por qué no simplemente tener import {$,jQuery} from 'jquery';? ¿Por qué tantas importaciones?

Jackie

44

¿Cómo encuentras el nombre de la clase exacta, es decir jQuery?

Avinash Raj

13

O lo entiendo Module '"jquery"' has no exported member 'jQuery'o Module '"jquery"' has no default export¿qué me estoy perdiendo por favor?

daslicht

44

Las versiones anteriores de jQuery no usan exportaciones con nombre. Las versiones más nuevas lo hacen. El método de importación depende de la versión de jQuery que esté utilizando.

pmont

55

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

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

ha7ilm
fuente

2

Esto funcionó para mí, mientras que el enfoque de respuesta aceptado no ... Usé casi lo mismo: import $ de 'jquery'; window.jQuery = $; ventana. $ = $;

arcseldon

3

una línea:window.$ = window.jQuery = require('jquery');

Nabil Baadillah el

2

@NabilBaadillah require(CommonJS) no es import(módulo ES) y el one-liner no parece posible con import. (¿A alguien le importa?)

Nicolas Le Thierry d'Ennequin

13

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

import * as $ from 'jquery';

Ahora el $ pertenece al objeto de la ventana.

ivan hertz
fuente

1

Esto funcionó para mí. La parte superior "importar {jQuery como $} desde 'jquery';" da un error que dice "jQuery" no encontrado.

SpaceMonkey

12

Puede crear un convertidor de módulo como el siguiente:

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

Esto eliminará las variables globales introducidas por jQuery y exportará el objeto jQuery como predeterminado.

Luego úsalo en tu script:

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

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

No olvide cargarlo como módulo en su documento:

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

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

Yukulélé
fuente

1

Este ayudó! Generalmente me gusta probar lo básico antes de usar cualquier IDE / DevEnv. Sin usar Node / NPM / Babble, quería entender la importación y exportación de ES6. Había logrado que funcionara la importación y exportación básica, pero estaba luchando con la inclusión de jquery. Tenía mi código personalizado escrito como módulo, pero seguía haciendo referencia a jquery en su forma tradicional usando la etiqueta de script en html. Así que terminé teniendo 2 etiquetas de script, una para incluir jquery y otra para incluir app.js. Con su respuesta, podría deshacerme de mi primera etiqueta de script jquery y usar el jquery.module.js intermedio como sugirió.

sidnc86

9

La respuesta aceptada no funcionó para mí
nota: el uso de rollup js no sé si esta respuesta pertenece aquí
después de
npm i --save jquery
en custom.js

import {$, jQuery} from 'jquery';

o

import {jQuery as $} from 'jquery';

estaba recibiendo un error : Módulo ... node_modules / jquery / dist / jquery.js no exporta jQuery
o
Module ... node_modules / jquery / dist / jquery.js no exporta $
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',
};

en lugar de inyectar rollup, intenté

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

Esto funcionó:
eliminó los paquetes de inyección acumulada y los complementos commonjs

import * as jQuery from 'jquery';

luego en custom.js

$(function () {
        console.log('Hello jQuery');
});

Ritin
fuente

Parece que namedExportsya no existe en el complemento commonjs

Nicolas Hoizey

7

Si ayuda a alguien, se levantan las declaraciones de importación de JavaScript. Por lo tanto, si una biblioteca tiene una dependencia (por ejemplo, bootstrap) en jquery en el espacio de nombres global (ventana), esto NO funcionará:

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

Esto se debe a que la importación de bootstrap se levanta y evalúa antes de que jQuery se adjunte a la ventana.

Una forma de evitar esto es no importar jQuery directamente, sino importar un módulo que importa jQuery Y lo adjunta a la ventana.

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

donde leaked-jqueryparece

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

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

craigmichaelmartin
fuente

6

usuarios de paquetes web, agregue lo siguiente a su pluginsmatriz.

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

Muhammad Reda
fuente

44

¿Cuál es la ventaja de este enfoque? Porque te estás vinculando a tu herramienta de construcción aquí.

Édouard Lopez

esta es la única forma en que lo hice funcionar. Lo intenté import {$, jQuery} from 'jquery';pero la identificación no funcionó, creo que porque no está definida (importada) en otros módulos.

Muhammad Reda

2

Esta es la mejor solución para los usuarios de paquetes web porque jQuery debería estar disponible globalmente en todos los archivos, sin las declaraciones de importación redundantes.

Amir

1

import {jQuery as $} from 'jquery';

Farsheed
fuente

1

dice jQuery no encontrado. La otra respuesta funcionó "import * as $ from 'jquery';". ¿Sabes por qué sucede eso? Mi archivo JS donde estoy importando jquery es parte de un archivo angular / mecanografiado

SpaceMonkey

1

Todavía no vi esta sintaxis exacta publicada, y funcionó para mí en un entorno ES6 / Webpack:

import $ from "jquery";

Tomado directamente de la página NPM de jQuery . Espero que esto ayude a alguien.

Stephen Shank
fuente

1

Si no está utilizando ninguna herramienta de compilación JS / NPM, puede incluir directamente Jquery como:

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

Puede omitir la importación (Línea 1) si ya incluyó jquery usando la etiqueta de script debajo de la cabeza.

VNN456
fuente

No sé por qué, pero este funcionó para mí cuando ningún otro lo hizo. Cualquier declaración de importación que no sea la simple import 'filepath/jquery.js'arrojó algún error acerca de que el módulo no exportaba la función que quería o que $ no era una función o simplemente un SyntaxError a la vista de la palabra from.

Salsa de tomate galáctica

0

En primer lugar, instálelos y guárdelos en package.json:

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

En segundo lugar, agregue un alias en la configuración del paquete web:

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

Me funciona con el último jquery (3.2.1) y jquery-ui (1.12.1).

Vea mi blog para más detalles: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

cwtuan
fuente

0

Importar jquery (instalé con 'npm install [email protected]')

import 'jquery/jquery.js';

Ponga todo su código que depende de jquery dentro de este método

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

o declarar $ variable después de la importación

var $ = window.$

Yoseph
fuente

0

Quería usar el jQuery alread-buildy (de jquery.org) y todas las soluciones mencionadas aquí no funcionaron, la forma en que solucioné este problema fue agregar las siguientes líneas que deberían hacerlo funcionar en casi todos los entornos:

 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
fuente

Ivan Castellanos, debe expandir su ejemplo para comprender mejor cómo aplicarlo

north.inhale

0

Puedes importar así

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

SlingEr.
fuente

0

Mi pila de proyectos es: ParcelJS + WordPress

WordPress obtuvo jQuery v1.12.4 y también importé jQuery v3 ^ como módulo para otros módulos dependientes, así como bootstrap/js/dist/collapse, por ejemplo ... Desafortunadamente, no puedo dejar solo una versión de jQuery debido a otras dependencias modulares de WordPress. Y, por supuesto, surge un conflicto entre dos versiones jquery. También tenga en cuenta que tenemos dos modos para este proyecto que ejecuta Wordpress (Apache) / ParcelJS (NodeJS), lo que dificulta todo un poco. Entonces, la solución para este conflicto fue buscar, a veces el proyecto se rompió a la izquierda, a veces en el lado derecho. SO ... Mi solución final (espero que sea así ...) es:

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

Todavía no entendía cómo era yo, pero este método funciona. Los errores y conflictos de dos versiones de jQuery ya no surgen

north.inhale
fuente

0

Si está usando Webpack 4, la respuesta es usar el ProvidePlugin. Su documentación cubre específicamente angular.js con el caso de uso de jquery :

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

El problema es que cuando se usa la importsintaxis angular.js y jquery siempre se importarán antes de que tenga la oportunidad de asignar jquery a window.jQuery (¡las importinstrucciones siempre se ejecutarán primero sin importar dónde se encuentren en el código!). Esto significa que angular siempre verá window.jQuery como indefinido hasta que lo use ProvidePlugin.

Martin Konecny
fuente

0

Pika es un CDN que se encarga de proporcionar versiones de módulos de paquetes populares

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

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

Skypack es Pika, por lo que también puedes usar: import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

SamGoody
fuente

¿Cómo importar jquery usando la sintaxis ES6?

index.js

index.html

Estructura del proyecto

package.json

Pregunta

Respuestas:

index.js