React 中的引导程序——无法解析 jQuery 模块？

Question

我正在使用 React 进行一个项目。我尝试安装 Bootstrap，但我的项目无法编译。我已经使用 npm 安装了 jquery@1.9.1。但我不断收到以下错误消息：

./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Can't resolve 'jquery' in '/Users/my_name/React_Projects/my_react_project/node_modules/bootstrap/dist/js'

这是一个我被赋予工作的项目，所以我没有从头开始——所以我只是在做的时候把事情拼凑在一起。我认为这可能是 Webpack 的错误，所以我尝试做的一件事是在我的 webpack.config.js 文件中添加 jquery 作为外部资源——但此时项目中没有这样的文件。

这个项目是使用 react-scripts 创建的，我听说它是​​ Webpack 的包装器。任何人都知道如何解决这个问题？如何让 jQuery 工作以便我可以开始使用 Bootstrap？

Answer 1

你需要从 npm 安装 jquery 和 popper.js 包。在您的终端中，运行以下命令：

npm install jquery popper.js

或者

yarn add jquery popper.js

接下来，转到 src/index.js 文件并添加以下导入：

import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';

你有它。您现在可以在 React 应用程序中使用 Bootstrap 和 jQuery 的全部功能。