Bootstrap JS 显然被 webpack 覆盖

Posted 2023-02-15

【中文标题】Bootstrap JS 显然被 webpack 覆盖

【英文标题】：Bootstrap JS apparently being overwritten by webpack

【发布时间】：2021-01-30 23:16:28

【问题描述】：

说明

我注意到在使用 javascript 文件（例如 app/javascript/packs/custom.js）时，像 shown.bs.modal 这样的引导 jquery 事件不起作用。我想为不同的页面使用不同的 js 文件，但是由于一些意外行为，它不能很好地与 Bootstrap js 函数一起使用。我认为我在安装应用时遗漏了导致此问题的某些内容。

环境

jQuery 和 Bootstrap 安装者为：yarn add bootstrap@4.3.1 jquery popper.js

Rails 版本：6.0.3.4 引导版本：4.3.1 jQuery 版本：3.5.1 config/webpack/environment.js

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

app/javascript/packs/application.js

...
import 'jquery'
import 'bootstrap'
import '../stylesheets/application.scss'

app/javascript/stylesheets/application.scss

@import "bootstrap";

app/javascript/packs/custom.js

ready = function() 
    console.log('document loaded');                  

    $('.btn').on('click', function() 
        console.log('a button was pressed');
    );

    $('#testModal').on('shown.bs.modal', function() 
        console.log('testModal shown');
    );


$(document).ready(ready);

实际行为

在页面中，Bootstrap 样式正常工作，模态显示正常，但我只能在控制台上看到“已加载文档”和“按下按钮”打印。检查 Webpacker 为 custom.js 生成的 JavaScript 文件，我发现它再次包含 jQuery。有了这个，我假设 Bootstrap js 函数被覆盖了。

预期行为

shown.bs.modal等Bootstrap事件回调被调用，Webpack不再为外部js文件包含jQuery。

【参考方案1】：

我发现了实际问题。我注意到config/webpack/environment.js 为每个处理的文件都包含了 jQuery。所以解决方案是删除该文件上的 jQuery 定义并在 app/javascript/packs/application.js 上手动定义 jQuery：

...
import jquery from "jquery"
window.$ = window.jquery = jquery
import "bootstrap"

import '../stylesheets/application.scss'

所以现在 jQuery 只包含在默认的 application.js 文件中。