Aurelia-添加引导4会导致我的项目失败

我已经决定将Bootstrap4添加到我的Aurelia项目中

这是一个带有网页包的asp.net 2解决方案

这就是我所做的

我通过npm删除了引导程序3并添加了引导程序4

我使用npm next添加了popper.js

我重建了编译好的解决方案

然后我运行解决方案，发现我现在有以下错误

    content - script.bundle.js:333 loading pref showConsoleLogs before prefs were initialised, you will not get the correct result
    getPref @ content-script.bundle.js:333
        (anonymous) @ content-script.bundle.js:481
    a @ content-script.bundle.js:1
        (anonymous) @ content-script.bundle.js:1
            (anonymous) @ content-script.bundle.js:521
    a @ content-script.bundle.js:1
        (anonymous) @ content-script.bundle.js:1
            (anonymous) @ content-script.bundle.js:593
    a @ content-script.bundle.js:1
        (anonymous) @ content-script.bundle.js:1
            (anonymous) @ content-script.bundle.js:621
    a @ content-script.bundle.js:1
        (anonymous) @ content-script.bundle.js:1
            (anonymous) @ content-script.bundle.js:1346
    a @ content-script.bundle.js:1
        (anonymous) @ content-script.bundle.js:1
            (anonymous) @ content-script.bundle.js:1662
    a @ content-script.bundle.js:1
        (anonymous) @ content-script.bundle.js:1
            (anonymous) @ content-script.bundle.js:2097
    a @ content-script.bundle.js:1
    u @ content-script.bundle.js:1
        (anonymous) @ content-script.bundle.js:1
            (anonymous) @ content-script.bundle.js:2106
                (anonymous) @ content-script.bundle.js:1
                    (anonymous) @ content-script.bundle.js:2100
    ReferenceError: $ is not defined
    at Object.65 (bootstrap.js:3849)
    at __webpack_require__ (bootstrap d7bcc5cf3ba589d57197:659)
    at fn (bootstrap d7bcc5cf3ba589d57197:85)
    at Object.boot(validation - renderer - custom - attribute.js:20)
    at __webpack_require__ (bootstrap d7bcc5cf3ba589d57197:659)
    at fn (bootstrap d7bcc5cf3ba589d57197:85)
    at WebpackLoader.<anonymous>(aurelia - loader - webpack.js:176)
    at step (aurelia - loader - webpack.js:36)
    at Object.next(aurelia - loader - webpack.js:17)
    at aurelia- loader - webpack.js:11
    Promise rejected (async)
        (anonymous) @ aurelia-bootstrapper.js:146
            (anonymous) @ aurelia-bootstrapper.js:145
    Promise resolved (async)
    run @ aurelia-bootstrapper.js:136
        (anonymous) @ aurelia-bootstrapper.js:161
    45 @ app.js?v = W7oxVndIkrRrS4plh4l6MCNBU4PUsPEnfFxcjfVxtDg:16384
    __webpack_require__ @ bootstrap d7bcc5cf3ba589d57197: 659
    fn @ bootstrap d7bcc5cf3ba589d57197: 85
    83 @ app.js?v = W7oxVndIkrRrS4plh4l6MCNBU4PUsPEnfFxcjfVxtDg:27388
    __webpack_require__ @ bootstrap d7bcc5cf3ba589d57197: 659
    0.__webpack_exports__.e @ bootstrap d7bcc5cf3ba589d57197: 708
        (anonymous) @ bootstrap d7bcc5cf3ba589d57197: 708
    client.js:82[HMR] connected

我没有足够的知识来区分这些，我在安装Bootstrap4时遗漏了一个步骤

---

有人知道如何将bootstrap 4安装到Web包项目中吗？

看看这个对aurelia skeleton navigation存储库的拉取请求

它将引导依赖性提升到v4

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');

module.exports = ({ prod } = {}) => {
    const isDevBuild = !prod;

    return [{
        stats: { modules: false },
        resolve: {
            extensions: ['.js']
        },
        module: {
            loaders: [
                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
                { test: /\.css(\?|$)/, loader: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) }
            ]
        },
        entry: {
            vendor: [
                'aurelia-event-aggregator',
                'aurelia-fetch-client',
                'aurelia-framework',
                'aurelia-history-browser',
                'aurelia-logging-console',
                'aurelia-pal-browser',
                'aurelia-polyfills',
                'aurelia-route-recognizer',
                'aurelia-router',
                'aurelia-templating-binding',
                'aurelia-templating-resources',
                'aurelia-templating-router',
                'aurelia-validation',
                'jquery',
                'bootstrap',
                'bootstrap/dist/css/bootstrap.css',
            ],
        },
        output: {
            path: path.join(__dirname, 'wwwroot', 'dist'),
            publicPath: 'dist/',
            filename: '[name].js',
            library: '[name]_[hash]',
        },
        plugins: [
            extractCSS,
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
        ])
    }]
};