webpack - 使用 webpack 时出现 Bootstrap 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