问题标签 [babel-loader]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 在 webpack 中为 HMR 配置 babel-loader 的正确方法
大约一周前,我在将 HMR 添加到我的项目时遇到了一个问题,问题是它不起作用,控制台显示 HMR 已启用并且还检测到文件的更改,但它没有重新渲染视图,控制台将记录:
但是在代码检查器中也不会在视觉上发生任何变化。
经过大量试验后,我发现问题是由 babel-loader 引起的,它以某种方式干扰了 webpacks HMR 电机或类似的东西。我通过排除 babel 加载器中的索引文件来解决它,但是我认为这不是最好的方法,因为现在我不能在我的 index.jsx 文件中使用一些 js 功能。我想知道是否有更好的方法来解决这个问题,可能是我的配置或设置 webpacks 热中间件的方式。
这是我的 webpack 配置:
这就是我在服务器中设置热中间件和 react-hot-loader 的方式:
提前致谢。
javascript - 意外的令牌导入,babel-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:
webpack - 如何使用 Vue js 和 Webpack 缩短 css 类名
我正在使用Vue.js和Webpack开发单页 Web 应用程序。最近我看到这篇文章来缩短 css 类。我能够从 css 文件中缩短 css 类。但我无法从 Html 页面缩短相同的类。
以下是我从webpack.config.js的摘录:
babel-loader - 尽管有适当的排除,Babel 没有在 node_modules 中转译 ES6 模块
在一个 react 项目中,我使用了 react-boilerplate,但有私有模块包含在需要转译的前端。为了让 babel 转换那些我设置 exclude 到 webpack 配置中与 babel 相关的以下函数:
它工作得很好。
现在我在另一个项目中使用了相同的技巧,但这一次,在生成的包中包含 tq-helpers 但未转译到 ES5 中 - ES6 代码直接在包中并且构建引发错误(更具体地说是 UglifyJS)。
这个包的依赖关系在两个项目中不一样但很难找到,这一定是有原因的。我想知道是否有一种方法可以详细调试 babel 对特定包所做的工作以找出原因。
谢谢你的帮助,
最好的,
迪迪埃
reactjs - webpack 不与 babel-loader 捆绑并做出反应
我正在关注 RGR 上相对较旧的教程(从 2014 年开始)。我必须使用更新版本的 React、Webpack 和 Babel,所以存在一些差异。到目前为止一切正常,除了当我尝试将 JSX 编译到 webpack 中时,它给了我一个构建错误。
10 |
下面是我的反应文件:
这是我的 webpack.config.js 文件
另外,这是我的 package.json 文件
谁能告诉我为什么<h3>
在 webpack 尝试捆绑时它没有读取 after return 并导致错误?
javascript - 如何让 babel-loader 忽略我的动态 URL
我有一个动态 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
用于服务器的。
另外这里是错误消息的其余部分,不确定我是否应该添加它:
babeljs - 关于它的错误超过了“500KB”Babel 的最大值
这个问题是我从未遇到过的,但它只是在我完成游戏一个多月后随机开始的。
每当我跑步
我不断得到
我的 bundle.js.map 的大小继续增加。有人能告诉我这是什么原因吗?我很困惑,因为它只是随机开始的。在网上查看时,我注意到人们提到我们需要拥有我已经拥有的 /node_modules/。其他人找到了解决此问题的不同方法吗?
感谢那些帮助并提供一些建议的人。
javascript - Webpack babel-loader 运行时:模块构建失败:TypeError:this.setDynamic 不是函数
我正在尝试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
问题是什么?
javascript - 有没有办法保留许可证评论?
我babel-loader
在我的webpack.config.js
文件中使用,但我注意到它删除了表单的许可证注释:
有没有办法保存它们?我注意到 babel 有一个comments
选项,但我想这会保留任何评论,而不仅仅是许可证。
我已经尝试过:
以及comments: '/^!/'
和comments: /^!/
。没有任何效果。
plugins
如果我从 webpack 配置中删除整个选项,它只会保留评论。
我还尝试使用许可注释,例如: