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

129

Я пишу новое приложение, используя 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 , плагин для просмотра. Я вдохновляюсь от oncletom gist

Эдуард Лопес

Я проверю это, спасибо!

CodingIntrigue

@RGraham - синтаксис выглядит странно, но использование "require" для файлов css / sass поощряется такими инструментами сборки, как webpack + babel. например. требуется ( "../ node_modules / самозагрузки / DIST / CSS / bootstrap.min.css");

arcseldon

130

index.js

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

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

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

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

Наконец, вам нужно предоставить его другим скриптам, используя расширение window.$ = $.

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

Эдуард Лопес
источник

6

Не уверен, что кто-нибудь еще здесь, но не могли бы вы объяснить необходимость window.$ = $. Я не понимаю, зачем это нужно. Разве другие скрипты не будут автоматически объединены в один jsскрипт, когда browserify творит чудеса?

qarthandso

13

Почему бы просто не иметь import {$,jQuery} from 'jquery';? Почему так много импорта?

Джеки

4

Как найти точное имя класса имя, то есть jQuery?

Авинаш Радж

13

Я либо получаю, Module '"jquery"' has no exported member 'jQuery'либо Module '"jquery"' has no default exportчто мне не хватает, пожалуйста?

daslicht

4

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

pmont 03

54

На основе решения Эдуара Лопеса, но в двух строках:

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

ha7ilm
источник

2

Это сработало для меня, тогда как принятый подход к ответам не ... Я использовал почти то же самое: import $ from 'jquery'; window.jQuery = $; окно. $ = $;

arcseldon 05

3

одна строка:window.$ = window.jQuery = require('jquery');

Набиль Баадилла

2

@NabilBaadillah require(CommonJS) не является import(модуль ES), и однострочный вариант не представляется возможным с import. (Кого-то волнует?)

Николя Ле Тьерри д'Аннекен

14

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

import * as $ from 'jquery';

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

Иван Герц
источник

1

это сработало для меня. Вверху "импортировать {jQuery as $} из 'jquery';" выдает сообщение об ошибке "jQuery" не найден.

SpaceMonkey

13

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

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

Yukulélé
источник

1

Это помогло! Обычно я люблю опробовать основы перед использованием любой IDE / DevEnv. Не используя Node / NPM / Babble, я хотел понять импорт и экспорт ES6. Мне удалось получить базовую работу импорта и экспорта, но я боролся с включением jquery. У меня был собственный код, написанный как модуль, но я продолжал ссылаться на jquery традиционным способом, используя тег script в html. В итоге у меня появилось 2 тега сценария, один для включения jquery, а другой для включения app.js. С вашим ответом я мог бы избавиться от своего первого тега jquery script и использовать промежуточный jquery.module.js, как вы предложили.

sidnc86

9

Принятый ответ не сработал для меня,
примечание: использование 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
или
Module ... 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",
  },

Это сработало:
удалены плагины rollup inject и commonjs

import * as jQuery from 'jquery';

затем в custom.js

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

РИТИН
источник

Похоже, что namedExportsв плагине commonjs больше не существует

Николас Хойзи

7

Если это кому-то поможет, поднимаются операторы импорта 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;

Например, https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js

craigmichaelmartin
источник

6

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

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

Мухаммад Реда
источник

4

В чем преимущество такого подхода? Потому что здесь вы привязываете себя к своему строительному инструменту.

Эдуард Лопес

это единственный способ заставить его работать. Я пробовал, import {$, jQuery} from 'jquery';но id не работал, я считаю, потому что он не определен (импортирован) в других модулях.

Мухаммад Реда

2

Это лучшее решение для пользователей веб-пакетов, потому что jQuery должен быть доступен глобально во всех файлах без повторяющихся операторов импорта.

Amir

1

import {jQuery as $} from 'jquery';

Farsheed
источник

1

он говорит, что jQuery не найден. Другой ответ работал «import * as $ from 'jquery';». Вы знаете, почему это происходит? Мой файл JS, в который я импортирую jquery, является частью файла Angular /

Typescript

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.$

Yoseph
источник

0

Я хотел использовать уже построенный jQuery (от 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() {});
  })
});

Стропальщик.
источник

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 больше не возникают

north.inhale
источник

0

Если вы используете Webpack 4, ответ - использовать расширение ProvidePlugin. Их документация специально охватывает angular.js с вариантом использования jquery :

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

Проблема в том, что при использовании importсинтаксиса angular.js и jquery всегда будут импортированы, прежде чем у вас будет возможность назначить jquery для window.jQuery ( importоператоры всегда будут запускаться первыми, независимо от того, где они находятся в коде!). Это означает, что angular всегда будет видеть window.jQuery как undefined, пока вы не используете 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
источник

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

index.js

index.html

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

package.json

Вопрос

Ответы:

index.js