Create React App 中 Eject 做了什么

JS

使用 Create React App（CRA）是一种快速开始 React 项目的方式。它提供了一个预置的开发环境，可以让开发者专注于编写代码，而无需担心配置及构建工具的繁琐问题。然而，有时候我们需要对项目进行更深层次的定制，这时候就需要使用到 CRA 中的 Eject（弹出）功能了。

什么是 Eject（弹出）

Eject 是 Create React App 提供的一种操作，它可以将 CRA 项目中的配置文件暴露出来，使开发者可以自由地修改和定制这些配置文件。通过 Eject，我们可以获取到 CRA 内部使用的各种配置文件和工具，如 Webpack、Babel 等，从而实现对项目的更高级别定制。

为什么使用 Eject

使用 Create React App 可以极大地提高开发效率，但有时候项目的需求可能超出了 CRA 的默认配置范围。这时候我们就需要使用 Eject，来获取更高的自由度和灵活性。通过 Eject，我们可以修改各种配置文件，添加自定义的插件和工具，以满足项目的具体需求。

如何使用 Eject

在使用 Create React App 创建的项目中，我们可以通过运行以下命令来使用 Eject：

npm run eject

该命令会将 CRA 项目的配置文件和依赖项暴露出来，并将其复制到项目的根目录下。此时，你将无法返回到使用 CRA 的默认配置，因此在执行 Eject 之前，请确保你已经做好了备份，并明确了自己的需求。

案例代码

假设我们的 CRA 项目需要支持 Less 样式文件，并修改 Webpack 配置来支持自定义的路径别名。首先，我们需要安装相应的依赖项：

npm install less less-loader --save-dev

然后，在项目的根目录下找到 config 文件夹，并打开 webpack.config.JS 文件。在 module.rules 数组中添加以下代码来支持 Less：

Javascript
{
  test: /\.less$/,
  use: [
    require.resolve('style-loader'),
    require.resolve('CSS-loader'),
    require.resolve('less-loader')
  ]
}

接着，我们可以在 resolve.alias 对象中添加自定义的路径别名：

Javascript
alias: {
  '@components': path.resolve(__dirname, 'src/components'),
  '@styles': path.resolve(__dirname, 'src/styles')
}

修改完成后，保存文件并重新启动项目，现在你就可以在 CRA 项目中使用 Less 样式文件，并且通过 @components 和 @styles 来引入文件了。

通过使用 Create React App 中的 Eject 功能，我们可以获取到项目的配置文件和工具，从而实现对项目的更高级别定制。然而，在使用 Eject 之前，请确保你已经做好了备份，并明确了自己的需求。使用 Eject 可以帮助我们更好地满足项目的特殊需求，提高开发效率。