Question

我有基于aurelia navigation skeleton-typescript模板（https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript）的简单Aurelia应用程序，我试图让它接受来自Creative Tim Material Dashboard（https://github.com/creativetimofficial/material-dashboard）的materia-dashboard.js文件没有运气。

如果我在index.html中引用它，则不会接受lib，因为加载时会出现错误：

Uncaught ReferenceError: $ is not defined
    at material-dashboard.js:38
    at material-dashboard.js:46

我猜这意味着该文件依赖于未及时加载的JQuery。

我也尝试将此添加到我的config.js

"material-dashboard:src/material-dashboard": {
  "jquery": "npm:jquery@2.2.4"
},

只是将其直接指向其来源以及bundles.js

"dist/aurelia": {
    "includes" : [ ..., "material-dashboard", ...]
}

并引用它是main.js，如bootstrap

import 'material-bootstrap';

但这只会引发另一个错误

system.src.js:1041
GET http://localhost:9000/dist/material-dashboard.js 404 (Not Found)
    W @ system.src.js:1041
    (anonymous) @ system.src.js:1777
    e._execute @ bluebird.min.js:31
    i._resolveFromExecutor @ bluebird.min.js:32
    i @ bluebird.min.js:32
    (anonymous) @ system.src.js:1776
    (anonymous) @ system.src.js:2801
    (anonymous) @ system.src.js:3379
    (anonymous) @ system.src.js:3711
    (anonymous) @ system.src.js:4103
    (anonymous) @ system.src.js:4568
    (anonymous) @ system.src.js:4837
    (anonymous) @ system.src.js:408
    r @ bluebird.min.js:33
    i._settlePromiseFromHandler @ bluebird.min.js:32
    i._settlePromise @ bluebird.min.js:32
    i._settlePromise0 @ bluebird.min.js:32
    i._settlePromises @ bluebird.min.js:32
    r._drainQueue @ bluebird.min.js:31
    r._drainQueues @ bluebird.min.js:31
    drainQueues @ bluebird.min.js:31

bluebird.min.js:33 
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:9000/dist/material-dashboard.js
    Error: XHR error (404 Not Found) loading http://localhost:9000/dist/material-dashboard.js
    Error loading http://localhost:9000/dist/material-dashboard.js as "material-dashboard" from http://localhost:9000/dist/main.js

知道如何解决/理解这个吗？

Answer 1

在aurelia文档中，您可以找到bootstrap如何使用jquery，在aurelia.json中为bootstrap添加以下内容：

"dependencies": [
  {
    "name":"jquery",
    "path":"../node_modules/jquery/dist",
    "main":"jquery.min",
    "export": "$"
  },
  {
      "name": "bootstrap",
      "path": "../node_modules/bootstrap/dist",
      "main": "js/bootstrap.min",
      "deps": ["jquery"],
      "resources": [
        "css/bootstrap.css"
      ]
  }

通知特别是“出口”：“$”和“deps”：[“jquery”]。我想要实现你需要类似的东西

我希望这会有所帮助。

Answer 2

这就是我开始工作的方式：

config.js

"material": "/assets/js/material.min.js",
"material-dashboard": "/assets/js/material-dashboard.js"

bundles.js

"dist/aurelia": {
    "includes" : [ ...,"material", "material-dashboard", ...]
}

main.js

import 'material';
import 'material-bootstrap';

最终工作gulp watch

如何将第三方JQuery'js'文件添加到aurelia typescript导航框架中

2 个答案: