主页 / 问题 / 1168264
Accepted
Dmitry
Asked:2020-08-20 18:20:41 +0000 UTC2020-08-20 18:20:41 +0000 UTC

无法通过 webpacker 连接 bootstrap.js

  • 772

无法通过 webpacker 连接 bootstrap.js。做了什么

yarn add bootstrap popper.js jquery

应用程序/javascript/packs/application.js

import "bootstrap"
import "../stylesheets/application"

配置/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
}))

module.exports = environment

应用程序/视图/布局/application.html.erb

%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

但是 bootstrap.js 没有加载。我想使用模态。如果我添加到视图中，一切正常

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

我在 webpack 上做错了什么？

bootstrap

1 个回答

  1. Best Answer

    太好了，这一切都通过添加到 config/webpack/environment.js 来解决

    const config = environment.toWebpackConfig();
config.resolve.alias = {
    jquery: 'jquery/src/jquery'
}

    现在 config/webpack/environment.js 看起来像

    const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.append('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default']
    })
)

const config = environment.toWebpackConfig();
config.resolve.alias = {
    jquery: 'jquery/src/jquery'
}

module.exports = environment;
    • 1

相关问题