Question

您好我正在尝试将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

在此网站here

上找到答案

第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

如上所述[{3}}，您不能依赖ES6尊重import陈述的顺序

Answer 2

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

您可以使用Gulp and 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也需要在小写中定义

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'

使用Jquery和Bootstrap与Es6导入React App

5 个答案: