Aurelia：使用来自 Raphael.js 的函数，这是一个遗留的第 3 方库

Question

我是网络开发的新手，因此，Aurelia 也是。我一直在浏览其他问题和论坛以尝试不同的想法，但没有找到解决方案。我想我可能遗漏了一些简单的东西，但我不确定我的问题是否出在我如何添加库、将它添加到模块中、捆绑它等方面。

我正在使用 Aurelia CLI 和 NPM。

在我的 test.js 中，我尝试添加以下内容，如 Raphael 文档所示：

let paper = new Raphael(document.getElementById('canvasArea'), 100, 100);
let rect = paper.rect(0, 0, 10, 10);

我的test.js是这样的：

import {inject} from 'aurelia-framework';
import * as raphael from 'raphael';
@inject(raphael)
export class Test {
    constructor() {
        this.raphael = raphael;
        console.log(raphael);
    }
    attached() {
        this.createCan();
    }

    createCan() {
         let paper = new Raphael(document.getElementById('canvasArea'), 100, 100);
         let rect = paper.rect(0, 0, 10, 10);
    }
}

我的test.html是这样的：

<template>
    <div id="canvasArea"></div>
</template>

我在浏览器控制台加载页面时的错误是：

Unhandled rejection ReferenceError: Raphael is not defined at Test.createCan...

raphael 的控制台日志是一个对象。

Object
    > _ISURL: /^url\(['"]?(.+?)['"]?\)$/i
    > _Paper: ()
    > _availableAnimAttrs: Object
    > _availableAttrs: Object
    > ...

以下是我尝试过但没有成功的各种方法：

没有注射
从 'raphael'
从 'raphael'
做this.raphael.Raphael(...)
做 raphael.Raphael(...)
使用构造函数（拉斐尔）{...
改用我的 index.html 页面上的脚本
在 aurelia.json 文件中预先添加 raphael 文件

要添加 Raphael.js，我做了：

npm install raphael --save

并将以下内容添加到我的 aurelia.json 文件中：

"dependencies" : [
    {
        "name": "raphael",
        "path": "../node_modules/raphael",
        "main": "raphael.min",
        "deps": ["eve-raphael"]
    }
]

任何帮助将不胜感激，例如可能的解决方案、提出此问题的更好方法、look/what 阅读的位置、实现我的最终目标的其他方式等。谢谢！

编辑 1.错误位置说明 2. 为 raphael 添加一些控制台日志

Answer 1

根据您分享的内容，在没有任何先验知识的情况下 raphael.js，您的问题可能与 aurelia.json 中的依赖项定义有关。由于您已将 eve-raphael 列为 raphael 的依赖项，因此您还需要将 eve-raphael 添加到 aurelia.json 文件中。

或者，您可以尝试删除 aurelia.json 中的 deps 行（以及前面的逗号），以查看它是否真的需要该依赖项。

如果这不是解决方案，能否请您 copy/paste 您在运行 au run --watch 时遇到的具体错误？

编辑：

如果这是遗留的第 3 方库，您很可能还可以删除 Test.js 中特定于 Aurelia 的实例化，如下所示：

import {inject} from 'aurelia-framework';
import 'raphael';
export class Test {
    constructor() {
    }
    attached() {
        this.createCan();
    }

    createCan() {
         let paper = Raphael(document.getElementById('canvasArea'), 100, 100);
         let rect = paper.rect(0, 0, 10, 10);
    }
}

Answer 2

解决方法是在 aurelia.json 中的 vendor-bundle 部分的 prepend 部分添加 Raphael.js。我以前试过这个，但我当时肯定也有其他错误，比如 new Raphael(...) 而不是 Raphael （感谢@LStarky）。

"prepend": [
    ...
    "node_modules/raphael/raphael.min.js",
    ...
]

在查找什么是遗留库时（感谢@LStarky），我找到了 Aurelia Documentation 中的 "A Very Stubborn Legacy Library"，它说明了有时库不能 "work with the module loading system"。我的假设是我的问题属于这一类，特别是因为遵循这个允许我使用第 3 方库。

Test.js 现在看起来像这样：

export class Test {
    constructor() {
    }
    attached() {
        this.createCan();
    }
    createCan() {
        let paper = Raphael(document.getElementById('canvasArea'), 100, 100);
        let rect = paper.rect(0, 0, 10, 10);
    }
}

Aurelia：使用来自 Raphael.js 的函数，这是一个遗留的第 3 方库

Aurelia: Using Functions from Raphael.js, a legacy 3rd party library

legacy

raphael

aurelia