Create-React-App 的定制方案：无需 eject
2023-11-20 14:45:50
React 社区一直争论的一个主要话题是如何在不使用 eject 的情况下对 create-react-app (CRA) 进行自定义。eject 是一个脚本，允许你从 CRA 中完全导出你的应用程序配置，但代价是失去 CRA 提供的持续更新和维护。
本文将探索一个替代方案，它允许你调整 CRA 的 webpack 配置而不必使用 eject 或创建 react-scripts 的分支。这种方法结合了 Webpack 和 CRA 的优点，提供了灵活性，同时避免了 eject 带来的缺点。
了解 CRA 的 webpack 配置
CRA 使用 Webpack 作为其构建工具。Webpack 是一个模块捆绑器，它将你的应用程序的源代码打包成一个或多个用于部署的捆绑文件。CRA 使用 Webpack 来捆绑你的应用程序的 JavaScript、CSS 和其他资源。
CRA 的 webpack 配置保存在 package.json 文件的 "scripts" 部分中。此配置是高度可定制的，你可以根据自己的需求对其进行修改。
在不使用 eject 的情况下定制 webpack 配置
要定制 webpack 配置而不使用 eject，你可以使用以下步骤：
- 安装 Webpack 和相关模块：
npm install webpack webpack-cli --save-dev
- 创建
webpack.config.js文件：
在你的项目根目录中，创建一个名为 webpack.config.js 的新文件。此文件将包含你的自定义 webpack 配置。
- 配置 webpack：
在 webpack.config.js 文件中，导出一个 webpack 配置对象。该对象可以包含自定义选项，例如加载器、插件和规则。
- 将 webpack 集成到 CRA：
在你的 package.json 文件中，将 "scripts" 部分更新为：
"scripts": {
"start": "webpack serve --open",
"build": "webpack --mode production"
}
- 运行 webpack：
使用以下命令运行 webpack：
npm start
这将启动 webpack 开发服务器。
示例配置
以下是一个示例 webpack 配置，它添加了一个 Babel 加载器以允许使用 ES6 语法：
module.exports = {
// ...其他 webpack 配置选项
module: {
rules: [
// ...其他规则
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}
]
}
};
优点和缺点
这种方法的主要优点包括：
- 灵活性： 它允许你根据需要对 webpack 配置进行细粒度控制。
- 无需 eject： 你不会失去 CRA 提供的更新和维护。
- 易于使用： 该过程相对简单且易于理解。
然而，这种方法也有一些缺点：
- 更复杂： 它比使用
eject更复杂，因为它需要你手动管理 webpack 配置。 - 潜在问题： 如果你不熟悉 webpack，你可能会遇到问题。
- 更新问题： CRA 更新时，你可能需要手动更新你的 webpack 配置。
结论
在不使用 eject 的情况下定制 create-react-app webpack 配置是一种在保留 CRA 好处的同时获得更多灵活性的方法。通过遵循本文中的步骤，你可以轻松地修改 webpack 配置以满足你的特定需求。
重要的是要权衡这种方法的优点和缺点，并决定它是否适合你的项目。如果你需要高级别的定制或希望避免 eject 的缺点，那么这种方法值得考虑。
