在 Aurelia CLI 中使用 jQuery 插件（例如 jquery-highlight）

Question

我经常运行遇到问题试图让 jQuery 插件与 Aurelia CLI 一起工作。

示例：jQuery 突出显示 https://www.npmjs.com/package/jquery-highlight

在aurelia.json我有

{
            "name": "jquery-highlight",
            "path": "../node_modules/jquery-highlight",
            "main": "jquery.highlight",
            "deps": [
              "jquery"
            ]
          }

在我的代码中我有...

import * as $ from "jquery";
import {highlight} from "jquery-highlight";
...
$('#content').highlight('lorem');

但是我得到了错误

未捕获类型错误：$(...).highlight 不是函数

我也试过将 jquery-highlight 添加到我的 main.ts，并添加到 aurelia.json 的前置。感觉就像巫术一样让这些工作！

有什么想法吗？

Answer 1

几件事。

如果您已经在使用 cli，您可能还想利用它来帮助您完成这些操作。如果您还没有运行 npm install <package_name> --save，您可以使用 cli 安装包并更新 aurelia_project\aurelia.json 文件。执行命令au install <package_name>.

在您的问题中，不清楚您是否已将 jquery 作为依赖项添加到 aurelia_project\aurelia.json（与 [=20 的 deps 属性分开=]依赖）。

以下是我在新项目中使用它所采取的步骤：

au new au-jq-highlight
au install jquery-highlight
au include jquery（这将依赖添加到 aurelia_project\aurelia.json 文件，但不必单独安装，因为它与 jquery-highlight 一起安装，因为该包是依赖的在 jquery npm 包上）

app.html

<template>
  <div id="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi odio maxime adipisci obcaecati corrupti, debitis veniam reiciendis. Id distinctio aut voluptatem ipsum neque reprehenderit placeat. Laudantium modi reprehenderit dicta provident.</div>
</template>

app.ts

import * as $ from "jquery";
import "jquery-highlight";

export class App {
  public attached() {
    $('#content').highlight('lorem');
  }
}

为了不从头开始，只是修复你所拥有的，我认为你只需要做两件事： 1. 将您的 aurelia_project\aurelia.json 更新为：

"jquery-highlight",
"jquery"

而不是：

{
   "name": "jquery-highlight",
   "path": "../node_modules/jquery-highlight",
   "main": "jquery.highlight",
   "deps": [
     "jquery"
   ]
}

2。在您的代码中，将 import {highlight} from "jquery-highlight"; 更改为 import "jquery-highlight";

在 Aurelia CLI 中使用 jQuery 插件（例如 jquery-highlight）

Using jQuery plugins (e.g. jquery-highlight) in Aurelia CLI

jquery

aurelia