使用使用jQuery和Bootstrap的webpack导入第三方库

Question

我试图将第三方主题/模板导入到我的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

如您所知，第三方位于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。