Связанный Webextension не видит JQuery - PullRequest
Новая
       30

Связанный Webextension не видит JQuery

0 голосов
/ 25 октября 2018

Я создаю веб-расширение для Chrome, следующий код приводит к ошибке: 

$(function () {
  $('[data-toggle="popover"]').popover();
  // ...
});

Chrome жалуется, что:

Uncaught TypeError: jquery_1.default (...). popover не является функцией

Похоже, что загрузчик просто недоступен.Я знаю, что важен порядок импорта для сценариев: Расширение Chrome "$ не определено" ошибка

Поэтому я убедился, что загрузчик включен перед моим кодом: 

"content_scripts": [
    {
        "js": [
            "assets/jquery/dist/jquery.min.js",
            "assets/popper.js/dist/popper.min.js",
            "assets/bootstrap/dist/js/bootstrap.min.js",
            "content/index.js"
        ],
        "css": [
            "assets/css/extra.css",
            "assets/bootstrap/dist/css/bootstrap.min.css"
        ]
    }
],

Эти пути скриптов действительны.

РЕДАКТИРОВАТЬ:

Извините, я перепутал документацию об этой ошибке.Видимо, это происходит только тогда, когда я использую пакет, например, посылку.Я тестировал только с посылкой, но я полагаю, что эта проблема возникнет с любым менеджером комплектации, таким как webpack или browserify.

Ответы [ 2 ]

0 голосов
/ 01 ноября 2018

При обработке зависимостей с помощью пакета, такого как parcel, jQuery выполняется в среде с модулями CommonJS.

При такой настройке jQuery не добавляет себя в глобальный объект window.Тем не менее, bootstrap ожидает, что функция $ и jQuery на window.

Решение состоит в том, чтобы добавить его вручную, ниже приведен машинописный код.В JS вам не нужен бросок на any

import $ from "jquery";
(<any>window).jQuery=$;
(<any>window).$=$;
import "bootstrap";
0 голосов
/ 25 октября 2018

У меня были те же проблемы с использованием Bootstrap 4, он работал нормально на Bootstrap v.3.3.7, но я не мог заставить его работать, в конце концов, однако, я сделал.Вот что я сделал:

Порядок CDN: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

пример функции: 

$(function () {
    $('[data-toggle="popover"]').popover()
})

пример HTML: 

<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Bottom</a>

Это можетстоит убедиться, что у вас есть все последние версии Bootstrap / jQuery / Popper и т. д., и расположите их в том же порядке, как указано выше: 

bootstrap.css
jquery-3.3.1-slim.min.js
popper.js
bootstrap.min.js

Надеюсь, это поможет - дайте мне знать, если это не такт

...