Webpack 安装 Bootstrap - 缺少 popper.js.map答案

【问题标题】：Webpack Installing Bootstrap - missing popper.js.mapWebpack 安装 Bootstrap - 缺少 popper.js.map
【发布时间】：2023-04-07 16:17:01
【问题描述】：

我按照https://getbootstrap.com/docs/4.0/getting-started/webpack/ 中的说明进行操作，还使用 npm 安装了 jquery 和 popper.js。

当我使用输出 bundle.js 时，浏览器继续发送 popper.js.map 的 GET 请求，我需要所有资产成为 bundle.js 的一部分。

我搜索了很多正确答案，但没有一个可以解释上述说明有什么问题。请帮忙。

【问题讨论】：

Popper 以 3 种不同的形式分发，您可以在此处查看：unpkg.com/browse/@popperjs/core@2.4.0/dist
看起来它有以下几种形式：“cjs”（CommonJS？）、“esm”（EcmaScript 模块？）和“umd”（Unpkg 模块？）
因此 Webpack/NPM 可能使用了错误类型的 Popper 分发包。可能值得研究 NPM 选项，或者看看你在使用 Yarn 代替 NPM 时是否遇到同样的问题，或者研究 Webpack 配置选项，尤其是与模块类型和导入/导出相关的选项。

标签： bootstrap-4 webpack-2 popper.js

【解决方案1】：

CSS 映射只是浏览器开发人员工具用来帮助开发人员查找代码中某些内容的文件。

不用担心，一切对用户来说都是正常的。

【讨论】：

我知道一切正常，但我不想用那些重复的未使用的 GET popper.js.map 请求加载我的服务器。有没有办法至少取消这些请求？
您应该检查是否在捆绑文件中找到类似//# sourceMappingURL=/path/to/file.js.map 的内容，然后删除这些行。此外，如果您自己构建文件，您应该能够禁用在构建过程中包含此/这些行。
找到this。它可以帮助您禁用源映射。
我会试试的，Thnx！

【解决方案2】：

在 popper.js 文件的最后有这样的注释：

//# sourceMappingURL=popper.js.map

删除注释行为我解决了这个问题。

【讨论】：

最佳答案，我欠你很多啤酒。所有的 JS 猴子都把事情复杂化了。真正的语言或包微薄永远不会抛出这种类型的警告。映射是一个开发项目，99% 的人需要这个库，而映射只是臃肿。当您只需要一个包含几个文件的简单 UI 框架时，必须使用包管理器是很可笑的。我通常同意 Mozilla，但他们对这个话题的解释是短视的、有偏见的和业余的。
删除它@Hoodlum 意味着整行。
这个错误对我来说是 Safari 特有的，所以我只是将文件添加到 js 目录以消除错误。 unpkg.com/popper.js@1.14.7/dist/umd/popper.min.js.map Safari 似乎试图从 node_modules 加载链接，它当然不能。
“//#”语法称为编译指示注释，是编译器指令。在这种情况下，它为浏览器提供了有关如何查找 js 地图的说明。
提醒自己：这是整行，而不仅仅是 //

【解决方案3】：

在您的文件中添加以下代码： import { Popper } from 'popper.js' window.Popper = Popper

而不是取消注释 //# sourceMappingURL=popper.js.map（因为我们不希望这个 node_modules/... 文件在我们的存储库中）

【讨论】：

【解决方案4】：

我们可以在 Webpack 3 中使用 SourceMapDevToolPlugin 排除 Popper.js 的源映射。

const webpack = require('webpack')

module.exports = {
  // other configs
  plugins: [
    // other plugin configs
    new webpack.SourceMapDevToolPlugin({
      exclude: ['popper.js']
    })
  ]
}

这是我目前能看到的解决这个问题的最好方法，尤其是当 Popper.js 作为 npm install --save popper.js 的依赖项安装时。这允许在不修改 Popper.js 的源文件的情况下更新依赖包。

【讨论】：

完美运行，无需手动编辑或创建一些快速修复。

【解决方案5】：

按照上面的建议删除评论对我不起作用，所以，如果你真的想获得popper.min.js.map 代码...

在popper github page 上有实际popper js 文件的链接： https://unpkg.com/popper.js/dist/umd/popper.min.js

如果您将其更改为 https://unpkg.com/popper.js/dist/umd/popper.min.js.map，您将拥有所需的一切！

【讨论】：

确保它可以工作，确保你清除了缓存并在浏览器中获得了新编辑的 JS。
在 chrome 80.0.3987.132 中，在 DevTools 中，我突然开始收到无法解析 popper.min.js.map 的警告。我在服务器上从来没有这个文件，所以实际的警告似乎是无法加载这个文件......在按照上面的链接并将 popper.min.js.map 上传到服务器后，警告消失了...... .
我有同样的错误我不知道该怎么办我可能需要在我的 js 文件夹下同时拥有两个文件 popper.min.js.map 和 popper.min.js 吗？你能检查我的问题吗stackoverflow.com/questions/62357738/…

【解决方案6】：

如果您使用的是 Laravel 5+ 和/或 Laravel Mix，这应该会有所帮助：

要使警告消失，只需将.sourceMaps() 添加到webpack.mix.js 中的js 文件：

mix.js('resources/js/app.js', 'public/js').sourceMaps();

该方法将告诉 Laravel Mix 包含源地图，因为它们默认是禁用的。

【讨论】：

这在 Laravel 6 中也适用于我，谢谢。
...对我来说在 Laravel 7 中（这是一个比更改核心 popper.js 恕我直言更好的主意）。
使用此解决方案后，开发人员工具上的警告消失了。 [+1]
我已经尝试过了，我得到“致命错误：无效标记压缩接近堆限制分配失败 - JavaScript 堆内存不足”

【解决方案7】：

位于 node_modules\popper.js\dist\popper.js 的 popper.js 文件的最后是这样的评论：

//# sourceMappingURL=popper.js.map

删除它为我解决了这个问题，就像这样：

sourceMappingURL=popper.js.map

在我的情况下，它在一个很长的目录路径中

【讨论】：

【解决方案8】：

对我来说，就像“GTS Joe”在 cmets 中所说的那样。我只是从 //# sourceMappingURL=popper.js.map 中删除了 # 并删除了 //# sourceMappingURL=bootstrap.js.map 的整行，一切正常，错误消失了

【讨论】：

【解决方案9】：

我的解决方案是删除标签 '#'

之前

// # sourceMappingURL=popper.min.js.map

之后

// sourceMappingURL=popper.min.js.map

【讨论】：