Как импортировать jquery с использованием синтаксиса ES6?

index.js

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

Во-первых, поскольку @nem предлагается в комментарии, импорт должен выполняться из node_modules/ :

Ну, импорт из dist/ не имеет смысла, поскольку это ваша папка распространения с готовым продуктом. Построение вашего приложения должно занять то, что находится внутри node_modules/ и добавить его в папку dist/ , включенную jQuery.

Далее, glob – * as – неверно, поскольку я знаю, какой объект я импортирую ( например, jQuery и $ ), поэтому будет выполняться оператор импорта .

Наконец, вам нужно выставить его на другие скрипты с помощью window.$ = $ .

Затем я импортирую как $ и jQuery чтобы охватить все обычаи, browserify удаление дублирования импорта, поэтому здесь не накладные расходы! ^ О ^ у

Основываясь на решении Édouard Lopez, но в двух строках:

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

Принятый ответ мне не помог
примечание: использование rollup js не знает, принадлежит ли этот ответ здесь
после
npm i –save jquery
в custom.js

 import {$, jQuery} from 'jquery'; 

или

 import {jQuery as $} from 'jquery'; 

я получал ошибку : Module … node_modules / jquery / dist / jquery.js не экспортирует jQuery
или
Модуль … node_modules / jquery / dist / jquery.js не экспортирует $
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', }; 

вместо инкапсулирования, попробовал

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

Это сработало:
удалили вложенные вложения и обычные плагины

 import * as jQuery from 'jquery'; 

затем в custom.js

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

webpack, добавьте ниже в свой массив plugins .

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

Импортируйте содержимое всего JQuery в глобальную область. Это вставляет $ в текущую область, содержащую все экспортированные привязки из JQuery.

 import * as $ from 'jquery'; 

Теперь $ принадлежит объекту window.

 import {jQuery as $} from 'jquery'; 

Если это кому-то помогает, вывозятся инструкции импорта javascript. Таким образом, если библиотека имеет зависимость (например, bootstrap) от jquery в глобальном пространстве имен (окне), это НЕ будет работать:

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

Это связано с тем, что импорт бутстрапа поднимается и оценивается до того, как jQuery прикреплен к окну.

Один из способов обойти это – не импортировать jQuery напрямую, а вместо этого импортировать модуль, который сам импортирует jQuery и прикрепляет его к окну.

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

где выглядит leaked-jquery

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

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

Прежде всего, установите и сохраните их в package.json:

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

Во-вторых, добавьте псевдоним в конфигурацию webpack:

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

Он работает для меня с последним jquery (3.2.1) и jquery-ui (1.12.1).

См. Мой блог для подробностей: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

Импорт jquery (я установил с «npm install [email protected]»)

 import 'jquery/jquery.js'; 

Поместите весь свой код, который зависит от jquery внутри этого метода

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

или объявить переменную $ после импорта

 var $ = window.$