如何在 Gatsby 网站中添加引导 js

Question

我一直在 Gatsby 中进行调整，到目前为止，它为静态网站提供了无缝的功能。我有堆栈，我需要使用引导程序设计布局，就布局而言引导程序运行良好，但对于下拉轮播或模式等额外支持，我必须使用 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 和谷歌上进一步挖掘了这个问题之后，大多数人都推荐 react-bootstrap 或 reactstrap 但我非常喜欢 bootstrapjs 并且无法找到解决上述错误的正确方法是无论如何还是最好的方法包括引导 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

确定通过在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 已被弃用，现在可以找到 here

感谢 Ben 指出，

更新 [2021 年 5 月]：

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

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

第一步：先更改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 中，如下所示：

第一步：运行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.x.x 迁移到 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 并添加上面的sn-p

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

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