javascript - 未定义 bootstrap4-toggle jQuery

Question

在我的 app.js 中有

import $ from 'jquery'
import 'bootstrap'
import 'bootstrap4-toggle'

window.$ = $
window.jQuery = $

但是我得到了错误:

Uncaught ReferenceError: jQuery is not defined
    at eval (bootstrap4-toggle.js:182)
    at Object../node_modules/bootstrap4-toggle/js/bootstrap4-toggle.js (app.js:1407)

我认为导入是在 window.jQuery = $ 之前完成的，但是如果我在之后移动 import 'bootstrap4-toggle'，我仍然会遇到同样的问题.

我错过了什么？

Answer 1

bootstrap4-toggle 不会显式导入 jQuery 本身，而是依赖于全局存在的 jQuery。因此，当导入该脚本时，构建器不知道从哪里获取该变量(默认情况下)。因此修复将取决于您使用的构建系统。默认情况下，大多数构建系统不会生成全局变量，甚至不允许您写入 window。

Vite构建系统

如果您使用的是Vite，您可以安装@rollup/plugin-inject :

$ npm i @rollup/plugin-inject -D

然后将以下内容添加到您的vite.config.js:

import { defineConfig } from 'vite';
import inject from '@rollup/plugin-inject';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    inject({
        // remember to add `jquery` in `dependencies` for `package.json`
        jQuery: "jquery",
        $: "jquery"
    })
  ]
})

此时，您甚至不再需要在脚本文件中调用 import 'jquery'。每当脚本尝试使用 jQuery 或 $ 而它未在本地定义时，您只需使用全局注入(inject)的值即可。

注意:如果您从不在脚本中使用该值，它就不会被注入(inject)。因此，如果您正在测试，请确保至少使用一次。

网页包

如果您使用的是 webpack，请使用 ProvidePlugin在你的 webpack 配置中是这样的:

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
]

JS 模块

如果您的构建输出在 JavaScript 模块中，好处之一是默认情况下它们没有任何全局窗口污染。但是，如果您尝试将 jQuery 添加到不经过构建过程的独立脚本的窗口对象，则必须像这样显式分配给窗口:

Object.assign(window, { $: jQuery, jQuery })

进一步阅读

• > How to use a jQuery plugin inside Vue
• > How to use jQuery with Laravel and Vite
• > How to use Bootstrap 4 and jQuery with Vite v2