使用 yarn eject 的指南

在使用 React 脚手架（Create React App）创建项目时，有时我们可能需要对配置进行深度自定义。默认情况下，Create React App 对 Webpack、Babel 等工具的配置是隐藏的，yarn eject 命令正是为了解决这个问题而设计的。本文将详细介绍如何使用 yarn eject，并通过代码示例和类图来帮助你更好地理解该过程。

什么是 yarn eject

yarn eject 命令的主要作用是将 Create React App 的隐藏配置暴露到项目中。执行此命令后，你的项目根目录下会生成一个 config 文件夹，包含 Webpack 配置文件、Babel 配置等。

当你执行了 yarn eject，这个操作无法撤销，务必在理解其后果后再进行。

使用案例

假设我们已经使用 Create React App 创建了一个项目，并希望自定义 Webpack 配置以增加支持 Sass 文件的功能。步骤如下：

  1. 创建项目并安装依赖

    npx create-react-app my-app
cd my-app

  2. 执行 yarn eject

    yarn eject

    在运行该命令之后，项目目录结构将会变更，出现一个 config 文件夹和 scripts 文件夹。

  3. 安装 Sass 支持

    接下来，我们需要安装 node-sass 以支持 Sass 文件：

    yarn add node-sass

  4. 修改 Webpack 配置

    进入到 config/webpack.config.js，找到 module.rules 中的配置部分，添加以下代码来支持 .scss 文件：

    {
  test: /\.scss$/,
  use: [
    'style-loader', // 将 JS 字符串生成为 style 节点
    'css-loader',   // 将 CSS 转化成 CommonJS 模块
    'sass-loader'   // 将 Sass 编译成 CSS
  ]
}

  5. 创建 Sass 文件

    在 src 目录下创建一个示例 Sass 文件，App.scss。内容如下：

    $primary-color: #008cba;

.app {
  background-color: $primary-color;
  color: white;
  padding: 20px;
}

  6. 在组件中引入 Sass 文件

    修改 App.js 文件，引入我们刚刚创建的 Sass 文件：

    import React from 'react';
import './App.scss';

function App() {
  return (
    <div className="app">
      Hello, world!
    </div>
  );
}

export default App;

  7. 运行项目

    最后，运行项目以查看效果：

    yarn start

类图示例

下面是一个简单的类图，展示了 App 组件与资源文件之间的关系：

classDiagram
    class App {
        +render()
    }

    class App.scss {
        +style()
    }

    App --> App.scss : 使用

总结

通过使用 yarn eject，你可以灵活地自定义 Create React App 的配置，满足项目的特定需求。不过，请注意该操作的不可逆性，确保了解每一个配置的修改意义。在本例中，我们成功地为项目添加了 Sass 支持，并创建了一种简单的样式管理方式。希望这份指南能帮助你在日常开发中更加高效地使用 React。