在 esp32 上部署 React，文件名限制为 32 个字符

Question

我想在 esp32 微控制器上的 Web 服务器上部署一个 React 应用程序，以控制同一微控制器上的 api。

Web 服务器正在工作，可以发送文件和接收请求。唯一真正的问题是React应用程序的文件名太长（即./build/static/js/988.78dc5abd.chunk.js），而esp32上的文件系统限制文件名不超过31个字符。

我尝试通过编辑 webpack.config.js 来减少文件名，但这似乎不再起作用。我还尝试将其捆绑在一个文件中，但我也无法弄清楚。增加文件名限制似乎也是不可能的。

有谁知道如何在文件名限制为 32 个字符的文件系统上部署 React 应用程序？

Answer 1

编辑：实际最好的方法是创建一个自定义的 React Webpack 并使用结果制作一个 tarball

我为这个问题创建了一个非常糟糕的解决方案，所以如果你遇到这篇文章，请确保你已经用尽了所有在尝试复制此内容之前，还有其他选项：

基本上，我创建了一个脚本，以递归方式从 React 应用程序构建目录（rapp/build）中获取所有文件，并将它们全部复制到带有数字和正确扩展名的数据文件夹中（因此浏览器选择文件类型）：

#!/bin/bash

cd rapp/build

i=0

#clear index and data folder
rm -rf ../../data/*
> ../../data/index


#grab all files and assign number
for f in $(find . -type f -printf '%P\n');
do 
    #pretty output
    RED='\033[0;31m'
    NC='\033[0m' # No Color


    #grab extension
    filename="${f##*/}"
    extension="${filename##*.}"

    #copy file with number
    cp $f "../../data/$i.$extension"



    #add original to index
    echo $f >> ../../data/index 
    #add copy to index
    echo $i.$extension >> ../../data/index 

    echo -e $i.$extension ${RED} mapped to ${NC} $f
    i=$((i+ 1))

done

然后我创建了一个 Web 服务器，它将自动将所有请求重定向到复制的编号文件：

#include "WiFi.h"
#include "SPIFFS.h"
#include "ESPAsyncWebServer.h"
#include <string> 

const char* ssid = "abcdef";
const char* password =  "";

AsyncWebServer server(80);

void mapRedirect(){

    File file = SPIFFS.open("/index");
    if (!file) {
        Serial.println("Failed to open file for reading");
        return;
    }

    Serial.println("Contents of file:");

    int i=0;
    while (file.available()) {
        String orig=file.readStringUntil('\n');
        String cop=file.readStringUntil('\n');

        Serial.print(cop);
        Serial.print("\tmapped to\t");
        Serial.println(orig);

        server.on(String("/"+orig).c_str(), HTTP_GET, [cop](AsyncWebServerRequest *request){


                request->redirect("/"+String(cop));
                }
                );

        i++;

    }


    file.close();


}

void setup(){
    Serial.begin(115200);

    if(!SPIFFS.begin(true)){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
    }

    WiFi.softAP(ssid,password);


    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
            request->redirect("/index.html");
            });

    server.serveStatic("/",SPIFFS,"/");


    //redirect react files to coressponding mappings (spiffs character file name limit)
    mapRedirect();


    server.onNotFound([](AsyncWebServerRequest *request){

            request->send(404, "text/plain", "The content you are looking for was not found.");
            });



    server.begin();


}


void loop(){}