Як імпортувати jquery за допомогою синтаксису ES6?

128

Я пишу нову програму з використанням ES6синтаксису (JavaScript) через babelтранспілер та preset-es2015плагіни, а такожsemantic-ui для стилю.

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>

Структура проекту

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

Питання

Використання класичного <script>тегу для імпорту jqueryпрацює чудово, але я намагаюся використовувати синтаксис ES6.

  • Як імпортувати, jqueryщоб задовольнитиsemantic-ui використовуючи синтаксис імпорту ES6?
  • Чи потрібно імпортувати з node_modules/каталогу чи мого dist/(куди я все копіюю)?
javascript  jquery  ecmascript-6  browserify  semantic-ui 
— Едуард Лопес
джерело
2
Ну, імпортувати з distнього не має сенсу, оскільки це ваша папка дистрибутиву з додатком, готовим до виробництва. Побудова вашої програми повинна приймати те, що знаходиться всередині модулів вузла, і додавати їх у папку dist, включена jQuery.
— nem035
Не імпортується також із файлу scss . Якщо тільки не є якийсь дивовижний плагін, який я пропускаю!
— CodingIntrigue
@RGraham це називається sassify , плагін для перегляду. Я надихаю себе на суть онклатома
— Едуард Лопес
Я перевірю це, дякую!
— CodingIntrigue
@RGraham - синтаксис виглядає дивним, але використання "вимагати" для файлів css / sass рекомендується за допомогою інструментів збирання, таких як webpack + babel. напр. вимагати ("../ node_modules / bootstrap / dist / css / bootstrap.min.css");
— arcseldon

Відповіді:

129

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видаляю дублювання імпорту, так що сюди немає накладних витрат! ^ о ^ у

— Едуард Лопес
джерело
6
Не впевнений, чи є все ще навколо, але ви могли б пояснити необхідність window.$ = $. Я не розумію, для чого це потрібно. Чи не будуть інші сценарії автоматично jsпоєднані в один сценарій, коли перегляньте, чи це магія?
— qarthandso
13
Чому б просто не мати import {$,jQuery} from 'jquery';? Чому так багато імпорту?
— Джекі
4
Як ви знайдете в імені точне ім'я класу, тобто jQuery?
— Avinash Raj
13
Я або отримую, Module '"jquery"' has no exported member 'jQuery'або Module '"jquery"' has no default exportчого я пропускаю, будь ласка?
— daslicht
4
Старіші версії jQuery не використовують експорт з назвою. Новіші версії. Спосіб імпорту залежить від того, яку версію jQuery ви використовуєте.
— пмонт
55

На основі рішення Едуарда Лопеса, але в двох рядках:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
— ha7ilm
джерело
2
Це працювало для мене, тоді як прийнятий підхід до відповідей не став ... Я використовував майже те саме: import $ from 'jquery'; window.jQuery = $; window. $ = $;
— arcseldon
3
один рядок:window.$ = window.jQuery = require('jquery');
— Nabil Baadillah
2
@NabilBaadillah require(CommonJS) не є import(модуль ES), і однолінійний набір не здається можливим import. (Когось хвилює?)
— Ніколя Ле Тьєррі д'Енненекін
13

Імпортуйте весь вміст JQuery в глобальну область. Це вставляє $ у поточну область, що містить усі експортовані прив’язки з JQuery.

import * as $ from 'jquery';

Тепер $ належить об’єкту вікна.

— Іван Герц
джерело
1
це працювало для мене. Вгорі "імпортувати {jQuery як $} з 'jquery';" видає помилку, кажучи, що "jQuery" не знайдено.
— SpaceMonkey
12

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

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

— Юкулеле
джерело
1
Цей допоміг! Я, як правило, люблю спробувати основи перед використанням будь-якого IDE / DevEnv. Не використовуючи Node / NPM / Babble, я хотів зрозуміти імпорт та експорт ES6. Мені вдалося отримати базовий імпорт та експорт, але я боровся з включенням jquery. У мене був власний код, написаний як модуль, але я продовжував посилати jquery традиційним способом, використовуючи тег скрипту в html. Тож у мене з’явилися 2 теги сценарію, один з яких включає jquery, а інший для включення app.js. З вашою відповіддю я міг позбутися свого першого тегу сценарію jquery і використав проміжний jquery.module.js, як ви запропонували.
— sidnc86
9

Прийнята відповідь не працювала для мене.
Примітка: використовуючи зведений js не знаю, чи належить ця відповідь тут
після
npm i - зберегти 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',
};

замість ін'єкції зсуву, спробував 

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

Це спрацьовувало:
видалено плагіни для введення та додаток commonjs

import * as jQuery from 'jquery';

потім у custom.js

$(function () {
        console.log('Hello jQuery');
});
— Рітин
джерело
Схоже, namedExportsбільше немає в плагіні commonjs
— Nicolas Hoizey
7

Якщо це допомагає комусь, заяви про імпорт JavaScript піднімаються. Таким чином, якщо бібліотека має залежність (наприклад, завантажувальний) від 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

— craigmichaelmartin
джерело
6

користувачів веб-упаковки, додайте нижче до pluginsмасиву.

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];
— Мухаммад Реда
джерело
4
У чому полягає цей підхід? Тому що ви прив’язуєтесь до свого будівельного інструменту тут.
— Едуард Лопес
це єдиний спосіб, коли я працював. Я спробував, import {$, jQuery} from 'jquery';але ідентифікатор не працював, я вважаю, тому що він не визначений (імпортований) в інших модулях.
— Мухаммад Реда
2
Це найкраще рішення для користувачів webpack, оскільки jQuery має бути доступний у всьому світі у всіх файлах, без зайвих заяв про імпорт.
— Амір
1 
import {jQuery as $} from 'jquery';
— Farsheed
джерело
1
там написано, що jQuery не знайдено. Інша відповідь працювала "імпортувати * як $ з 'jquery';". Чи знаєте ви, чому це відбувається? Мій файл JS, куди я імпортую jquery, є частиною файлу Angular / Typescript
— SpaceMonkey,
1

Я не бачив цього точного синтаксису ще опублікованим, і він працював для мене в середовищі ES6 / Webpack:

import $ from "jquery";

Взято безпосередньо зі сторінки NPM jQuery . Сподіваюся, що це комусь допоможе.

— Стівен Шенк
джерело
1

Якщо ви не використовуєте жодних інструментів побудови JS / NPM, ви можете безпосередньо включити Jquery як: 

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

Ви можете пропустити імпорт (рядок 1), якщо ви вже включили jquery, використовуючи тег сценарію під головою.

— VNN456
джерело
Не знаю чому, але цей працював на мене, коли ніхто не робив цього. Будь-яке твердження про імпорт, окрім голого, import 'filepath/jquery.js'призвело до помилки щодо того, що модуль не експортує потрібну функцію, або $ не є функцією або просто SyntaxError при вигляді слова from.
— Галактичний кетчуп
0

Перш за все, встановіть і збережіть їх у 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

— cwtuan
джерело
0

Імпортувати jquery (я встановлений із 'npm install jquery@1.9.1')

import 'jquery/jquery.js';

Покладіть весь цей код, який залежить від jquery, всередині цього методу

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

або оголосити змінну $ після імпорту

var $ = window.$
— Йосеф
джерело
0

Я хотів використати 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)
— Іван Кастельянос
джерело
Івану Кастельяносу, вам слід розширити свій приклад, щоб краще зрозуміти, як його застосувати
— north.inhale
0

Ви можете імпортувати так

import("jquery").then((jQuery) => {
  window.$ = jQuery;
  window.jQuery = jQuery;
  import("bootstrap").then((_bs)=>{
    $(function() {});
  })
});
— SlingEr.
джерело
0

Мій стек проекту: ParcelJS + WordPress

WordPress отримав jQuery v1.12.4 сам, і я також імпортував jQuery v3 ^ як модуль для інших залежних модулів, а такожbootstrap/js/dist/collapse, наприклад ... На жаль, я не можу залишити лише одну версію jQuery через інші модульні залежності WordPress. І звичайно, між двома версіями jquery виникає конфлікт. Також майте на увазі, що для цього проекту у нас є два режими роботи Wordpress (Apache) / ParcelJS (NodeJS), які створюють все з невеликими труднощами. Тож для вирішення цього конфлікту було пошук, іноді проект проривався зліва, іноді з правого боку. Так ... Моє остаточне рішення (я сподіваюся, що так ...) таке:

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

Я ще не розумів, як себе, але цей метод працює. Помилки та конфлікти двох версій jQuery більше не виникають

— північ.інхале
джерело
0

Якщо ви використовуєте Webpack 4, відповідь - використовувати ProvidePlugin. Їх документація спеціально охоплює angular.js із випадком використання jquery :

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

Проблема полягає в тому, що при використанні importсинтаксису angular.js та jquery завжди будуть імпортовані, перш ніж у вас з'явиться можливість призначити jquery window.jQuery ( importзаяви завжди запускаються першими, незалежно від того, де вони знаходяться в коді!). Це означає, що кутовий завжди буде бачити window.jQuery як невизначений, поки ви не використовуєте ProvidePlugin.

— Мартін Конечний
джерело
0

Pika - це CDN, який піклується про надання модульних версій популярних пакетів

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

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

Skypack - це Pika, тому ви також можете використовувати: import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

— SamGoody
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.