问题标签 [babel-plugin]

所以我正在尝试使用 react-native-web 运行 react-native。它需要添加一些 babel 插件。

我的应用是使用 react-app-rewired 创建的。我尝试了几种方法来添加 babel 插件，但是都没有成功。

我正在使用一个config-overrides.js看起来像这样的文件：

我知道其他配置覆盖有效，但是 babel 一直忽略新插件（已安装，以及其他所有插件）。

此外，我正在通过 react-app-rewired 构建构建应用程序。

这是我在尝试构建时收到的错误消息

非常感谢（：

加尔

我编写了一个 Babel 插件来转换一些特定的依赖项。

为了减少 babel 的编译时间，我只想将它用于这些依赖项，我babel.config.js的就像

我发现only这是一个非常有用的配置。

可以在 Babel 上做到这一点吗？

在我的 Vue-CLI 项目中，当我尝试使用??操作符时，我得到了这个错误：

语法错误：SyntaxError：/Users/stevebennett/odev/freelancing/v-map/src/components/Map.vue：>当前未启用对实验语法“nullishCoalescingOperator”的支持（30:29）：

...

将 @babel/plugin-proposal-nullish-coalescing-operator ( https://git.io/vb4Se ) 添加到 Babel 配置的“插件”部分以启用转换。

我安装了@babel/plugin-syntax-nullish-coalescing-operator（它的名字似乎已经改变了），将它添加到我的 babel.config.js 中：

现在错误消息似乎已经倒退，根本没有提到操作员名称：

我究竟做错了什么？

我正在制作我的第一个在开发过程中转换代码的 bable 插件。

这个插件将与 webpack 一起使用，并且应该处理多个文件。

我需要一种方法来知道 babel 或 webpack 何时完成第一次编译并启动 watch 模式，所以此时它会在文件更改后转换代码。

像这样的东西：

查看文档没有告诉编译是否完成的事件、变量或函数，但肯定有一个！任何想法？

我已经编写了自己的模块，该模块将 JSX 字符串作为参数并将其转换为 javascript 对象，所以我这样称呼它：

这行得通，但我真正需要的是在编译时将 JSX 转换为对象，所以我可以像普通的 JSX 表达式一样编写它：

并从我的函数中获取结果作为输出，如下所示：

我不明白有很多像“babel-plugin-transform-jsx”这样的 babel 插件可以做到这一点，但是我想了解 babel 插件以及它们是如何工作的，这样我就可以自己制作了。

我试图分析上面提到的插件的代码，但仍然无法理解事情是如何工作的，例如，插件如何知道他正在使用 JSXElement？

我唯一想做的就是提取该 JSX，将其放入我的函数中并将其转换为函数的返回

我怎样才能做到这一点？谢谢

我正在使用打字稿设置 Next.js 项目。我一直在关注几个指南，但我似乎遇到了导入别名的问题。

我不确定这是我的配置还是 Next.js 的问题。

以下是一些引用类似问题的页面，我遵循了这些提示但没有成功：

• https://github.com/zeit/next-plugins/issues/535
• https://medium.com/anna-coding/how-to-use-absolute-module-import-path-in-next-js-dcbc806272e5

我尝试使用 Next.js 的 webpack 配置来解决问题（将 resolve.alias 选项直接添加到 next.config.js，但这没有帮助，而且 Next.js 现在应该支持开箱即用的打字稿（resolve.扩展名定义明确）

Next.js 版本 9.3.5

b abel-plugin-module-resolver 版本 4.0.0

tsconfig.json

.babelrc

我正在尝试在我的反应应用程序中设置一个构建文件夹，但它无法编译。我希望运行“npm run build”并获得一个可以部署到我的服务器的构建包。当我尝试运行此命令时，出现以下错误：

此时，我尝试使用此处建议的“npm i @babel/plugin-proposal-export-default-from”命令手动安装@babel/plugin-proposal-export-default-from：

https://www.npmjs.com/package/@babel/plugin-proposal-export-default-from

当我尝试上述命令时，我收到以下错误消息：

此时，我为 plugin-proposal-export-default-from 创建了目录并添加了一个 package.json 文件。一旦我这样做了，我尝试了相同的命令，并得到了一个稍微不同的错误消息：

我不确定在这里还能做什么。最后，我只想运行“npm run build”，以便我可以将此应用程序部署到我的服务器和/或 github 上的托管站点。我试图跳过这一步并将所有文件上传到我的自托管站点（使用 cpanel），但由于 index.html 文件没有更新，我无法让它工作。我对如何更新 index.html 文件的理解是通过运行“npm run build”。对不起，如果这变得冗长。只是想给出一个很好的解释。谢谢你读到这里。

我想做这样的进口import Foo from '~/components/Foo'

https://github.com/tleunen/babel-plugin-module-resolver

如果我将我的设置.babelrc为：

我也尝试过（以及许多其他组合）：

然后我可以在这样的脚本中使用它：

1. 如果我这样做是行不通的import Foo from '~/components/Foo'（我希望它）
2. 我想强制用户必须预先添加，~/所以没有多种使用模式。

我正在尝试将 JSX 属性的输出值从字符串转换为表达式/函数调用。

鉴于源代码看起来像......

Babel 翻译代码后的期望输出将是......

我有以下找到该属性的内容，但我正在努力用表达式/函数调用替换字符串值。

第 13 行myFunctionCallHere(${classNames})是我无法弄清楚如何变成 AST 样式表达式的地方，这样做的正确方法是什么？

谢谢

我有一个自定义的 babel 插件。如果一个项目包含多个插件（可能还有来自 vue/angular 的加载器），这意味着，例如，如果两个转换都访问“程序”节点，则转换将按照插件的第一个到最后一个顺序运行（babel 文档）。

但这并不经常发生。如果我的插件依赖于例如类组件的存在，但另一个插件首先进入访问者将类转换为函数，那么我的自定义插件访问者将无用（跳过）。

是否可以确保我的自定义插件是第一个输入的，然后其他任何东西都会像另一个 babel 插件/预设、vue/angular 加载器等那样转换代码？