时间戳

首页 > 解决方案 > 带有 jQ​​uery 的 wallaby.js

jquery - 带有 jQ​​uery 的 wallaby.js

问题描述

我们在一个带有打字稿的 Angular 4 项目中使用 wallaby.js，并且有一些部分使用了 jQuery。Wallaby.js 抛出一个 ReferenceError：

​​ReferenceError: $ is not defined​​

任何想法如何解决这一问题？

一些示例代码：

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);
  }
}

标签： jqueryangulartypescriptwallaby.js

解决方案

基本 jQuery 实现的解决方案是将 jQuery 添加到 wallaby.js 中的外部：

var webpackPostprocessor = wallabyWebpack({
    entryPatterns: [
      'src/wallabyTest.js',
      'src/**/*spec.js'
    ],

    module: {
      rules: [
        ...
      ]
    },

    resolve: {
      extensions: ['.js', '.ts'],
      modules: [
       ...
      ]
    },
    node: {
      ...
    },
    externals: { jQuery: "jQuery" }
  });

...并将 jquery.js 添加到文件中：

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}
    ],
    ...

推荐阅读