时间戳

首页 > 解决方案 > 如何在 Gatsby 网站中添加引导 js

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

问题描述

我一直在 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 并且无法找到上述错误的正确修复方法或者包含 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"
  },

先感谢您！

标签： javascriptreactjstwitter-bootstrapbootstrap-4gatsby

解决方案

好的，通过添加我的引导依赖项来解决这个问题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 已被弃用，现在可以在这里找到

谢谢，本指出，

更新 [2021 年 5 月]：

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

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

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

第 2 步：将 Popper.js 更新到 v2npm 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";

推荐阅读