babeljs 相关问题

如何防止Babel格式化生成的代码？

当使用 Babel 修改 JavaScript 代码的 AST 并将生成的代码写回原始文件时，我观察到原始文件被重新格式化。但是，我不想要代码...

我该如何解决这个问题“babel-node”不被识别为内部或外部命令、可操作程序或批处理文件。？

我正在开发一个node.js 项目。我使用 Babel 创建了这个项目，它在之前使用的节点系统中运行良好。 我已经更新了系统中的 node.js 版本，但在那之后，我得到了......

./types 的大小写与底层文件系统不匹配

所以我收到了来自 eslint 的有点奇怪的警告 './types' 是流类型文件。 我认为 eslint 将 checkbox 读取为小写，而实际上它是 Checkbox（大写 C）。 我尝试 git mv casesensitive tmp &...

babel-plugin-rewire 在 Typescript 项目中不起作用

注意：我的目标是为项目带来类似 Rewire 的功能。无论是使用 Rewire 包、babel-plugin-rewire 还是任何其他满足我目标的库。考虑到这一点，这是详细信息...

在React18和webpack 5.88.1中出现“react is not Defined”

我一直在尝试从 CRA 出来并在我的 React 应用程序中使用 React18 和 webpack 5。我尝试了很多事情，但似乎都没有解决。 我几乎尝试了网络上的所有答案，但没有......

React-Native 应用程序中 Babel 出现未知选项错误

我正在使用打字稿构建一个反应本机应用程序，以学习反应本机。当我使用 expo start 运行应用程序并尝试在模拟器上运行时，我收到此错误： index.js: [巴贝尔] ......../index.js:

Stylex 在玩笑测试期间无法编译：“永远不应该调用 stylex.create。它应该被编译掉。”

当我使用 webpack 正常开发时，Stylex 编译得很好。

语法错误：使用 Jest 时出现意外的标记“导出”（来自“react-leaflet”）

我突然发现这个错误。 代码在我使用时工作正常，但在使用 Jest 测试时会弹出此问题。 ...................................................... ................................

Babel 7 失败，单个插件显示“检测到重复插件/预设。”

失败的插件是 @babel/plugin-transform-regenerator （无边际插件，每周 160 万次下载）。 这是我的整个 .babelrc： { “预设”：[]， “插件”：[ “@babel/插件-

当前尚未启用对实验性语法“OptionalChainingAssign”的支持

我在我的 React js 应用程序中收到此错误。我没有在我的应用程序中使用 Eslint，并且我使用默认设置配置了 babel。 在我的 package.json 中，我配置了这些设置 “依赖关系&

Babel“plugins”不是有效的插件属性？

我正在尝试让 Nativewind 参与我的 Expo React-Native 项目。但我不断收到以下错误： iOS 捆绑失败 3618ms (C:\Documents\project ode_modules xpo-router ntry.js) 呃...

Jest 导入和导出失败

对 CRA 应用程序运行测试时，所有组件均出现以下错误： 错误：“导入”和“导出”可能仅与“sourceType：“模块””一起出现 我正在使用 create-react-app，带有 r...

我在烧瓶中遇到会话断章取义的问题

我用flask和flask-babel编写了多种语言面板，并在会话中设置lang来检测语言和加载内容，我使用工厂模式来创建应用程序。 现在我想使用会话

React Webpack 加载器无法加载类

我有两个打字稿包，一个React应用程序和一个基础设施包。 React 应用程序依赖于基础设施包（目前通过 npm 链接）。我刚刚向

如果从外部 svg-sprite 文件使用，svg 中的蒙版标签将被忽略

我正在尝试在我的项目中使用 svg sprite，并且效果很好，除非您在 sprite 中使用 mask 标签： 公共/精灵.svg： 我正在尝试在我的项目中使用 svg 精灵，并且效果很好，除非您在精灵中使用 mask 标签： 公共/sprite.svg： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <symbol viewBox="0 0 16 16" id='pharmacy'> <mask id="pathOne" fill="white"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z"/> </mask> <path d="M5 2V1H4V2H5ZM11 2H12V1H11V2ZM5 5V6H6V5H5ZM2 5L2 4L1 4V5H2ZM2 11H1V12H2V11ZM5 11H6V10H5V11ZM5 14H4V15H5V14ZM11 14V15H12V14H11ZM11 11V10H10V11H11ZM14 11V12H15V11H14ZM14 5H15V4H14V5ZM11 5H10V6H11V5ZM5 3H11V1H5V3ZM6 5V2H4V5H6ZM2 6L5 6V4L2 4L2 6ZM3 11V5H1V11H3ZM5 10H2V12H5V10ZM6 14V11H4V14H6ZM11 13H5V15H11V13ZM10 11V14H12V11H10ZM14 10H11V12H14V10ZM13 5V11H15V5H13ZM11 6H14V4H11V6ZM10 2V5H12V2H10Z" fill="#171717" mask="url(#pathOne)"/> </symbol> </defs> </svg> src/App.js： export default function App() { return ( <div className="App"> <svg width="16px" height="16px"> <use href="/sprite.svg#pharmacy" /> </svg> </div> ); } 所以问题是所有浏览器都会忽略蒙版，并且您会得到错误的图像。奇怪的是，当您使用内联 svg 或将精灵放入标记内时，一切正常。问题可能出在 babel 上，因为我检查了 vanilla JS，它是一样的。有人可以帮助我吗？ https://codesandbox.io/s/epic-darwin-0n5uk5 当前外部 <use> 元素不支持蒙版或 ClipPaths。 作为解决方法，您可以使用 css mask-image 属性。 您可以通过数据 URL 或使用外部文件包含蒙版形状。 外部：mask.svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path d="M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z" /> </svg> CSS： .masked-external { -webkit-mask-image: url("mask.svg"); mask-image: url("mask.svg"); -webkit-mask-size: cover; mask-size: cover; } 数据网址掩码： .masked { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z' /%3E%3C/svg%3E"); -webkit-mask-size: cover; mask-size: cover; } HTML <svg class="masked" viewBox="0 0 16 16"> <use href="sprite.svg#pharmacy" /> </svg> 我发现，对于 Firefox（似乎不适用于 Chrome），您需要将 <mask> 及其内容移到 <symbol> 之外（到 svg 定义的顶层），如下所示： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="pathOne" fill="white"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z"/> </mask> <symbol viewBox="0 0 16 16" id='pharmacy'> <path d="M5 2V1H4V2H5ZM11 2H12V1H11V2ZM5 5V6H6V5H5ZM2 5L2 4L1 4V5H2ZM2 11H1V12H2V11ZM5 11H6V10H5V11ZM5 14H4V15H5V14ZM11 14V15H12V14H11ZM11 11V10H10V11H11ZM14 11V12H15V11H14ZM14 5H15V4H14V5ZM11 5H10V6H11V5ZM5 3H11V1H5V3ZM6 5V2H4V5H6ZM2 6L5 6V4L2 4L2 6ZM3 11V5H1V11H3ZM5 10H2V12H5V10ZM6 14V11H4V14H6ZM11 13H5V15H11V13ZM10 11V14H12V11H10ZM14 10H11V12H14V10ZM13 5V11H15V5H13ZM11 6H14V4H11V6ZM10 2V5H12V2H10Z" fill="#171717" mask="url(#pathOne)"/> </symbol> </defs> </svg> 虽然我根本没有添加定义，但似乎把它搞砸了。 有些相关的来源：https://github.com/JetBrains/svg-sprite-loader/issues/325 我找到了另一种似乎可以在 Chrome 上正常工作的解决方案。 你需要改变两件事： 将遮罩移至根部（或在 <defs> 中） 更改 URL 以提及 SVG 名称本身，例如：url(sprite.svg#mask) 浏览器将重新加载相同的 svg，找到遮罩 ID 并应用遮罩。 因此，上述问题的原始文件应如下所示： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="pathOne" fill="white"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z"/> </mask> <symbol viewBox="0 0 16 16" id="pharmacy"> <path mask="url(sprite.svg#pathOne)" d="M5 2V1H4V2H5ZM11 2H12V1H11V2ZM5 5V6H6V5H5ZM2 5L2 4L1 4V5H2ZM2 11H1V12H2V11ZM5 11H6V10H5V11ZM5 14H4V15H5V14ZM11 14V15H12V14H11ZM11 11V10H10V11H11ZM14 11V12H15V11H14ZM14 5H15V4H14V5ZM11 5H10V6H11V5ZM5 3H11V1H5V3ZM6 5V2H4V5H6ZM2 6L5 6V4L2 4L2 6ZM3 11V5H1V11H3ZM5 10H2V12H5V10ZM6 14V11H4V14H6ZM11 13H5V15H11V13ZM10 11V14H12V11H10ZM14 10H11V12H14V10ZM13 5V11H15V5H13ZM11 6H14V4H11V6ZM10 2V5H12V2H10Z" fill="#171717" /> </symbol> </defs> </svg> （我在开头移动了 mask 属性以使其更清晰） 请注意，Chromium 上针对此问题存在很长的问题，并且在某些有关缓存的情况下，它无法正常工作.. https://issues.chromium.org/issues/41230670 https://issues.chromium.org/issues/40134477

ViteJS React 解析错误：缺少 '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression

我们有一个 vitejs React 应用程序，它抛出一个内部服务器错误： 0:0错误解析错误：[BABEL]：找不到模块'@babel/plugin-bugfix-safari-id-destructuring-collision-in-fun...

将 JSX 格式的字符串注入到 React 组件中

我有一个小的 React 页面，应该编译并显示 html 字符串。 在react-foundation中编写的字符串中的html 页面如下所示： 从 'react' 导入 * as React； 导入 * 作为 Reac...

使用多个入口点包含 babel polyfill 的最佳方式是什么

我正在使用带有多个入口点的 webpack 配置： var fs = require('fs'); var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.[hash].js'); 我...

Babel：根编程选项

我似乎不知道在哪里放置 babel 的根编程选项。 如果我有一个 monorepo 并且需要告诉不同的子包他们应该向上查找我的 babel.config.js 那么我

在 Intellij 中运行 `babel` 时出现 `env: node: No such file or directory` 错误

我使用的是Intellij Ultimate 2017.3并在其上安装了nodejs插件。我的nodejs项目需要babel来做es5到es6的翻译工作。为了让Intellij能够调试我的...