将Jquery和Bootstrap与Es6 Import for React App一起使用 [英] Using Jquery and Bootstrap with Es6 Import for React App

问题描述

您好，我正在尝试将jquery和bootstrap包含到Reactjs项目中，但是我正在使用es6导入来做到这一点.我已将导入内容包含在索引文件中，如下所示.但是在页面加载时，它给出了错误，指出Bootstrap的Javascript需要jquery.我已经npm安装了所有必需的软件包.如何将jquery放入捆绑并缩小的最终脚本文件中?

Hello I am trying to include jquery and bootstrap into a Reactjs project, but I am using es6 imports to do so. I've included the imports as shown below in my index.js file. But upon page load it gives error saying that Bootstrap's Javascript requires jquery. I've already npm installed all the required packages. How can I get jquery into my bundled and minified final script file?

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

推荐答案

在此网站上找到了答案

Found the answer on this site here

第1步:同时安装jquery和bootstrap

Step 1: Install both jquery and bootstrap

npm install jquery bootstrap --save

步骤2:将它们导入vendor.ts:

Step 2: Import them in vendor.ts:

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

步骤3:转到配置目录中的wepback.common.js并将其添加到插件部分:

Step 3: Go to wepback.common.js in config directory and add this inside plugin section:

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

这将使引导程序找到jquery

This will let bootstrap to find jquery

如此处所述，您不能依赖ES6上遵守您的import语句的顺序

As mentioned here you can not depend on ES6 respecting the order of your import statements

这篇关于将Jquery和Bootstrap与Es6 Import for React App一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！