奥里利亚：从Raphael.js，传统第三方库

Question

使用功能我新的Web开发，因此，Aurelia路上也是如此。我一直在通过其他问题和论坛来尝试不同的想法，但还没有找到解决方案。我想我可能会错过一些简单的东西，但我不确定我的问题在于如何添加库，将它添加到模块中，捆绑它等。

我正在使用Aurelia CLI和NPM 。

在我test.js，我想补充以下，拉斐尔文档中显示：

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...

控制台日志拉斐尔是一个对象。

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

一些我没有成功尝试了各种方法有以下几种：

• 没有从“拉斐尔”
• 进口拉斐尔从“拉斐尔做一个注入
• 进口{拉斐尔} '
• do this.raphael.Raphael（...）
• do raphael.Raphael（...）
采用0
• 构造（拉斐尔）{...
• 使用脚本我的index.html页面上，而不是
• 前面加上拉斐尔文件中的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.添加一些控制台日志的基于你分享的内容拉斐尔

Answer 1

的解决方案是增加Raphael.js在prepend部分为aurelia.json的vendor-bundle。我以前曾尝试这一点，但我一定是在那个时候太其他错误，比如new Raphael(...)，而不是仅仅Raphael（感谢@LStarky）。

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

在查找什么传统图书馆是（感谢@LStarky），我在Aurelia Documentation到了“一个非常顽固的传统图书馆”，其中规定了如何有时候库不能“与模块加载工作系统”。我的假设是我的问题属于这个类别，特别是因为遵循这个允许我使用第三方库。

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

Answer 2

，并没有raphael.js的任何先验知识，你的问题可能与aurelia.json中的依赖关系定义有关。既然你已经列出eve-raphael为raphael依赖，你需要还可以添加eve-raphael您aurelia.json文件。

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

如果这不是解决办法，请您复制/粘贴，当你运行au run --watch你得到具体的错误？

编辑：

如果这是一个旧的第三方库，你也可以很可能删除奥里利亚特定实例中Test.js，像这样：

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