我可以在不弹出的情况下更改 create-react-app 中 public 文件夹的名称吗？

Question

我有一个已设置的 create-react-app 项目（express 和节点连接到后端的 mysql 数据库，以防万一），它工作得很好。我的项目经理告诉我，我需要将 'public' 目录的名称更改为 'static'（此目录 holds/will 包含我的静态文件，例如我的 index.html 和我需要提供的任何媒体）以便正确部署，但是我能找到的唯一解决方案是弹出，这样我就可以更改 'PUBLIC_URL' 的值。当前，当我运行 'npm run start' 记录时出现错误：'Could not find a required file. Name: index.html'，它仍在 public 目录中搜索（我已经将其更改为'static')。我的代码中没有任何地方引用 public 文件夹。

根据我的理解（如果我错了请纠正我），PUBLIC_URL 变量由 create-react-app 设置为 public 文件夹的路径。我想将其更改为静态文件夹，但我发现唯一可能涉及弹出然后手动更改变量的解决方案。有没有一种方法可以在不弹出的情况下设置该变量，或者做一些其他的变通方法来更改该目录，如果没有，最简单的方法是什么（我宁愿不弹出，但如果它是唯一的方法）...我真的只需要目录来更改名称，并且发现自己对我认为相当简单的更改感到沮丧。

谢谢！

编辑：这是我的 package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "PORT=8080 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Answer 1

在基于 Unix 的系统上，您只需使用 "mv" 命令将构建文件夹移动到一个新文件夹即可。

我在 package.json:

上将其作为 build 脚本

"build": "react-scripts build && rm -rf static && mv build static"

我构建我的项目，然后删除任何先例 "static" 文件夹，最后将我的 "build" 文件夹移动到新的 "static" 文件夹。

Answer 2

PUBLIC_URL 是您可以设置的变量。

您可以在控制台中设置

export PUBLIC_URL="/static"

创建 React 应用程序将从 process.env.PUBLIC_URL

您可以在 pull request thread 中阅读更多相关信息以实现此功能

Answer 3

我真的很惊讶它实际上是多么简单。

使用您选择的包管理器安装 react-app-rewired。
在项目的根目录下创建一个 config-overrides.js 文件
将以下代码粘贴到config-overrides.js

const path = require('path');
module.exports = {
    paths: function (paths, env) {
        // Changing public to static
        paths.appPublic = path.resolve(__dirname, 'static');
        paths.appHtml = path.resolve(__dirname, 'static/index.html');
        return paths;
    }
}

在项目的根目录下创建一个 .env 文件并写入 PUBLIC_URL='./static'

希望这对尝试做同样事情的人有所帮助。

Answer 4

package.json.scripts（对于 WINDOWS）

"start03": "set FOLDER=chapter03 && react-app-rewired start",
"build03": "set FOLDER=chapter03 && react-app-rewired build",

react-app-rewired

    const path = require('path');
    module.exports = {paths: function (paths, env) {

          const folder = process.env.FOLDER.trim()

           // Changing public to static
           paths.appPublic = path.resolve(`${ __dirname }/src/${ folder }/_public`)
           paths.appHtml = path.resolve(`${ __dirname }/src/${ folder }/_public/index.html`)
           paths.appIndexJs = path.resolve(`${ __dirname }/src/${ folder }/index.js`)
           paths.appBuild = path.resolve(`${ __dirname }/build/${ folder }`)

           return paths;
        },
    }

我可以在不弹出的情况下更改 create-react-app 中 public 文件夹的名称吗？

Can I change the name of the public folder in create-react-app without ejecting?

javascript

npm

reactjs

create-react-app