我想在 create-react-app 中添加一个 babel 插件

Posted 2023-02-21

【中文标题】我想在 create-react-app 中添加一个 babel 插件

【英文标题】：I want to add a babel plugin inside create-react-app

【发布时间】：2019-12-28 03:47:25

【问题描述】：

我想在react-scripts中添加以下babel配置我不想从cra中弹出我想继续使用它而不弹出。我看到有一种方法可以分叉存储库并添加您的自定义配置。但我想知道我可以在哪里粘贴这个。

// .babelrc or babel-loader option

  "plugins": [
    ["import",  "libraryName": "antd", "libraryDirectory": "es", "style": "css" ] // `style: true` for less
  ]

【问题讨论】：

我认为这是不可能的。 cra 应用程序的非弹出版本的全部意义在于它是一个“有保证的”设置。您本质上是在寻求承担责任并偏离该设置。

【参考方案1】：

理论上，customize-cra 可以让您执行诸如覆盖 Babel 插件之类的操作。

Here is a list of things you can do.

在撰写本文时，它似乎没有得到维护，对我来说，如果您的项目是基于模块的（即import）而不是require，那么它似乎不可用。

CRA 本身 recommends forking their scripts 作为弹出的替代方案，这是一个非常大胆的声明。

【参考方案2】：

如果您希望覆盖 React 配置文件之一的属性，您可以在项目的主目录中创建该配置文件并设置该单个属性，这将覆盖 React 配置中的该属性。对于 babel，您可以像这样将其作为属性添加到 package.json 中：

  "babel": 
    "presets": [ ... ],
    "plugins": [ ... ],
  

如果你运行 npm run-script injection 你将在你的项目/配置的主目录中获得 ReactJS 用于你的项目的所有配置的副本，从那里你可以编辑你喜欢的任何内容，保持版本跟踪您的更改，而不是弄乱 react 存储库。

如果您坚持要分叉，您可以从 here 分叉主 create-react-app 存储库，其中包含 react-scripts here

【讨论】：

"对于 babel，您可以像这样将它作为属性添加到 package.json 中：[...]" 你在哪里读到的？我尝试在 package.json 中添加一个 babel 插件（在“babel”->“plugins”下），它只是被忽略了。