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

Ответ 1

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 и $), поэтому straigforward import будет работать.

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

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

Ответ 2

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

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

Ответ 3

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

import * as $ from 'jquery';

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

Ответ 4

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

import {$, jQuery} from 'jquery';

или

import {jQuery as $} from 'jquery';

я получал ошибку: Модуль... 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',
};

вместо rollup inject, попробовал

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

Ответ 5

Вы можете создать конвертер модулей, как показано ниже:

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

Это удалит глобальные переменные, представленные jQuery, и экспортирует объект jQuery по умолчанию.

Затем используйте его в своем скрипте:

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

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

Не забудьте загрузить его как модуль в свой документ:

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

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

Ответ 6

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

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

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

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

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;

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

Ответ 7

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

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

Ответ 8

import {jQuery as $} from 'jquery';

Ответ 9

Прежде всего, установите и сохраните их в 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

Ответ 10

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

import 'jquery/jquery.js';

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

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

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

var $ = window.$

Ответ 11

Я хотел использовать jQuery с alread-buildy (с jquery.org), и все упомянутые здесь решения не помогли, как я исправил эту проблему, добавляя следующие строки, которые должны заставить работать почти в любой среде:

 export default  ( typeof module === 'object' && module.exports && typeof module.exports.noConflict === 'function' )
    ? module.exports.noConflict(true)
    : ( typeof window !== 'undefined' ? window : this ).jQuery.noConflict(true)

Ответ 12

Оформить заказ также (отлично работает с webpack и babel-loader)

import 'jquery';
let $ = window.$;