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

我在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进入项目目录.

将上面列出的两个条目添加到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版本55.0.2883.87(64位)和Mozilla Firefox 55.0.3中描述的错误.我还没有机会在其他系统上测试它.

EDIT3：

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

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

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

解决方法:

您缺少Bootstrap 4.0.0-beta的popper.js依赖项.
为了让Aurelia接受这个补充

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

在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

它应该工作:)

标签：javascript,bootstrap-4,aurelia
来源： https://codeday.me/bug/20190522/1153737.html