如何编辑 React 生产构建的 JSON 文件

Question

In my developer build I have a JSON file with one data, I want to be able to change that data in the production build. I used npm run build to make the build. And I can't find that JSON file. I'm making this website for someone so I want to make it easy to change the page content by using JSON.

// src/json/download.json
{
    "file" :  "download.png"
}

This is how I get the json file
const file = require("../json/download.json").file

const filePath = "download/" + file;

const Nav = () => {
    return (
        <Link className="dcm0cujv48 abled" to={filePath} target="_blank" download={file}>
            <p className="fs-14 fw-700 wspwho0gps">
                <i class="fas fa-cloud-download-alt fs-14"></i>
                Download
            </p>
            <p className="yb08fmpwlp"></p>
        </Link>
    )
}

Answer 1

you can check if you are in developement or production

function isProduction(){
return process.env.NODE_ENV === "production"
}

then in your code

const filePath = "download/" + isProduction() ? pathToProductionFile : pathToLocalFile;

then in your scripts you need to create another build scripts with the flag "NODE_ENV=production"

Or setup multiple .env files, check out https://www.npmjs.com/package/dotenv for example .env.local

file=download.png

and .env.production

file=production-download.png

then in your code you can use

process.env.file 

as a variable that holds the value of your file and will differ from local to production