问题标签 [babel-loader]

大约一周前，我在将 HMR 添加到我的项目时遇到了一个问题，问题是它不起作用，控制台显示 HMR 已启用并且还检测到文件的更改，但它没有重新渲染视图，控制台将记录：

但是在代码检查器中也不会在视觉上发生任何变化。

经过大量试验后，我发现问题是由 babel-loader 引起的，它以某种方式干扰了 webpacks HMR 电机或类似的东西。我通过排除 babel 加载器中的索引文件来解决它，但是我认为这不是最好的方法，因为现在我不能在我的 index.jsx 文件中使用一些 js 功能。我想知道是否有更好的方法来解决这个问题，可能是我的配置或设置 webpacks 热中间件的方式。

这是我的 webpack 配置：

这就是我在服务器中设置热中间件和 react-hot-loader 的方式：

提前致谢。

./app/main.js 中的错误模块解析失败：/Users/dz2048/myapplication/app/main.js 第 1 行：意外令牌您可能需要适当的加载程序来处理此文件类型。| 从“反应”导入反应；

我无法弄清楚为什么在运行 webpack-dev-server 时会出现此错误。我看到很多人都收到了这个错误，但是出于不同的原因。我怀疑 babel-loader 完全跳过而不是编译我的 main.js 文件。第一次自己设置，我认为我很好地遵循了 webpack 文档，但我想不是。

依赖项：

webpack.config.dev.js：

来自 package.json 的脚本

最后，我的文件结构：

网络/公共/index.html：

我正在使用Vue.js和Webpack开发单页 Web 应用程序。最近我看到这篇文章来缩短 css 类。我能够从 css 文件中缩短 css 类。但我无法从 Html 页面缩短相同的类。

以下是我从webpack.config.js的摘录：

在一个 react 项目中，我使用了 react-boilerplate，但有私有模块包含在需要转译的前端。为了让 babel 转换那些我设置 exclude 到 webpack 配置中与 babel 相关的以下函数：

它工作得很好。

现在我在另一个项目中使用了相同的技巧，但这一次，在生成的包中包含 tq-helpers 但未转译到 ES5 中 - ES6 代码直接在包中并且构建引发错误（更具体地说是 UglifyJS）。

这个包的依赖关系在两个项目中不一样但很难找到，这一定是有原因的。我想知道是否有一种方法可以详细调试 babel 对特定包所做的工作以找出原因。

谢谢你的帮助，

最好的，

迪迪埃

我正在关注 RGR 上相对较旧的教程（从 2014 年开始）。我必须使用更新版本的 React、Webpack 和 Babel，所以存在一些差异。到目前为止一切正常，除了当我尝试将 JSX 编译到 webpack 中时，它给了我一个构建错误。

10 |

下面是我的反应文件：

这是我的 webpack.config.js 文件

另外，这是我的 package.json 文件

谁能告诉我为什么<h3>在 webpack 尝试捆绑时它没有读取 after return 并导致错误？

when trying to load application in IE11 it just shows blank screen and errors with syntax error

on this line

class App extends __WEBPACK_IMPORTED_MODULE_0_react__["Component"] {

my package.json

I have the following imports in my index.js file

my webpack is set up as

我有一个动态 URL，它从我们的服务器中抓取图像标签中的图像，当被 babel-loader 处理时会引发错误。

这是一些被抛出的错误消息，所以我知道它来自 babel-loader：

错误：./src/browser/app/sideNav/SideNavItems.js 模块解析失败：/Users/.../path/to/local-site/node_modules/babel-loader/lib/index.js??ref-- 3!/Users/.../path/to/local-site/src/browser/app/sideNav/SideNavItems.js 意外令牌 (188:132) 您可能需要适当的加载程序来处理此文件类型。

这是动态网址：

这是在 SideNavItems.js 中引发错误的 JSX：

如果我像这里显示的那样替换<CompanyLogo />组件，则构建成功完成：

所以它必须是<CompanyLogo />组件中的某些东西，这让我相信它是动态 URL。但是在用有效的 FPO 图像 url ( http://fpoimg.com/300x250?text=Preview )替换动态 URL 后，它仍然在同一个位置失败。

CompanyLogo.js

我认为在这里使用 exclude 属性没有意义，因为我不想排除对整个文件的转译，我只需要它来忽略这个动态 URL。

我也在使用url-loader，但这似乎不是这个图像 src 有问题的加载器，否则我认为它会在运行该加载器时被捕获。

编辑更清晰

让每个人都知道，我不只是启动应用程序并进行设置。它已经在生产中运行了几个月，并且已经正确渲染了一堆不同的页面。我假设我可以通过忽略这个 URL 来解决这个问题，这就是为什么我要问是否可以这样做。关于这是否应该能够通过加载程序的规则似乎没有什么不合适的，这就是为什么我认为我现在可能只需要选择退出加载程序检查。但我可能正在考虑这个错误，只需要找出根本原因，而不是试图解决它。

这是我的.babelrc文件，我使用的是 Este 样板，因此服务器正在生成初始标记，因此这是.babelrc用于服务器的。

另外这里是错误消息的其余部分，不确定我是否应该添加它：

这个问题是我从未遇到过的，但它只是在我完成游戏一个多月后随机开始的。

每当我跑步

我不断得到

我的 bundle.js.map 的大小继续增加。有人能告诉我这是什么原因吗？我很困惑，因为它只是随机开始的。在网上查看时，我注意到人们提到我们需要拥有我已经拥有的 /node_modules/。其他人找到了解决此问题的不同方法吗？

感谢那些帮助并提供一些建议的人。

我正在尝试babel-loader与babel-plugin-transform-runtime.

我已按照以下说明操作： https ://github.com/babel/babel-loader#babel-is-injecting-helpers-into-each-file-and-bloating-my-code

相关代码：

我在构建时收到以下错误：

Module build failed: Error: Cannot find module '@babel/plugin-transform-runtime'

如果我将插件名称更改为: plugins: ['transform-runtime']，我会收到以下错误：

Module build failed: TypeError: this.setDynamic is not a function

问题是什么？

我babel-loader在我的webpack.config.js文件中使用，但我注意到它删除了表单的许可证注释：

有没有办法保存它们？我注意到 babel 有一个comments选项，但我想这会保留任何评论，而不仅仅是许可证。

我已经尝试过：

以及comments: '/^!/'和comments: /^!/。没有任何效果。

plugins如果我从 webpack 配置中删除整个选项，它只会保留评论。

我还尝试使用许可注释，例如：