在具有 32 个字符文件名限制的 esp32 上部署反应

Question

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

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

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

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

Answer 1

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

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

基本上，我创建了一个脚本，从 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='3[0;31m'
    NC='3[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(){}

在具有 32 个字符文件名限制的 esp32 上部署反应

Deploy react on an esp32 with 32 character file name limit

reactjs

webpack

spiffs

esp32