Bootstrap v4 runtime/load Aurelia 中的错误

Question

我的 aurelia.json 文件中有以下内容，以及您通常会找到的其他内容。我直接从参考实现中复制了它，因此正如您所期望的那样，它工作正常。

{
  'build': {
    'bundles': [
      'name': 'vendor-bundle.js'
      'dependencies': [
        "jquery",
        {
          "name": "bootstrap",
          "path": "../node_modules/bootstrap/dist",
          "main": "js/bootstrap.min",
          "deps": ["jquery"],
          "exports": "$",
          "resources": [
            "css/bootstrap.css"
          ]
        }
      ]
    ]
  }
}

但是，我正在尝试迁移到 Bootstrap 4，但它似乎不起作用。为了更新包，我尝试将 build.bundles.dependencies[].path 更改为 ../jspm_packages/github/twbs/bootstrap@4.0.0-beta 以及 ../node_modules/bootstrap-v4-dev/dist，但它不会更改错误代码或减少错误清单。我还尝试将 v4 文件复制到 v3 的 dist 文件夹中，这也会导致同样的问题。

构建总是干净的；错误发生在运行时间：

DEBUG [templating] importing resources for app.html
Uncaught TypeError: plugin.load is not a function
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css

编辑：

感谢 Ashley Grant 的回答，我已经通过 NPM 更新了 Bootstrap，避免了对 aurelia.json 的任何更改。错误保持不变，如果不是因为其他人使用相同的工具链成功执行此迁移而没有错误，这似乎表明存在错误。

编辑 2：

我已经创建了重现错误的步骤：

$ au new
name  # can be any valid value
2     # Selects TypeScript as the language
1     # Create project structure
1     # Install dependencies

cd进入项目目录

将上面列出的两个条目添加到 aurelia_project/aurelia.json

中的 build.bundles[1].dependencies

$ npm install jquery --save
$ npm install bootstrap@^4.0.0-beta --save

将 src/app.html 更改为以下内容：

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

最后，执行以下任一操作并浏览到提供的URL。

$ au run

或

$ au build
$ serve

这会在我的 Arch Linux 系统上产生 Google Chrome Version 55.0.2883.87 (64-bit) 和 Mozilla Firefox 55.0.3 中描述的错误。我还没有机会在其他系统上测试它。

编辑 3：

感谢@vidriduch，一切正常。但是，如果您查看控制台，您会发现以下内容：

Uncaught SyntaxError: Unexpected token export
vendor-bundle.js:3927Uncaught Error: Mismatched anonymous define() module: [entirety of vendor-bundle.js printed here]

这是在调试模式下加载页面时最先出现的两条消息，但没有出现其他错误。

Answer 1

您的 aurelia.json 配置正确。我猜你永远不会运行 npm install bootstrap@^4.0.0-beta --save 因为你提到将文件复制到版本控制的 node_modules 文件夹中，并且 NPM 不像 JSPM 那样使用版本控制的文件夹。

所以运行 npm install bootstrap@^4.0.0-beta --save 事情应该开始起作用了。我的一个客户的应用程序中有你的确切配置。

Answer 2

您缺少 popper.js 对 Bootstrap 4.0.0-beta 的依赖。为了让 Aurelia 接受这个添加

 "node_modules/popper.js/dist/umd/popper.js"

在 prepend aurelia.json 的顶部（根据@hxtk 的评论）（假设你是使用 RequireJS，否则请查看 Bootstrap https://getbootstrap.com/docs/4.0/getting-started/webpack/)

的 webpack 依赖链接

顺便提一下，您需要安装的popper.js版本是1.11.0（https://github.com/twbs/bootstrap/issues/23381），所以

npm install popper.js@1.11.0

或

yarn add popper.js@1.11.0

它应该可以工作:)

Bootstrap v4 runtime/load Aurelia 中的错误

Bootstrap v4 runtime/load error in Aurelia

javascript

aurelia

bootstrap-4