Cómo importar jquery usando la sintaxis ES6?

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

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

La respuesta aceptada no funcionó para mí
nota: usando rollup js no sé si esta respuesta pertenece aquí
después de
jquery{[8]]} en la costumbre.js

import {$, jQuery} from 'jquery';

O

import {jQuery as $} from 'jquery';

Estaba recibiendo 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 inyección de rollup, probado

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

Paquete.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ó :
se eliminaron los plugins rollup inject y commonjs

import * as jQuery from 'jquery';

Entonces en costumbre.js

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

Usuarios de Webpack, agregue lo siguiente a su matriz plugins.

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

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 belongs pertenece al objeto window.

import {jQuery as $} from 'jquery';

Si ayuda a alguien, las instrucciones de importación de javascript se izan. Por lo tanto, si una biblioteca tiene una dependencia (por ejemplo, bootstrap) en jquery en el espacio de nombres global (window), 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 eleva y evalúa antes de que jQuery se adjunte a window.

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

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

Donde leaked-jquery se ve como

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

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

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

En segundo lugar, agregue un alias en la configuración de webpack:

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

Funciona para mí con la última jquery(3.2.1) y jquery-ui(1.12.1).

Ver 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 el código que depende de jquery dentro de este método

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

O declarar variable after después de importar

var $ = window.$