Как включить JQuery в приложение Svelte / Sapper?

Есть много компонентов, которые все еще требуют JQuery, которые мне нужно использовать (к сожалению).

Как лучше всего это сделать в Svelte / Sapper? Должен ли я использовать импорт ES6, изменять свертку или какой подход лучше?

Например, мне нужно включить сводную таблицу, сетку, планировщик и т. Д. Из DevExpress или Kendo UI.

Я могу подключить JQuery глобально в файле template.html и заставить все работать, но я уверен, что это не лучший способ.


svelte
person SteveO    schedule 04.09.2019    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Включение его как <script> в template.html - это нормально. В качестве альтернативы сделайте

import jQuery from 'jquery';

в любых компонентах или модулях, которые его используют.

person Rich Harris    schedule 06.09.2019
comment
Добавление import $ из jquery; в компоненте svelte возникает следующая ошибка: префикс $ зарезервирован и не может использоваться для имен переменных и импорта src \ Pages \ Test.svelte - person AutoCiudad; 03.12.2019

arrow_upward
0
arrow_downward

window.$ зарезервирован в svelte, поэтому вы должны исправить свою библиотеку
, чтобы использовать jQuery в режиме без конфликтов, вроде

sed -E 's/(\W?)\$(\W)/\1jQuery\2/g' library.js >library.noconflict.js

заменить $( на jQuery( и $. на jQuery.

(\W?) соответствует необязательному символу, не являющемуся словом (пробелы, скобки),
во избежание замены func_$( на func_jQuery(

\$(\W) соответствует $( или $., или или $), или $ , или ....

в моем случае мне пришлось патчить goldenlayout.js версию 1.5.9, например

sed -E 's/(\W?)\$(\W)/\1jQuery\2/g' \
node_modules/golden-layout/dist/goldenlayout.js \
>src/goldenlayout-1.5.9.noconflict.js

также пришлось заменить

(function($){
// ....
        define( [ 'jquery' ], function( jquery ) {
            $ = jquery;
            return lm.LayoutManager;
        } ); // jshint ignore:line
// ....
} );})(window.$);

с участием

(function(){
// ....
        define( [], function() {
            return lm.LayoutManager;
        } ); // jshint ignore:line
// ....
} );})();

перед запуском sed, чтобы избежать затенения переменных
в этом случае локальное jQuery против глобального window.jQuery

sed может заменить слишком много (содержимое строки)
, поэтому в идеале выполните преобразование AST, например

// tools/patch-goldenlayout.js

// pnpm i -D acorn estree-walker magic-string

const input_file = "../node_modules/golden-layout/dist/goldenlayout.js";
const output_file = "../src/goldenlayout.noconflict.js";

const id_search = '$';
const id_replace = 'jQuery';

const acorn_parse = require("acorn").parse;
const estree_walk = require("estree-walker").walk;
const magicString = require("magic-string");
const fs = require("fs");

const code_old = fs.readFileSync(input_file, 'utf8');
let code = new magicString(code_old);

const ast = acorn_parse( code_old, {
    sourceType: 'module', ecmaVersion: 11 /* year 2020 */ });

estree_walk( ast, {
  enter: function ( node, parent, prop, index ) {
    if (node.type == 'Identifier' && node.name == id_search) {
      code.overwrite(node.start, node.end, id_replace);
    }
}});

fs.writeFileSync(output_file, code.toString());
person Mila Nautikus    schedule 22.08.2020