Я читал различные статьи, включая эту , использую функции jquery в веб-части spfx , но я не могу заставить jQuery работать с моей веб-частью SPFx.
Моей первой попыткой было поместить загрузку в глобальную область:
public constructor() {
super();
SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
});
});
}
Несмотря на нахождение в конструкторе, приведенный выше код приводит к ошибке в моей функции рендеринга ( jQuery не определен ):
public render(): void {
this.domElement.innerHTML = /* etc...*/
const webpart: ContactFormSimpleWebPartWebPart = this;
// assign handlers
jQuery('#btn-submit-contact-form-simple').on('click', function() {
webpart.SubmitContactFormSimple();
});
// assign vars
this.Category = jQuery('#sel-category');
this.Message = jQuery('#txt-message');
this.ErrorContainer = jQuery('#div-contact-form-simple-errors');
}
Затем я попытался добавить наборы для версии 2 (которая, насколько я понимаю, является самой высокой версией, поддерживаемой SPFx):
npm install @ types / jquery @ 2.0.48 --save-dev
"externals": {
"jquery": {
"path": "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
"globalName": "jQuery"
}
},
Вышеуказанное приводит к многочисленным ошибкам компиляции, подобным следующему:
ReferenceError: jQuery не определен
Я даже пытался добавить его прямо в рендер, что не приводит к ошибкам, за исключением того, что ничего не происходит! Полученный HTML-код не отображается. "):
public render(): void {
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
this.domElement.innerHTML = /* etc...*/
const webpart: ContactFormSimpleWebPartWebPart = this;
// assign handlers
jQuery('#btn-submit-contact-form-simple').on('click', function() {
webpart.SubmitContactFormSimple();
});
// assign vars
this.Category = jQuery('#sel-category');
this.Message = jQuery('#txt-message');
this.ErrorContainer = jQuery('#div-contact-form-simple-errors');
});
});
}
Я даже пытался добавить его в init:
protected onInit(): Promise<void> {
SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
});
});
return Promise.resolve(undefined);
}
Что еще можно попробовать, чтобы иметь возможность использовать jQuery в моей веб-части SPFx?
Редактировать: Когда я пытаюсь import * as jQuery from 'jQuery', я получаю эту ошибку:
