Question

我决定将bootstrap 4添加到我的Aurelia项目中。

这是一个带有webpack的asp.net 2解决方案。

这就是我做的......

我删除了bootstrap 3并通过npm添加了bootstrap 4。

我接下来使用npm添加了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

这是我的webpack供应商文件。

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 } })
        ])
    }]
};

我没有足够的知识来解决这些问题，并且我已经在安装bootstrap 4时省略了一步。

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

Answer 1

看看这个对aurelia-skeleton-navigation存储库的拉取请求 https://github.com/aurelia/skeleton-navigation/pull/874

它将bootstrap依赖性提升到v4

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

1 个答案: