Lỗi Bootstrap 4 "Trình đơn thả xuống Bootstrap yêu cầu Popper.js", với Aurelia CLI và Require.js

Question

Tôi đang gặp sự cố khi cấu hình Bootstrap 4 beta trong ứng dụng Aurelia CLI (v0.31.1) với requirejs và sử dụng TypeScript. Sau khi đã thử một số biến thể cấu hình, tôi tiếp tục gặp lỗi giao diện điều khiển sau:

Uncaught Error: Bootstrap dropdown require Popper.js

Đây là các bước để tạo lại. Đầu tiên, cài đặt các gói:

$ npm install --save jquery bootstrap@4.0.0-beta popper.js 

Tiếp theo, tôi đã cấu hình aurelia.json:

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

Lưu ý trong cấu hình trên rằng:

• popper.js được đăng ký trước khi bootstrap
• mô-đun UMD được sử dụng
• popper.js được thiết lập như một sự phụ thuộc cho bootstrap, bên cạnh jquery

Cuối cùng, trong app.ts tôi:

import 'bootstrap'; 

Với cấu hình này, xây dựng sử dụng au build hoạt động tốt. Nhưng khi chạy, sử dụng au run --watch tôi nhận được giao diện điều khiển lỗi sau đây:

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) (defaults.js:19)
Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) (bootstrap.min.js:6)
... a bit further on:
Uncaught TypeError: plugin.load is not a function at Module. (defaults.js:19)

Thật không may, các tài liệu Bootstrap 4 chỉ đề cập đến instructions on webpack. Vì vậy, tìm kiếm trên cả hai của Aurelia Gitter.im channel và trên StackOverflow. Tôi không thể tìm thấy các mẫu liên quan đến Aurelia CLI với Require.js. Cuối cùng, số truy cập của Google chỉ hiển thị các ví dụ về cách nhúng các phiên bản alpha (dựa trên 'chia sẻ kết nối' thay vì 'popper').

câu hỏi tương tự trên SO, trong đó có lỗi tương tự nhưng không được áp dụng với tình hình của tôi:

• Bootstrap 4 Beta importing Popper.js with Webpack 3.x throws Popper is not a constructor
• Angular 4 Bootstrap dropdown require Popper.js
• And several more...

Vì vậy, câu hỏi của tôi: làm thế nào thế nào tôi có thể cấu hình Bootstrap 4 với Popper.js trong một ứng dụng Aurelia CLI (sử dụng Require.js, không phải Webpack)?

Cảm ơn.

Answer 1

Popper đã thay thế Tether trong phiên bản beta.

Vì vậy, bạn sẽ cần phải hoán đổi tether với popper (hoặc chỉ thêm nó nếu bạn chưa bao giờ có alpha) vào phần prepend của tệp aurelia.json của bạn.(Hãy chắc chắn rằng bạn liên kết đến phiên bản UMD nhìn thấy dưới đây)

"prepend": [ 
    ... 
      "node_modules/jquery/dist/jquery.js", 
      "node_modules/popper.js/dist/umd/popper.min.js", 
    ... 
    ] 

Bạn cũng sẽ cần những bó như mong đợi, một cái gì đó như thế này:

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

= Phụ Lục =

Không giống như tether, popper không cần phải được prepended nó có vẻ. Vì vậy, bạn có thể bao gồm nó giống như bất kỳ phụ thuộc khác với

{ 
    "name": "popper.js", 
    "path": "../node_modules/popper.js/dist/umd", 
    "main": "popper.min" 
}, 

Answer 2

tôi gỡ bỏ cài đặt popper.js và sử dụng phiên bản được xây dựng vào BS4 bằng cách sử dụng js/bootstrap.bundle.min thay vì js/bootstrap.min

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

Answer 3

Sử dụng phiên bản đóng gói của BS4 làm việc cho tôi như sau: -

Xóa popper npm uninstall popper.js

Update để BS4 hay muộn npm install bootstrap --save

Hãy chắc chắn rằng jquery được cài đặt npm install bootstrap --save

Chỉnh sửa '.angular-cli.json' để bao gồm jquery và BS4 kèm

"scripts": [ 
    "../node_modules/jquery/dist/jquery.slim.min.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" 
    ], 

Answer 4

như của bootstrap thức 4.0 dưới đây là các conf làm việc cho bootstrap với popper

//file; aurelia_project/aurelia.json 
"dependencies": [ 
    ... 
    ... // other dependencies 
    ... 

    "text", 
    "jquery", 
    { 
    "name": "popper.js", 
    "path": "../node_modules/popper.js/dist/umd", 
    "main": "popper.min" 
    }, 
    { 
    "name": "bootstrap", 
    "path": "../node_modules/bootstrap/dist", 
    "main": "js/bootstrap.min", 
    "deps": ["jquery"], 
    "exports": "$", 
    "resources": [ 
     "css/bootstrap.css" 
    ] 
    }, 
... 
... // remaining dependencies 
... 
], 

Điều này làm việc với aurelia mới nhất & khởi động bẫy (từ năm 2018 đến tháng 2) mà không sử dụng phương thức prepend