We are using wallaby.js in an Angular 4 project with typescript and there are some parts using jQuery. Wallaby.js is throwing a ReferenceError:
ReferenceError: $ is not defined
Any ideas how to fix this?
Some Sample code:
import { Injectable } from '@angular/core';
declare var $: any;
@Injectable({
providedIn: 'root'
})
export class FroalaService {
constructor() { }
public initFroala(): void {
$.FroalaEditor.DefineIcon('insertnonbreakingspace', {NAME: 'arrows-h'});
$.FroalaEditor.RegisterCommand('insertnonbreakingspace', {
title: 'Non-Breaking Space',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.insert('<span style="white-space: nowrap;"> </span>');
}
});
$.FroalaEditor.RegisterShortcut(32, 'insertnonbreakingspace', null, 'Space', false, false);
}
}
The solution for a basic jQuery implemention is to add jQuery to externals in wallaby.js:
var webpackPostprocessor = wallabyWebpack({
entryPatterns: [
'src/wallabyTest.js',
'src/**/*spec.js'
],
module: {
rules: [
...
]
},
resolve: {
extensions: ['.js', '.ts'],
modules: [
...
]
},
node: {
...
},
externals: { jQuery: "jQuery" }
});
...and to add jquery.js to files:
return {
files: [
{pattern: "node_modules/jquery/dist/jquery.js", instrument: false},
{pattern: 'src/**/*.+(ts|css|less|scss|sass|styl|html|json|svg)', load: false},
{pattern: 'src/**/*.d.ts', ignore: true},
{pattern: 'src/**/*spec.ts', ignore: true}
],
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.