create-react-app 初始化的项目，如何启用 babelrc 配置文件

本文链接：https://blog.csdn.net/qq_32281471/article/details/95956947

本文介绍了在使用create-react-app初始化的项目中，如何启用.babelrc配置文件来支持如装饰器等新特性。当直接创建.babelrc文件无效时，通过查看源代码发现create-react-app默认禁用了babelrc。为解决此问题，文章推荐使用react-app-rewired和config-overrides.js来修改webpack配置，从而成功启用.babelrc。此外，还提供了不创建.babelrc文件而直接进行配置的简化方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 create-react-app 初始化的项目，能满足大多数情况下的需求，但是想用装饰器等比较新的技术时，你可能会去创建一个.babelrc 文件，然后配置成如下操作

安装

npm i -D @babel/plugin-proposal-decorators

配置 .babelrc

{
    "plugins": ["@babel/plugin-proposal-decorators", { "legacy": true }],
}

然后，你惊奇的发现，依然无效！！

What!!!

源代码走起！！

打开 node_modules/react-scrpts/config/webpack.config.js，搜索 babelrc

可以看到，配置babel处理 js 文件时，直接禁用了使用 babelrc

想使用 .babelrc？

react-app-rewired

Tweak the create-react-app webpack config(s) without using ‘eject’ and without creating a fork of the react-scripts.
All the benefits of create-react-app without the limitations of “no config”. You can add plugins, loaders whatever you need.

安装

npm i -D react-app-rewired customize-cra

配置：项目根目录下创建 config-overrides.js

/* config-overrides.js */
const { useBabelRc, override } = require('customize-cra')

const config = override(useBabelRc())

module.exports = config

这样就启用了 .babelrc 配置文件，装饰器就可以用起来了

另外如果仅仅想使用装饰器，可以不用创建 babelrc 文件
通过阅读 customize-cra 源码

发现直接这样配置也可以