使用使用 jQuery 和 Bootstrap 的 webpack 导入 3rd 方库

Question

我正在尝试将第 3 方主题/模板导入我的 ReactJS 项目，该项目有一些我需要的 css 和 js 代码。我能够轻松拉出样式，但不能拉出 js。

这是我的 webpack 插件配置的样子：

new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          jquery: 'jquery'
      })

这是我的index.js：

import 'jquery';
import 'bootstrap/dist/js/bootstrap.bundle.js'

import './vendor/js/custom.min.js'; << this is what doesn't work

如您所知，第 3 方位于 vendor 目录中。当它尝试导入custom.min.js 时，出现以下错误：

Line 1:  '$' is not defined       no-undef
Line 1:  'jQuery' is not defined  no-undef

请让我知道是否应该包含任何其他详细信息。

Answer 1

您需要通过如下方式导入 $ 和 jQuery 作为对 jQuery 的引用：

globals.js

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;

app.js

import './globals.js';
import 'custom.min.js';

这应该强制执行导入顺序并允许窗口附加 jQuery。