Question

我正在遵循官方的Aurelia教程来构建联系人列表应用程序。

我坚持“建立默认路线”的步骤，我开始真的很生气。

我添加了bootstrap和jquery的供应商依赖项，如教程中所示，但是当我启动页面时，渲染空白和控制台输出几个错误：

    Uncaught TypeError: h.load is not a function

   Unhandled rejection Error: Failed loading required CSS file: ../node_modules/bootstrap/css/bootstrap.css
at fixupCSSUrls (http://localhost:9000/scripts/vendor-bundle.js:23357:13)
at http://localhost:9000/scripts/vendor-bundle.js:23396:16

现在，我用Google搜索很多，发现有几个用户遇到了同样的问题，但每次修复都无法正常工作。我尝试了几个修复，检查拼写错误和错误（我只是教程的一半，我可以做多少打字错误???），重新启动au run --watch，甚至直接从教程页面复制粘贴代码（我讨厌这样做，因为这对我的学习没有帮助，但我很绝望）。没有，完全相同的错误继续启动，页面仍然是空白。我真的很害怕这个看似很小的愚蠢问题，比如完成官方教程。

完整来源here我故意包含所有文件，以准确显示我的源库的样子。

aurelia.json

{
  "name": "Contact Manager",
  "type": "project:application",
  "platform": {
    "id": "web",
    "displayName": "Web",
    "output": "scripts"
  },
  "transpiler": {
    "id": "babel",
    "displayName": "Babel",
    "fileExtension": ".js",
    "options": {
      "plugins": [
        "transform-es2015-modules-amd"
      ]
    },
    "source": "src/**/*.js"
  },
  "markupProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".html",
    "source": "src/**/*.html"
  },
  "cssProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".css",
    "source": "src/**/*.css"
  },
  "editor": {
    "id": "vscode",
    "displayName": "Visual Studio Code"
  },
  "unitTestRunner": {
    "id": "karma",
    "displayName": "Karma",
    "source": "test/unit/**/*.js"
  },
  "paths": {
    "root": "src",
    "resources": "src/resources",
    "elements": "src/resources/elements",
    "attributes": "src/resources/attributes",
    "valueConverters": "src/resources/value-converters",
    "bindingBehaviors": "src/resources/binding-behaviors"
  },
  "testFramework": {
    "id": "jasmine",
    "displayName": "Jasmine"
  },
  "build": {
    "targets": [
      {
        "id": "web",
        "displayName": "Web",
        "output": "scripts"
      }
    ],
    "loader": {
      "type": "require",
      "configTarget": "vendor-bundle.js",
      "includeBundleMetadataInConfig": "auto",
      "plugins": [
        {
          "name": "text",
          "extensions": [
            ".html",
            ".css"
          ],
          "stub": true
        }
      ]
    },
    "options": {
      "minify": "stage & prod",
      "sourcemaps": "dev & stage"
    },
    "bundles": [
      {
        "name": "app-bundle.js",
        "source": [
          "[**/*.js]",
          "**/*.{css,html}"
        ]
      },
      {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/bluebird/js/browser/bluebird.core.js",
          "scripts/require.js"
        ],
        "dependencies": [
          "aurelia-binding",
          "aurelia-bootstrapper",
          "aurelia-dependency-injection",
          "aurelia-event-aggregator",
          "aurelia-framework",
          "aurelia-history",
          "aurelia-history-browser",
          "aurelia-loader",
          "aurelia-loader-default",
          "aurelia-logging",
          "aurelia-logging-console",
          "aurelia-metadata",
          "aurelia-pal",
          "aurelia-pal-browser",
          "aurelia-path",
          "aurelia-polyfills",
          "aurelia-route-recognizer",
          "aurelia-router",
          "aurelia-task-queue",
          "aurelia-templating",
          "aurelia-templating-binding",
          {
            "name": "text",
            "path": "../scripts/text"
          },
          {
            "name": "aurelia-templating-resources",
            "path": "../node_modules/aurelia-templating-resources/dist/amd",
            "main": "aurelia-templating-resources"
          },
          {
            "name": "aurelia-templating-router",
            "path": "../node_modules/aurelia-templating-router/dist/amd",
            "main": "aurelia-templating-router"
          },
          {
            "name": "aurelia-testing",
            "path": "../node_modules/aurelia-testing/dist/amd",
            "main": "aurelia-testing",
            "env": "dev"
          },
          "jquery",
          {
            "name": "bootstrap",
            "path": "../node_modules/bootstrap/dist",
            "main": "js/bootstrap",
            "deps": ["jquery"],
            "exports": "$",
            "resources": [
              "css/bootstrap.css"
            ]
          }
        ]
      }
    ]
  }
}

app.js

import { Router, RouterConfiguration} from 'aurelia-router';

export class App {
  router: Router;

  configureRouter(config: RouterConfiguration, router: Router) {
    config.title = 'Contacts';
    config.map([
      { route: '', moduleId: 'no-selection', title: 'Select' },
      { route: 'contact/:id', muduleId: 'contact-detail', name:'contacts' }
    ]);

    this.router = router;
  }
}

和app.html

<template>
  <require from="../node_modules/bootstrap/css/bootstrap.css"></require>
  <require from="./styles.css"></require>

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <i class="fa fa-user"></i>
        <span>Contacts</span>
      </a>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-4">
        Contact List Placeholder
      </div>

      <router-view class="col-md-8"></router-view>
    </div>
  </div>
</template>

Answer 1

<require from="../node_modules/bootstrap/css/bootstrap.css"></require>

需要

<require from="bootstrap/css/bootstrap.css"></require>

您还在moduleId的{{1}}路线中错误contacts。你有app.js。

Answer 2

嗯，相信我，更好的你不在这里，即使是意大利人，你也会害怕我的诅咒...... 我真的不知道怎么可能，即使我重新开始并重写了整个该死的东西，我多次检查了所有内容......

无论如何，首先要感谢你。我觉得自己像个白痴。

我修复了模块的拼写错误，并按照建议更改了require语句。现在页面按预期呈现，但是控制台仍然显示一个错误，指出引导程序需要Jquery。我已经通过npm安装了jQuery，所以，我很困惑......

这是一个screenshot

我也尝试添加

<require from="node_modules/jquery/dist/jquery.js"></require>

但不起作用。

有什么想法吗？

为什么我必须删除＆＃34; ../ node_modules /＆＃34;来自require声明？它没有从node_module dir？

加载bootstrap

Answer 3

aurelia.json文件实际上是require.js配置文件。这两个信息应该足以知道要查看哪些文档，但基本上是这样的require.js依赖项：

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

的工作方式如下：资源是require'd作为模块名称+资源（资源需要扩展定义！），即。 <require from="bootstrap/css/bootstrap.min.css"></require>，而<require from="bootstrap"></require>需要javascript文件，即。只是需要上面定义的main文件的模块名称，或<require from="bootstrap/some_path_to_jsfile_without_ext"></require>，即。模块名称+文件的相对路径，要求相对于上面定义的path的文件。

免责声明：我是一名新的网络开发人员，刚刚开始使用Aurelia。

添加Bootstrap配置后，Aurelia官方联系人列表教程无法呈现

3 个答案: