импортировать файл javascipt jquery в файл реакции

Question

Я скачал шаблон html из inte rnet и хочу использовать его в моем приложении-реактиве

вот сайт, который я использовал -> https://html5up.net/dimension

каталог включает css и js файл

, но когда я напрямую импортирую файл js, как этот

import './assets/js/main.js'

, появляется ошибка

Failed to compile.

./assets/js/util.js
 Line 10:4:   '$a' is not defined                                                    no-undef
 Line 10:4:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
 Line 11:4:   'b' is not defined                                                     no-undef
 Line 13:3:   '$a' is not defined                                                    no-undef
 Line 20:4:   'b' is not defined                                                     no-undef
 Line 33:10:  'b' is not defined                                                     no-undef
 Line 587:4:  'jQuery' is not defined                                                no-undef

Поиск по ключевым словам, чтобы узнать больше о каждой ошибке.

Сначала я подумал, что это jquery проблема

, поэтому я загружаю jquery с npm

npm i jquery

и введите следующую строку вверху js file

import $ from 'jquery'

, но проблема все еще существует

есть ли методы, которые я могу импортировать jquery файл в ответ?

часть кода в util. js

(function($) {

/**
 * Generate an indented list of links from a nav. Meant for use with panel().
 * @return {jQuery} jQuery object.
 */
$.fn.navList = function() {

    var $this = $(this);
        $a = $this.find('a'),
        b = [];

    $a.each(function() {

        var $this = $(this),
            indent = Math.max(0, $this.parents('li').length - 1),
            href = $this.attr('href'),
            target = $this.attr('target');

        b.push(
            '<a ' +
                'class="link depth-' + indent + '"' +
                ( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
                ( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
            '>' +
                '<span class="indent-' + indent + '"></span>' +
                $this.text() +
            '</a>'
        );

    });

    return b.join('');

};
})(jQuery);

Answer 1

Сводка сначала: этот утилит. js не прошел eslint, потому что он использует устаревший синтаксис.

давайте посмотрим, что именно в утилит. js:

// line 9-11:
var $this = $(this);
$a = $this.find('a'),
b = [];

Как видите, $a был назначен, но не объявлен. это невыносимо для эслинт. так сказано: '$a' is not defined.

также, строка 10 заканчивается ,, но ожидается ;.

затем в строке 11 был назначен b, но также объявлено net.

другие проблемы такие же, как и выше.

Answer 2

попробовать import $ from 'jquery' in ./assets/js/util.js