React 框架配置管理工具 React-app-rewired、customize-cra介绍

2021-06-08 0 By admin

一、react-app-rewired 配置工具

此工具可以在不 ‘eject’ 也不创建额外 react-scripts 的情况下修改 create-react-app 内置的 webpack 配置,然后你将拥有 create-react-app 的一切特性,且可以根据你的需要去配置 webpack 的 plugins, loaders 等。

1.1、注意事项

使用了 react-app-rewired 之后,等于你得到了项目的配置权,但这表示你的项目将无法得到 CRA 提供的配置“保证”,有可能会把整个项目配置的面目全非。
您可以尝试使用 custom -cra 来获得一组 CRA 2.0兼容的 rewirers,或任何旨在支持2.0的替代项目和分支:

  1. Rescripts,用于扩展 CRA 配置的替代框架(支持2.0+)
  2. react-scripts-rewired 为该项目的一个分支,旨在支持 CRA 2.0
  3. craco

官方地址:https://github.com/timarney/react-app-rewired

二、customize-cra 自定义配置工具

该项目提供了一组实用的工具,和 react-app-rewired 核心功能结合使用,自定义配置 create-react-app 脚手架创建的项目配置信息。

2.1、注意事项

该项目依赖于react-app-rewired. 您需要安装它才能customize-cra工作。
yarn add custom-cra react-app-rewired --dev

2.2、概述

customize-cra 工具利用 react-app-rewired 的 config-overrides.js文件。
通过导入 customize-cra 功能和出口几个函数(包装在 override 功能函数中的),你可以很容易地修改底层配置对象(webpack,webpack-dev-server,babel等)来配置create-react-app。