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

Posted 2023-02-22

【中文标题】如何在 Gatsby 网站中添加引导 js

【英文标题】：How to add bootstrap js in a Gatsby Website

【发布时间】：2019-10-22 21:54:28

【问题描述】：

我一直在 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"
  ,

提前感谢您！

【问题讨论】：

可能是个愚蠢的问题，但您的项目中是否存在./node_modules/bootstrap/dist/js/bootstrap.min.js？

@An0nC0d3r 显然是的，检查 json 包，它在本地环境中运行良好，到目前为止，我已经在我的导航栏中使用 bootstrapjs 作为下拉菜单，它在本地运行良好，所以它确实存在。

【参考方案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";

【讨论】：

或者，您可以使用<Helmet> 并将您的第三方库作为链接或脚本标签包装在其中

@Rikin 是的，我可以，但我不想实际上我只想导入那些我在设计没有未使用的 css 时需要的组件。

我继承了一个使用 Bootstrap 的站点，需要在没有太多时间的情况下将其引入 Gatsby，这是唯一有效的解决方案。请注意，我至少只能导入 Bootstrap 所需的组件，所以我做了import 'bootstrap/js/dist/modal.js' 谢谢！

为什么我在 npm 上找不到popper.js？

可以在这里找到 npmjs.com/package/@popperjs/corepopper.js 已被弃用。

【参考方案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";

【讨论】：

为了突出区别，kushal 导入引导 CSS 文件，而 Mr. Pyramid 导入 SASS 文件。如果您不了解 SASS，最好复制此导入块。

【参考方案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/

【讨论】：

您发布的答案与已被接受的答案没有太大区别。

有，1. 这使用 react-bootstrap 2. 显示当gatsby-browser.js 不存在时该怎么做（我遇到了这个）

是的，因为它与主要问题无关，如果它不存在，您可以在他们的网站上查看如何创建一个。

它是相关的。当我搜索这个时，我登陆了这个链接。为像我这样来这里的人节省一些时间

@SahithVibudhi 谢谢我收到了这个问题 DevTools 无法加载源地图：无法解析 localhost:8000/bootstrap.min.css.map 的内容：在 JSON 中的位置 0 处出现意外的令牌