使用webpack时Bootstrap popper问题

Question

我想在我的main.ts中包含bootstrap,以便在_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");

我在控制台输出中出错

错误:Bootstrap下拉列表需要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脚本错误:

错误在./node_modules/bootstrap/dist/js/bootstrap.js模块未找到:错误:无法在"d解决 'popper.js':\项目\ TestApp\TestApp.Web \node_modules \引导\ DIST\JS '@ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-20 @ ./app/main.ts

目前我不知道如何解决它.

Answer 1

看来我需要popper.js,而不是popper.所以解决它:

npm install popper.js