如何在 Gatsby 网站中添加 bootstrap js

Question

我一直在调整 Gatsby，到目前为止它为静态网站提供了无缝功能。我有堆栈，我需要使用 bootstrap 设计布局就布局而言，bootstrap 运行良好，但对于下拉轮播或模态等额外支持，我必须使用 bootstrap.js 和它的依赖项，尽管在本地环境中一切正常，但是当我在的时候部署我的网站我们的 netlify 我正面临这个问题

4:25:02 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
4:25:01 PM:   7 | //# sourceMappingURL=bootstrap.min.js.map
4:25:01 PM: 
4:25:01 PM:   WebpackError: TypeError: Cannot set property 'emulateTransitionEnd' of undefin  ed
4:25:01 PM:   
4:25:01 PM:   - bootstrap.min.js:6 
4:25:01 PM:     [lib]/[bootstrap]/dist/js/bootstrap.min.js:6:2564
4:25:01 PM:   
4:25:01 PM:   - bootstrap.min.js:6 ./node_modules/bootstrap/dist/js/bootstrap.min.js
4:25:02 PM: Shutting down logging, 58 messages pending 

在官方 repo 和 google 中进一步挖掘这个问题之后，大多数人都推荐 react-bootstrap 或 reactstrap 但我非常依赖于 bootstrapjs 并且无法找到上述错误的正确修复方法还是包含 bootstrap 的最佳方法js？这是我的 package.json 文件。

"dependencies": {
    "bootstrap": "^4.3.1",
    "gatsby": "^2.8.2",
    "gatsby-image": "^2.1.2",
    "gatsby-plugin-manifest": "^2.1.1",
    "gatsby-plugin-offline": "^2.1.1",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-react-svg": "^2.1.1",
    "gatsby-plugin-sass": "^2.0.11",
    "gatsby-plugin-sharp": "^2.1.3",
    "gatsby-source-filesystem": "^2.0.38",
    "gatsby-transformer-sharp": "^2.1.21",
    "jquery": "^3.4.1",
    "node-sass": "^4.12.0",
    "popper.js": "^1.15.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1"
  },
  "devDependencies": {
    "prettier": "^1.17.1"
  },

先感谢您！

Answer 1

OK 通过添加我的引导程序依赖项来解决这个问题gatsby-browser.js（如果它不存在于您的项目中，则通过创建一个具有相同名称的新文件将其添加到您的根目录中gatsby-browser.js）。

首先，我使用以下命令安装了依赖项npm：

npm install bootstrap jquery @popperjs/core

而且，这是我添加的方式gatsby-browser.js：

import './src/sass/app.scss'
import 'jquery/dist/jquery.min.js'
import 'popper.js/dist/popper.min'
import 'bootstrap/dist/js/bootstrap.min.js'

app.scss 是我导入引导程序组件和自定义样式的文件。

或者，您可以使用react-bootstrap，它删除了jQuery对引导程序的不必要依赖，但使用引导程序样式来设置其自己的组件的样式。

更新

popper.js 已被弃用，现在可以在这里找到

谢谢 Ben 指出，

更新 [2021 年 5 月]：

Bootstrap 于 2020 年 5 月 5 日发布了 v5，因此使用 Bootstrap v5 的人应该遵循这些说明。

在 Bootstrap v5 中。Bootstrap 正在从 1.xx 迁移到 2.xx popper.js，因此：

步骤1：首先更改Bootstrap版本： npm i bootstrap@next

第 2 步：将 Popper.js 更新到 v2 npm i @popperjs/core

第 3 步：gatsby-browser.js添加以下导入

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import "@popperjs/core/dist/umd/popper.min.js";

Answer 2

[与接受的答案几乎相似。]

使用 gatsby 添加 Bootstrap 和相关依赖项的另一种方法是添加它们，gatsby-browser.js如下所示：

第 1 步：运行npm i bootstrap jquery popper.js

第2步：在gatsby-browser.js添加以下的进口

import "bootstrap/dist/css/bootstrap.min.css";
import "jquery/dist/jquery.min.js";
import "popper.js/dist/popper.min";
import "bootstrap/dist/js/bootstrap.min.js";

注意：如果gatsby-browser.js已经存在并且包含 ES5 代码，则需要先转换为 ES6

更新 [2021 年 1 月]：

Bootstrap v5.0.0之后；这些步骤已经更改，因为 Bootstrap 从 1.xx 迁移到 2.xx Popper.js 并完全删除了 JQuery：

现在的步骤是： 步骤1：首先更改Bootstarp版本t0 5： npm i bootstrap@^5.0.0

第 2 步：将Popper.js 更新到 v2 npm i @popperjs/core@^2.5.4

第3步：在gatsby-browser.js添加以下的进口

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import "@popperjs/core/dist/umd/popper.min.js";

Answer 3

使用react-bootstrap

步骤1：

npm install react-bootstrap bootstrap

第 2 步：加载引导程序gatsby-browser.js

import "bootstrap/dist/css/bootstrap.min.css";

如果您没有gatsby-browser.js，请gatsby-browser.js在根文件夹中创建并添加上面的代码片段

另外，我必须重新启动服务器才能反映在 gatsby 开发服务器中

参考： https: //react-bootstrap.github.io/getting-started/introduction/