[英]Can I change the name of the public folder in create-react-app without ejecting?
I have a create-react-app project that I've set up (express and node connecting to a mysql db on the backend, in case that matters), and it was working just fine.我有一个我已经设置的 create-react-app 项目(express 和 node 连接到后端的 mysql 数据库,以防万一),它工作得很好。 I was told by my project manager that I need to change the name of the 'public' directory to 'static' (this directory holds/will hold my static files, such as my index.html and any media that I need to serve) in order for it to correctly deploy, however the only solution I've been able to find is to eject so I can go change the value of 'PUBLIC_URL'.
我的项目经理告诉我,我需要将“public”目录的名称更改为“static”(该目录保存/将保存我的静态文件,例如我的 index.html 和我需要提供的任何媒体)为了使其正确部署,但是我能找到的唯一解决方案是弹出,以便我可以更改“PUBLIC_URL”的值。 Currently I'm getting a error when I run 'npm run start' which logs: 'Could not find a required file.
目前,当我运行“npm run start”时出现错误,其中记录:“找不到所需的文件。 Name: index.html', and it is still searching in the public directory (which I have already changed to be called 'static').
名称:index.html',它仍在公共目录中搜索(我已将其更改为“静态”)。 Nowhere in my code am I referencing the public folder.
我的代码中没有任何地方引用公共文件夹。
From my understanding (someone please correct me if I am wrong), the PUBLIC_URL variable is set by create-react-app to be the path to the public folder.根据我的理解(如果我错了,请有人纠正我), PUBLIC_URL 变量由 create-react-app 设置为公共文件夹的路径。 I would like to change this to be the static folder, but the only solution I found that seemed like a possibility involved ejecting and then manually changing the variable.
我想将其更改为静态文件夹,但我发现的唯一解决方案似乎可能涉及弹出然后手动更改变量。 Is there a way to set that variable without ejecting, or to do some other workaround for changing that directory, and if not, what's the easiest way to get this to work (I'd prefer not ejecting, but will do it if it's the only way)...I really just need the directory to change names, and am finding myself frustrated with what I thought would be a fairly straightforward change.
有没有办法在不弹出的情况下设置该变量,或者做一些其他的解决方法来更改该目录,如果没有,最简单的方法是什么(我宁愿不弹出,但如果它是唯一的方法)...我真的只需要目录来更改名称,并且我发现自己对我认为相当简单的更改感到沮丧。
Thanks!谢谢!
edit: here's my package.json:编辑:这是我的 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"
}
}
PUBLIC_URL
is a variable you can set. PUBLIC_URL
是一个可以设置的变量。
You can set it in your console您可以在控制台中设置它
export PUBLIC_URL="/static"
Create react app will take it from process.env.PUBLIC_URL
创建反应应用程序将从
process.env.PUBLIC_URL
获取它
You can read more about it in the pull request thread to implement this functionality您可以在拉取请求线程中阅读更多相关信息以实现此功能
On Unix based systems you can simply move the build folder to a new one with the "mv" command.在基于 Unix 的系统上,您可以使用“mv”命令简单地将构建文件夹移动到一个新文件夹。
I have this as build script on my package.json:我有这个作为我的 package.json 上的构建脚本:
"build": "react-scripts build && rm -rf static && mv build static"
I build my project, then remove any precedent "static" folder and finally move my "build" folder to a new "static" folder.我构建我的项目,然后删除任何先例的“静态”文件夹,最后将我的“构建”文件夹移动到一个新的“静态”文件夹。
I was actually amazed by how simple it actually is.我真的很惊讶它实际上是多么简单。
Install react-app-rewired
using your package manager of choice.使用您选择的包管理器安装
react-app-rewired
。
Create a config-overrides.js
file at the root of your project在项目的根目录创建一个
config-overrides.js
文件
Paste the following code in 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
file at root of your project and write PUBLIC_URL='./static'
.env
文件并写入PUBLIC_URL='./static'
Hope this helps anyone trying to do the same.希望这可以帮助任何尝试这样做的人。
package.json.scripts (FOR WINDOWS) package.json.scripts(适用于 WINDOWS)
"start03": "set FOLDER=chapter03 && react-app-rewired start",
"build03": "set FOLDER=chapter03 && react-app-rewired build",
react-app-rewired 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;
},
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.