使用create-react-app时使用自定义生成输出文件夹 [英] Use custom build output folder when using create-react-app

问题描述

Facebook提供了 create-react-app 命令以构建React应用。当我们运行 npm run build 时，我们会在 / build 文件夹中看到输出。

Facebook provides a create-react-app command to build react apps. When we run npm run build, we see output in /build folder.

npm run build

npm run build

将要生产的应用程序生成到build文件夹。它正确地将
捆绑在生产模式下的React并优化了构建，以获得最佳的
性能。

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

构建被缩小，文件名包含哈希。您的应用程序
已准备好进行部署！

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

我们如何使用自定义文件夹代替 /构建的输出？谢谢。

How can we use custom folder instead of /build for the output? Thanks.

推荐答案

您不能使用当前配置选项更改生成输出文件夹的名称。

You can't change the build output folder name with the current configuration options.

此外，您不应该这样做。这是 create-react-app 背后的哲学的一部分 ：他们说 Convention over Configuration 。

Moreover, you shouldn't. This is a part of the philosophy behind create-react-app: they say Convention over Configuration.

如果您确实需要重命名文件夹，我会看到两个选项：

If you really need to rename your folder, I see two options:

1. 在构建过程完成后，立即编写一条命令，将构建文件夹内容复制到另一个文件夹中想要。例如，您可以尝试复制文件 npm软件包或类似的东西。

1. Right after the build process finishes, write a command that copies the build folder content to another folder you want. For example you can try the copyfiles npm package, or anything similar.

您可以尝试弹出create-react-app 并进行配置。

You could try to eject create-react-app and tweak the configuration.

如果您对构建工具和配置选择不满意，则可以随时弹出。此命令将从项目中删除单个构建依赖项。

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

相反，它将复制所有配置文件和可传递依赖项（Webpack，Babel，ESLint等）进入您的项目，以便您完全控制它们。除弹出命令以外的所有命令仍然可以使用，但是它们将指向复制的脚本，因此您可以对其进行调整。此时，您是一个人。

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

但是，请务必注意，这是一种单向方式操作。弹出后，您将无法返回！您放弃所有以后的更新。

However, it is important to note that this is a one-way operation. Once you eject, you can’t go back! You loose all future updates.

因此，我建议您不要使用自定义文件夹命名，如果可能的话。尝试使用默认命名。如果没有选择，请尝试＃1。如果仍然无法满足您的特定用例，并且您真的选择不了，请探索＃2。祝你好运！

Therefore, I'd recommend you to not use a custom folder naming, if possible. Try to stick with the default naming. If not an option, try #1. If it still doesn't work for your specific use-case and you're really out of options - explore #2. Good luck!

这篇关于使用create-react-app时使用自定义生成输出文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！