webpack 在esp32上部署react,文件名限制为32个字符

s5a0g9ez  于 2022-11-30  发布在  Webpack
关注(0)|答案(1)|浏览(157)

我想在esp32微控制器上的web服务器上部署一个react应用程序,以控制同一微控制器上的api。
Web服务器工作正常,可以发送文件和接收请求。唯一真实的的问题是react应用程序的文件名太长(即./build/static/js/988.78dc5abd.chunk.js),而esp32上的文件系统限制文件名不超过31个字符。
我试着通过编辑webpack.config.js来减少文件名,但似乎不再起作用了。我还试着把它捆绑在一个文件中,但我也不知道。增加文件名限制似乎也不可能。
有人知道我如何在文件系统上部署一个react应用程序,该文件系统的文件名仅限于32个字符吗?

cidc1ykv

cidc1ykv1#

编辑:实际上最好的方法是创建一个自定义的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(){}

相关问题