Bootstrap 使用 webpack 时出现 popper 问题

Question

我想将 bootstrap 包含到我的 main.ts 中，这样在 _Layout.cshtml 中我就不需要写

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

就这样离开

<script src="~/bundle/bundle.js" asp-append-version="true"></script>

当我像这样在 main.ts 中添加 bootstrap (4.0.0-beta) 时：

require("bootstrap");

我在控制台输出中收到错误

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)

我安装了 popper：

npm install popper

并将其添加到插件部分，所以它看起来像

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

但是出现了另一个 webpack 脚本错误：

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js Module not found: Error: Can't resolve 'popper.js' in 'D:\Projects\TestApp\TestApp.Web\node_modules\bootstrap\dist\js' @ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-20 @ ./app/main.ts

目前我不知道如何修复它。

Answer 1

看来我需要 popper.js，而不是 popper。所以要修复它：

npm install popper.js

Bootstrap 使用 webpack 时出现 popper 问题

Bootstrap popper issue while using webpack

webpack

asp.net-core-mvc

bootstrap-4

popper.js