Aurelia中的Bootstrap v4运行时/加载错误

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.错误保持不变,这似乎表明存在一个错误,因为其他人没有使用相同的工具链成功执行此迁移而没有错误.

EDIT2:

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

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

cd 进入项目目录.

添加上面列出的两个条目build.bundles[1].dependencies中aurelia_project/aurelia.json

$ 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

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

EDIT3:

感谢@vidriduch,一切似乎都在起作用.但是,如果您查看控制台,则会发现以下内容:

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

当页面在调试模式下加载时,这是第一个消息,但不会出现其他错误.

Answer 1

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

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

在aurelia.json的前置部分的顶部（根据 @hxtk 的评论）（假设您使用的是 RequireJS，否则请查看 Bootstrap 的 Webpack 依赖项链接https://getbootstrap.com/docs/4.0/getting-开始/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

它应该可以工作:)