将 Jquery 和 Bootstrap 与 Es6 Import 一起用于 React App

Posted 2023-02-22

【中文标题】将 Jquery 和 Bootstrap 与 Es6 Import 一起用于 React App

【英文标题】：Using Jquery and Bootstrap with Es6 Import for React App

【发布时间】：2017-03-10 08:29:35

【问题描述】：

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

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

【参考方案1】：

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

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

【讨论】：

不想使用其他进口商。我目前正在使用 es6 导入、webpack 和 babel 进行捆绑缩小。我想保持这种状态。

【参考方案2】：

在本站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'
    )
]

这会让引导程序找到 jquery

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

【讨论】：

了解重要信息@David！

@david 我正在使用 CLI create-react-app 创建一个新项目。你能告诉我如何以及在哪里导入吗？ create-react-app创建的项目中没有config目录。

如果你想将它与 create-react-app 一起使用，要么自己在窗口对象上设置 jquery（如下一个答案所示）或 npm run/yarn eject，然后你会在 @ 下找到 webpack 配置文件987654328@ 可以在其中添加这些依赖项

import 'jquery'; import 'bootstrap/dist/js/bootstrap'; 它为我工作

【参考方案3】：

用这个测试

import jquery from 'jquery'

window.jQuery = jquery

require('bootstrap')

【参考方案4】：

由于某些原因，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'

【参考方案5】：

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

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