ejemplos - ¿Cómo importar jquery usando la sintaxis ES6?
ajax jquery php (11)
Estoy escribiendo una nueva aplicación usando la sintaxis
ES6
(JavaScript) a través del transpilador de
babel
y los complementos
preset-es2015
, así como
semantic-ui
de
preset-es2015
semantic-ui
para 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 etiqueta clásica
<script>
para importar
jquery
funciona bien, pero estoy tratando de usar la sintaxis ES6.
-
¿Cómo importo
jquerypara satisfacer lasemantic-uiusando la sintaxis de importación ES6? -
¿Debo importar desde el directorio
node_modules/o midist/(donde copio todo)?
index.js
import {$,jQuery} from ''jquery'';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;
Primero, como
@nem
sugirió 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 construcción de su aplicación debe tomar lo que está dentro denode_modules/y agregarlo a la carpetadist/, jQuery incluido.
A continuación, el glob -
* as
- está 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 la
window.$ = $
.
Luego, importo como
$
y
jQuery
para cubrir todos los usos,
browserify
eliminar duplicación de importación, ¡así que no hay gastos generales aquí!
^ o ^ y
Basado en la solución de Édouard Lopez, pero en dos líneas:
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
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
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.$
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.
La respuesta aceptada no funcionó para mí.
nota: usando rollup js
no sé si esta respuesta pertenece aquí
después
npm i --save jquery
en custom.js
import {$, jQuery} from ''jquery'';
o
import {jQuery as $} from ''jquery'';
recibía un
error
: Módulo ... node_modules / jquery / dist / jquery.js no exporta
jQuery
o
Módulo ... 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 complementos de inyección acumulada y commonjs
import * as jQuery from ''jquery'';
luego en custom.js
$(function () {
console.log(''Hello jQuery'');
});
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 olvides cargarlo como un módulo en tu documento
<script type=''module'' src=''./script.js''></script>
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)
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 importe jQuery Y lo adjunte a la ventana.
import jQuery from ''./util/leaked-jquery'';
import ''bootstrap/dist/js/bootstrap.min'';
donde se
leaked-jquery
import {$,jQuery} from ''jquery'';
window.$ = $;
window.jQuery = jQuery;
export default $;
export jQuery;
usuarios de paquetes web, agregue lo siguiente a su matriz de
plugins
.
let plugins = [
// expose $ and jQuery to global scope.
new webpack.ProvidePlugin({
$: ''jquery'',
jQuery: ''jquery''
})
];
import {jQuery as $} from ''jquery'';