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>

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

未处理拒绝ReferenceError：Raphael未在Test.createCan ...
中定义

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

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

我尝试过的一些方法没有成功，如下：

没有注射
从'raphael'
从'raphael'
做到这一点。拉斐尔（...）
做raphael.Raphael（...）
使用构造函数（raphael）{...
在index.html页面上使用脚本
将raphael文件添加到aurelia.json文件中

要添加Raphael.js，我做了：

npm install raphael --save

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

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

非常感谢任何帮助，例如可能的解决方案，提出问题的更好方法，查看/阅读内容，实现我的最终目标的其他方式等等。谢谢！

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

Answer 1

解决方案是在Raphael.js的{{1}}部分中为prepend添加vendor-bundle。我之前尝试过这个，但我当时也遇到了其他错误，例如aurelia.json而不只是new Raphael(...)（感谢@LStarky）。

Raphael

在查看遗留图书馆的时候（感谢@LStarky），我进入了＃34;非常顽固的遗产图书馆＆＃34;在Aurelia Documentation中，它说明了图书馆有时可以使用模块加载系统＆＃34;。我的假设是我的问题属于这一类，特别是因为接下来允许我使用第三方库。

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

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

Answer 2

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

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

如果这不是解决方案，您是否可以复制/粘贴运行au run --watch时遇到的具体错误？

修改

如果这是传统的第三方库，您也很可能会删除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); } }

Aurelia：使用Raphael.js的功能，这是一个传统的第三方库

2 个答案: