博主手把手教你拆除 Create React App 的 eejct 配置

掘秘：抽丝剥茧解析 Create React App 的 eejct 配置

作为一名开发者，你是否曾想拥有一个能够让你轻松创建 React 项目的工具，而又无需为其复杂的配置而烦恼？Create React App（CRA）就是这样一个深受开发者喜爱的脚手架工具。然而，如果你想对 CRA 的底层配置进行自定义，你可能会发现它将一些复杂工具（比如 webpack）的配置封装了起来，让你难以对其进行修改。这时，react-app-rewired 和 customize-cra 便应运而生。它们能够让你绕过 CRA 的 eject 配置，让你轻松地对其进行自定义。

揭秘 react-app-rewired 的运作奥秘

react-app-rewired 是一个被许多开发者所推崇的工具，它能够让你在不 eject CRA 的情况下，轻松地修改 CRA 的配置。其原理是使用代理模式将 CRA 的配置代理到一个自定义的 webpack 配置文件中，从而允许你对其进行修改。react-app-rewired 的使用非常简单，你只需在你的项目中安装它，然后创建一个名为 config-overrides.js 的文件，并在此文件中导出一个函数，该函数将接收 CRA 的默认配置作为参数，并返回修改后的配置。

探索 customize-cra 的神奇之处

customize-cra 是另一个深受开发者喜爱的工具，它同样能够让你在不 eject CRA 的情况下，对 CRA 的配置进行自定义。与 react-app-rewired 不同的是，customize-cra 使用的是装饰器模式，它将 CRA 的配置作为参数传递给一个自定义的装饰器函数，并返回修改后的配置。customize-cra 的使用也十分简单，你只需在你的项目中安装它，然后创建一个名为 customize-cra.js 的文件，并在此文件中导出一个装饰器函数，该函数将接收 CRA 的默认配置作为参数，并返回修改后的配置。

何时使用 react-app-rewired 和 customize-cra？

无论是 react-app-rewired 还是 customize-cra，它们都能让你在不 eject CRA 的情况下，轻松地对其配置进行自定义。然而，它们也有各自的使用场景。react-app-rewired 更适合那些需要对 CRA 的配置进行简单修改的场景，而 customize-cra 则更适合那些需要对 CRA 的配置进行复杂修改的场景。因此，在选择使用哪个工具时，你应该根据自己的实际需求进行权衡。

结语

react-app-rewired 和 customize-cra 这两个工具为我们提供了一种在不 eject CRA 的情况下，对其配置进行自定义的解决方案。这使我们能够在享受 CRA 带来的便利的同时，也能够根据自己的需求对其进行修改。如果你正在寻找一种能够让你轻松自定义 CRA 配置的工具，那么这两个工具无疑是你的最佳选择。