使用Jquery和Bootstrap与Es6导入React App

您好我正在尝试将jquery和bootstrap包含到Reactjs项目中，但我使用es6导入来执行此操作。 我在index.js文件中包含了如下所示的导入。 但是在页面加载时它会给出错误，说Bootstrap的Javascript需要jquery。 我已经安装了所有必需的软件包。 如何将jquery放入我的捆绑和缩小的最终脚本文件中？

import $ from 'jquery'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; import '../node_modules/bootstrap/dist/js/bootstrap.min.js'; 

Answer 1

在这里找到了这个网站的答案

第1步：安装jquery和bootstrap

 npm install jquery bootstrap --save 

第2步：在vendor.ts中导入它们：

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

第3步：转到config目录中的wepback.common.js并在插件部分中添加：

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

这将让bootstrap找到jquery

如前所述，您不能依赖ES6尊重您的import语句的顺序

Answer 2

 window.$ = window.jQuery = require('jquery'); 

您可以使用Gulp和webpack来缩小文件

Answer 3

用此测试

 import jquery from 'jquery' window.jQuery = jquery require('bootstrap') 

Answer 4

导入所有样式的css文件后，在index.js文件中添加以下代码

 window.jQuery = window.$ = require('jquery/dist/jquery.min.js'); require('bootstrap/dist/js/bootstrap.min.js'); 

Answer 5

出于某种原因，jquery也需要以小写forms定义

 import jQuery from 'jquery' global.jQuery = jQuery global.jquery = jQuery // jquery lowercase was the solution global.$ = jQuery let Bootstrap = require('bootstrap') import 'bootstrap/dist/css/bootstrap.css'