问题标签 [babel-plugin]

这个应该很简单，但是我运行不了。我已经根据他们的文档安装了插件，并根据他们的文档编写了一个简单的示例：

测试.js：

我已经根据 jest docs 安装了 jest：

我的 package.json 文件：

我也有 babel 配置为：

我试着跑npx jest test.js，但它只是吐出来

我可以在没有 babel-plugin-tester 的简单示例上运行 jest，所以一切似乎都正常，但我可能不明白它是如何与 jest 一起使用的。我觉得自己好傻。

出于测试目的，我需要向 ReactJS 应用程序的组件添加自定义属性。我尝试使用 2 个不同的插件，但是，它们将属性应用于该组件中的所有 JSXElements，我想将其应用于第一个，否则，我最终会出现不必要的属性重复，这使得编写测试更加困难我正在努力挽救脆弱性。

我浏览了文档，找不到如何遍历第一个 JSXElement，所以我自己尝试了几件事，但都失败了，这些是

下面从不添加属性

以下通过未定义中 firstElem 的错误

任何人都可以建议如何获得第一个 JSXElement。

我使用 airbnb-eslint 和 babel-plugin-module-resolver。我在使用别名导入的每个 js 文件中都收到此错误。

在 mac 上使用时不会出现此错误.....仅在使用 Linux/Windows 时。由于这个错误，eslint 停止在 VSCode 中工作。

错误：ESLINT 错误：......eslintrc 中的 ESLint 配置无效：-意外的顶级属性“导入/扩展”。

我正在尝试使用 webpack 和 babel 构建尽可能小的包。

我知道为了跳过 , 等的重复extends。classCallCheck我应该使用@babel/plugin-transform-runtime，这可以按预期工作。

不幸的是，仍然有一些函数在模块的开头被定义了很多次，正在使用它们。他们之中有一些是：

等等...

我的配置文件是：

babel.config.js

网络包：

我玩了很多配置 babel，但没有成功。任何帮助将不胜感激。

在我看来，webpack-loader 和 babel-plugin 的功能是一样的！！

那么能不能帮我解答一下两者的区别，不都是通过AST来操作代码的吗？

我想编写一个 Babel 插件，将块语句作为函数的第一个参数foo转换为箭头函数体。

我想 foo({var a = 1;}) 变身 foo(() => {var a = 1;})

我尝试了以下方法：

但似乎我的插件规则甚至没有被考虑，因为 Babel.transform 之前已经失败了： Uncaught SyntaxError: unknown: Unexpected keyword 'var'

任何想法将不胜感激。

我正在尝试在 react-native 应用程序中使用babel-plugin-module-resolver 。当我在其中使用这样的插件配置时，babel.config.js它可以完美运行。

但问题是我必须在每个别名路径中写入 ./src 。所以我尝试使用root选项。这是我尝试过的代码

但这对我不起作用，我收到此错误：

那么使用root选项的正确方法是什么？

我的任务是将 ReactJS 应用程序中的“react-scripts”2.1.1 更新为更新的内容。我做了什么：1。

• 克隆干净的项目
• 更新“反应脚本”：“2.1.1”->“2.1.8”
• npm 安装
• npm 开始

我面临的第一个问题：

frontend@2.0.0 开始 C:\projects\reactjs-superapp react-app-rewired start

内部/模块/cjs/loader.js:797 抛出错误；^

• 更新“react-app-rewired”：“1.6.2”->“2.0.3

• npm 安装

• npm start 从 v2.0 开始，“injectBabelPlugin”助手已被弃用。您可以使用 customize-cra 插件代替 - https://github.com/arackaf/customize-cra#available-plugins

• 遵循此处找到的解决方案https://github.com/timarney/react-app-rewired/issues/348并替换了现有的

  mofules.exports = 函数覆盖 (config, env) { ...... }

至

• 添加了“customize-cra”：“^1.0.0”、“postcss-normalize”：“^9.0.0”、“resolve-url-loader”：“^3.1.2”
• npm 安装
• npm 开始

现在开始出现编译错误 ./src/config/config.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss !./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/config/config.scss) @import "~importConfigPath"; ^ 找不到或无法读取要导入的文件：~importConfigPath。在 C:\projects\reactjs-superapp\src\config\config.scss （第 2 行，第 1 列）

这可能是预期的。这 ~importConfigPath 之前在 module.exports 函数中定义如下

现在必须在这个新结构中定义它。这就是我现在迷路的地方。怎么做？

我在 Storybook 5 的 CRA 项目中使用 Mui 和 Lodash。我在 CRA 中
成功地对 Mui 和 Lodash 导入进行了树摇动babel-plugin-import，使用以下命令.bablerc.js

但是我无法在 Storybook 5 中做同样的事情。当我尝试在 Storybook 中使用相同的配置（复制.storybook/.babelrc.js到大约一分钟）。从 babel config 中删除预设也无济于事。

Storybook 托管在与我的 CRA 相同的根目录中，共享node_modules.

如何让导入摇树在 Storybook 5 中工作？

这是我的配置：

这是我的项目结构：

我会尽量简洁明了。

在index.js（应用程序和后端代码）中，我都在源代码中使用路径别名。

例如：

./src/some-folder/some-file.js

还有，例如：

./cloudRun/src/some-folder/some-file.js

但不知何故，我在配置时遇到了module-resolver麻烦babel.config.js。要么我让它与存在的路径别名一起正常工作./src（并且路径别名在./cloudRun/src1 级上都是错误的），反之亦然。

例如：

.cloudRun/babel.config.js

这适用于./src文件。但是来自./cloudRun/src1 级的文件都是错误的。

如果我改成这样：

.cloudRun/babel.config.js

然后它适用于./cloudRun/src文件。但是来自的所有文件./src都会错误 1 ​​级。

我在想我可以使用模块解析器配置"root"中的选项来解决这个问题。但我还不能让它工作。

也许是这样的：

.cloudRun/babel.config.js

我在"root"配置中尝试了很多东西。但到目前为止，它似乎没有任何区别。

这是我运行 babel 的方式：