Bootstrap 4 Betapack Popper.js Webpack ile 3.x atar Popper bir kurucu değil

Question

Bootstrap 4 Beta çıktı ... yey! Ancak Tether, araç ipucu (ve diğer özellikler) için Popper.js ile değiştirilmiştir. Gittim ve benim webpack.config.js (tüm yapılandırma here görülebilir) güncellendi,

Bootstrap dropdown require Popper.js 

yeterince kolay görünüyor ve Bootstrap sonra çalışmaya başladı: Ben Popper.js değişiklikle ilgili bana tavsiye etmek yeterince hızlı konsolda atılmış bir hata gördüm (benim yaptığım tek değişiklik Popper'la Tether değiştirmekti):

plugins: [ 
new ProvidePlugin({ 
    'Promise': 'bluebird', 
    '$': 'jquery', 
    'jQuery': 'jquery', 
    'window.jQuery': 'jquery', 
    'window.$': 'jquery', 
    Popper: 'popper.js' 
}), 

Ben de main.ts dosyasında import 'bootstrap' yaptı.

Ben şimdi başka bir sorun (Ben Tether ile yoktu ki), yeni bir konsolda hata atılır var Ancak:

Uncaught TypeError: Popper is not a constructor 

Chrome'da hata ayıklamak çalışırsanız, ben Popper olarak yüklenen var Aşağıdaki yazdırma ekranından görebileceğiniz gibi bir nesne (Bootstrap'ın şikayet etmeyi bırakması). Son olarak tüm kodlarımı dahil etmek için sonuncu. Öyle sonra en iyi buysa ben doğru Popper içe yokmuş gibi

import {inject, customAttribute} from 'aurelia-framework'; 
import * as $ from 'jquery'; 

@customAttribute('bootstrap-tooltip') 
@inject(Element) 
export class BootstrapTooltip { 
    element: HTMLElement; 

    constructor(element: HTMLElement) { 
    this.element = element; 
    } 

    bind() { 
    $(this.element).tooltip(); 
    } 

    unbind() { 
    $(this.element).tooltip('dispose'); 
    } 
} 

görünüyor (önceki Bootstrap alfa 6 ve Tether ile çalışmak için kullanılır) Aurelia ve TypeScript ile inşa basit bir özel öğe ile Bootstrap araç ipucu kullanmak Webpack 3.x ile bunu başarma yolu?

Answer 1

Bootstrap 4 documentation gezinirken. Aslında doğru şekilde nasıl kurulacağını açıklayan Webpack hakkında bir bölüm buldum.

plugins: [ 
    // ... 
    new webpack.ProvidePlugin({ 
    $: 'jquery', 
    jQuery: 'jquery', 
    'window.jQuery': 'jquery', 
    Popper: ['popper.js', 'default'] 
    }) 
    // ... 
] 

ve en main.ts

import 'bootstrap'; 

ve voilà kendisine import da unutmayalım: Bootstrap - installing with Webpack belgelerine ardından cevap basitçe aşağıdaki webpack.config.js değiştirmektir! Biz

Answer 2

Ben de aynı sorunu koştum ve çözüm burada tarif edilir: https://github.com/FezVrasta/popper.js/issues/287

Benim main.ts şimdi aşağıdaki gibi bir şey gibi görünür:

import "jquery"; 
import Popper from "popper.js"; 

(<any>window).Popper = Popper; 

require("bootstrap"); 

Ve almak için npm install @types/requirejs --save çalıştırmak zorunda require numaralı telefonu arayın.

DÜZENLEME: Ben tamamen etrafında bu ilk kez cevapsız, ama Documention aslında çözmek için daha iyi bir yol var bu https://getbootstrap.com/docs/4.0/getting-started/webpack/

plugins: [ 
    ... 
    new webpack.ProvidePlugin({ 
    $: 'jquery', 
    jQuery: 'jquery', 
    'window.jQuery': 'jquery', 
    Popper: ['popper.js', 'default'], 
    // In case you imported plugins individually, you must also require them here: 
    Util: "exports-loader?Util!bootstrap/js/dist/util", 
    Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", 
    ... 
    }) 
    ... 
] 

Answer 3

Eğer WebPack yapın kullanıyorsanız :) İşe geri şunlardır: ASP olarak

window.$ = window.jQuery = require('jquery'); 
window.Popper = require('popper.js').default; // pay attention to "default" 
require('bootstrap/dist/js/bootstrap'); 

Answer 4

.Net Core 2 proje işe yarıyor Benim için ana HTML dosyası ("_Layout.cshtml" dosyasını)

<script src="~/lib/jquery/dist/jquery.min.js"></script> 
<script src="~/js/popper.js"></script> 
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script> 

arasında aşağıdaki komut ekleyin.