reactjs,bootstrap和npm import - 没有定义jQuery

Question

我正在尝试在我的反应应用程序中使用bootstrap,但它给了我一个Error: Bootstrap's JavaScript requires jQuery.我已导入jquery并尝试过以下其他帖子:

import $ from 'jquery';
window.jQuery = $;
window.$ = $;
global.jQuery = $;

但是,我仍然得到not defined错误.

解决这个问题的唯一方法就是放

  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

进入index.html

有没有办法导出jquery或让bootstrap能够检测/读取它？

我打电话给我的引导程序

import bootstrap from 'bootstrap'

Answer 1

import bootstrap from 'bootstrap'

const bootstrap = require('bootstrap');

我尝试用"create-react-app"构建一个项目,发现导入模块的加载顺序与导入顺序不一样.这就是为什么boostrap找不到jquery的原因.通常,您可以在此条件下使用"require".它适用于我的电脑.

import $ from 'jquery';
window.jQuery = $;
window.$ = $;
global.jQuery = $;
const bootstrap = require('bootstrap');
console.log(bootstrap)

相关事项:

imports 被悬挂

/sf/answers/2053433301/

imports 应该先行

值得注意的是,导入被挂起,这意味着导入的模块将在它们之间散布的任何语句之前进行评估.将所有导入保存在文件的顶部可以防止由此部分规范引起的意外.

来自https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md

Answer 2

您在使用webpack吗？如果是这样，请将其添加到webpack.config.js。

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