`react-app-rewired` 教程

react-app-rewired 教程

react-app-rewiredOverride create-react-app webpack configs without ejecting项目地址:https://gitcode.com/gh_mirrors/re/react-app-rewired

1. 项目介绍

react-app-rewired 是一个为 create-react-app（CRA）构建的应用提供免 eject 方式修改 Webpack 配置的工具。它允许开发者在不脱离 CRA 的基础上自定义 Webpack 配置，通过配置插件和加载器来满足特定需求。这样既能保持 CRA 的易用性和更新性，又能灵活地定制化开发环境。

2. 项目快速启动

安装依赖

首先，确保已安装 create-react-app。然后，在你的 CRA 项目中安装 react-app-rewired 和一个可选的配置文件 config-overrides.js：

npm install react-app-rewired --save-dev

创建配置文件

在项目根目录下创建一个 config-overrides.js 文件，内容如下：

// config-overrides.js
module.exports = function override(config, env) {
  // 在这里对 Webpack 配置做修改
  return config;
}

更新 package.json 脚本

接着，你需要修改 package.json 中的脚本来使用 react-app-rewired 替换原本的 react-scripts：

{
  ...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },
  ...
}

现在，你可以像平时一样运行 npm start、npm run build 和 npm test 来执行相应的任务，但此时它们将会使用你自定义的配置。

3. 应用案例和最佳实践

• 添加 CSS Modules 支持：

  // config-overrides.js
  const { injectBabelPlugin } = require('react-app-rewired');
  
  module.exports = function override(config) {
    config.module.rules.push({
      test: /\.module\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[name]__[local]___[hash:base64:5]'
          }
        }
      ]
    });
  
    return config;
  };
  

• 自定义 Babel 配置：

  // config-overrides.js
  const { rewireBabelOptions } = require('react-app-rewired');
  
  module.exports = function override(config) {
    config = rewireBabelOptions(config, () => ({
      plugins: ['@babel/plugin-proposal-class-properties']
    }));
  
    return config;
  };
  

4. 典型生态项目

• react-app-rewire-coffeescript: 为 CoffeeScript 提供支持
• react-app-rewire-typescript: 添加 TypeScript 支持
• react-app-rewire-babel-loader: 自定义 Babel 配置
• react-app-rewire-postcss: 添加 PostCSS 支持

这些生态项目通常是基于 react-app-rewired 的封装，让开发者更方便地引入特定语言或技术栈的配置。

---

通过 react-app-rewired，你可以轻松地为你的 CRA 项目添加各种自定义功能，而无需担心将来升级时遇到冲突。只需记住，随着你的项目变得越来越复杂，保持良好组织和注释是非常重要的，以便于维护和理解你的配置改动。

react-app-rewiredOverride create-react-app webpack configs without ejecting项目地址:https://gitcode.com/gh_mirrors/re/react-app-rewired