Como importar jquery usando a sintaxe ES6?

128

Estou escrevendo um novo aplicativo usando a ES6sintaxe (JavaScript) através do babeltranspiler e dos preset-es2015plugins, bem como semantic-uipara o 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>

Estrutura do projeto

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

Questão

O uso da <script>tag clássica para importar jqueryfunciona bem, mas estou tentando usar a sintaxe do ES6.

  • Como importar jquerypara satisfazer semantic-uiusando a sintaxe de importação ES6?
  • Devo importar do node_modules/diretório ou do meu dist/(onde copio tudo)?
javascript  jquery  ecmascript-6  browserify  semantic-ui 
— Édouard Lopez
fonte
2
Bem, importar de distnão faz sentido, pois essa é sua pasta de distribuição com o aplicativo pronto para produção. A criação do seu aplicativo deve pegar o que há dentro dos módulos do nó e adicioná-lo à pasta dist, incluindo o jQuery.
— nem035
A importação também não é importada de um arquivo scss . A menos que haja algum plugin incrível que eu estou perdendo!
— CodingIntrigue
@RGraham é chamado sassify , um plugin para browserify. Estou me inspirando da essência oncletom
— Édouard Lopez
Vou verificar isso, obrigado!
— CodingIntrigue
@RGraham - a sintaxe parece estranha, mas o uso de "require" para arquivos css / sass é incentivado com ferramentas de construção como webpack + babel. por exemplo. require ("../ node_modules / bootstrap / dist / css / bootstrap.min.css");
— Arcseldon

Respostas:

129

index.js

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

Primeiro, como o @nem sugeriu no comentário, a importação deve ser feita a partir de node_modules/:

Bem, importar de dist/não faz sentido, pois essa é sua pasta de distribuição com o aplicativo pronto para produção. A criação do seu aplicativo deve pegar o conteúdo node_modules/e adicioná-lo à dist/pasta, incluindo o jQuery.

Em seguida, o glob - * as- está errado, pois sei qual objeto estou importando ( por exemplo, jQuery e $), portanto, uma declaração de importação simples funcionará.

Por último, você precisa expô-lo a outros scripts usando o window.$ = $.

Em seguida, importo como ambos $e, jQuerypara cobrir todos os usos, browserifyremova a duplicação de importação, portanto não há custos adicionais aqui! ^ o ^ y

— Édouard Lopez
fonte
6
Não tenho certeza se ainda estão por aí, mas você poderia explicar a necessidade window.$ = $. Não entendo por que isso é necessário. Outros scripts não serão agrupados automaticamente em um único jsscript quando o browserify for mágico?
— qarthandso
13
Por que não apenas ter import {$,jQuery} from 'jquery';? Por que tantas importações?
— Jackie
4
Como você encontra o nome exato da classe, ie jQuery?
— Avinash Raj
13
Eu recebo Module '"jquery"' has no exported member 'jQuery'ou o Module '"jquery"' has no default exportque estou perdendo, por favor?
— Daslicht 11/11
4
As versões mais antigas do jQuery não usam exportações nomeadas. Versões mais recentes fazem. O método de importação depende da versão do jQuery que você está usando.
— Pmj
55

Com base na solução de Édouard Lopez, mas em duas linhas:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
— ha7ilm
fonte
2
Isso funcionou para mim, enquanto a abordagem de resposta aceita não ... Eu usei o mesmo: import $ from 'jquery'; window.jQuery = $; window. $ = $;
— Arcseldon 5/09
3
uma linha:window.$ = window.jQuery = require('jquery');
— Nabil Baadillah 12/09
2
O @NabilBaadillah require(CommonJS) não é import(módulo ES) e o one-liner não parece possível import. (Alguém se importa?)
— Nicolas Le Thierry d'Ennequin
13

Importe todo o conteúdo do JQuery no escopo Global. Isso insere $ no escopo atual, contendo todas as ligações exportadas do JQuery.

import * as $ from 'jquery';

Agora o $ pertence ao objeto da janela.

— ivan hertz
fonte
1
isso funcionou para mim. A parte superior "importa {jQuery como $} de 'jquery';" dá um erro dizendo "jQuery" não encontrado.
— SpaceMonkey 29/01
12

Você pode criar um conversor de módulo como abaixo:

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

Isso removerá as variáveis ​​globais introduzidas pelo jQuery e exportará o objeto jQuery como padrão.

Em seguida, use-o no seu script:

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

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

Não esqueça de carregá-lo como um módulo no seu documento:

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

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

— Yukulélé
fonte
1
Este ajudou! Eu geralmente gosto de experimentar o básico antes de usar qualquer IDE / DevEnv. Sem usar o Node / NPM / Babble, eu queria entender a importação e exportação do ES6. Eu havia conseguido que a importação e exportação básica funcionasse, mas estava lutando com a inclusão do jquery. Eu escrevi meu código personalizado como módulo, mas continuei referenciando o jquery da maneira tradicional usando a tag de script em html. Então, acabei tendo duas tags de script, uma para incluir jquery e outra para incluir app.js. Com sua resposta, pude me livrar da minha primeira tag de script jquery e usei o intermediário jquery.module.js, conforme sugerido.
— Sidnc86 29/05/19
9

A resposta aceita não funcionou para mim,
note: usando o rollup js não sei se essa resposta pertence aqui
após o
npm i --save jquery
em custom.js

import {$, jQuery} from 'jquery';

ou

import {jQuery as $} from 'jquery';

Eu estava recebendo erro : Module ... node_modules / jquery / dist / jquery.js não exporta jQuery
ou
Module ... node_modules / jquery / dist / jquery.js não 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',
};

em vez de injetar rollup, tentei 

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

Funcionou:
removidos os plugins de injeção de rollup e commonjs

import * as jQuery from 'jquery';

depois em custom.js

$(function () {
        console.log('Hello jQuery');
});
— Ritin
fonte
Parece namedExportsque não existe mais no plugin commonjs
— Nicolas Hoizey 29/07
7

Se isso ajudar alguém, as instruções de importação de javascript são içadas. Portanto, se uma biblioteca tiver uma dependência (por exemplo, inicialização) no jquery no espaço de nomes global (janela), isso NÃO funcionará:

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

Isso ocorre porque a importação do bootstrap é içada e avaliada antes do jQuery ser anexado à janela.

Uma maneira de contornar isso é não importar o jQuery diretamente, mas sim importar um módulo que importa o jQuery E o anexa à janela.

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

onde leaked-jqueryparece

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

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

— craigmichaelmartin
fonte
6

usuários do webpack, adicione o seguinte ao seu pluginsarray.

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];
— Muhammad Reda
fonte
4
Qual é o profissional dessa abordagem? Porque você está se ligando à sua ferramenta de construção aqui.
— Édouard Lopez
essa é a única maneira de fazê-lo funcionar. Eu tentei, import {$, jQuery} from 'jquery';mas o id não funcionou, acredito porque não está definido (importado) em outros módulos.
— Muhammad Reda
2
Esta é a melhor solução para usuários de webpack porque o jQuery deve estar disponível globalmente em todos os arquivos, sem as instruções de importação redundantes.
— Amir
1 
import {jQuery as $} from 'jquery';
— Farsheed
fonte
1
diz jQuery não encontrado. A outra resposta funcionou "import * como $ from 'jquery';". Você sabe por que isso acontece? Meu arquivo JS para o qual estou importando o jquery faz parte de um arquivo Angular / Typescript #
— SpaceMonkey
1

Ainda não vi essa sintaxe exata, e funcionou para mim em um ambiente ES6 / Webpack:

import $ from "jquery";

Retirado diretamente da página NPM do jQuery . Espero que isso ajude alguém.

— Stephen Shank
fonte
1

Se você não estiver usando nenhuma ferramenta de construção JS / NPM, poderá incluir diretamente o Jquery como: 

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

Você pode pular a importação (Linha 1) se já tiver incluído o jquery usando a tag de script abaixo da cabeça.

— VNN456
fonte
Não sei por que, mas este funcionou para mim quando ninguém o fez. Qualquer declaração de importação que não seja a bare import 'filepath/jquery.js'lançou algum erro sobre o módulo não exportar a função que eu queria ou $ não ser uma função ou apenas um SyntaxError ao ver a palavra from.
— Ketchup Galactic
0

Antes de tudo, instale e salve-os no package.json:

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

Em segundo lugar, adicione um alias na configuração do webpack:

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

Ele funciona para mim com o último jquery (3.2.1) e jquery-ui (1.12.1).

Veja meu blog para obter detalhes: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

— cwtuan
fonte
0

Importar jquery (eu instalei com 'npm install jquery@1.9.1')

import 'jquery/jquery.js';

Coloque todo o seu código que depende do jquery dentro desse método

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

ou declarar a variável $ após a importação

var $ = window.$
— Yoseph
fonte
0

Eu queria usar o jQuery já construído (em jquery.org) e todas as soluções mencionadas aqui não funcionaram. Como eu corrigi esse problema, adicionei as seguintes linhas que devem fazê-lo funcionar em quase todos os ambientes:

 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
fonte
Ivan Castellanos você deve expandir o seu exemplo para entender melhor como aplicá-la
— north.inhale
0

Você pode importar assim

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

Minha pilha de projetos é: ParcelJS + WordPress

O WordPress possui o jQuery v1.12.4 e eu também importo o jQuery v3 ^ como módulo para outros módulos dependentes, bem como bootstrap/js/dist/collapse, por exemplo ... Infelizmente, não posso deixar apenas uma versão do jQuery devido a outras dependências modulares do WordPress. E é claro que há conflito entre duas versões de jquery. Lembre-se também de que temos dois modos para este projeto executando o Wordpress (Apache) / ParcelJS (NodeJS), o que dificulta um pouco as coisas. Então, a solução para esse conflito estava sendo pesquisada, às vezes o projeto foi interrompido à esquerda, às vezes do lado direito. SO ... Minha solução final (espero que sim ...) é:

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

Eu ainda não entendia como eu mesmo, mas esse método funciona. Erros e conflitos de duas versões do jQuery não aparecem mais

— north.inhale
fonte
0

Se você estiver usando o Webpack 4, a resposta é usar o ProvidePlugin. A documentação deles cobre especificamente o angular.js com o caso de uso jquery :

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

O problema é que ao usar a importsintaxe angular.js e o jquery sempre será importado antes que você tenha a chance de atribuir o jquery ao window.jQuery (as importinstruções sempre serão executadas primeiro, não importa onde estejam no código!). Isso significa que angular sempre verá window.jQuery como indefinido até você usar ProvidePlugin.

— Martin Konecny
fonte
0

Pika é uma CDN que cuida de fornecer versões de módulos de pacotes populares

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

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

O Skypack é o Pika, então você também pode usar: import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

— SamGoody
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.