|
У меня в веб-сервере ESP-IDF используется Node.js на основе Vue 3, который собирается командой npm run build. Как выполнить отладочную сборку, где будет показан исходный код JavaScript?
Для отладочной сборки Vue.js, показывающей читаемый исходный код JavaScript, нужно настроить инструмент сборки, чтобы он не минифицировал и не искажал код, и генерировал карты исходников (source maps).
[Ключевые настройки в Vite]
Если используется Vue 3, то скорее всего, проект создан с помощью Vite. Основные настройки для отладки задаются в файле vite.config.js:
// vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'
export default defineConfig({ plugins: [vue()], build: { // 1. Отключаем минификацию и обфускацию minify: false, // 2. Указываем не разделять код на чанки rollupOptions: { output: { manualChunks: undefined, } }, // 3. Включаем генерацию source maps sourcemap: true }
})
[Альтернатива: Использование режима разработки]
Если вы отлаживаете код веб-сервера для микроконтроллера, например на основе компонента ESP-IDF [1], то для локальной отладки во время разработки не обязательно выполнять сборку для ESP32. Вместо этого можно:
1. Запустить проект на локальном компьютере командой npm run dev.
2. Веб-сервер ESP32 можно временно настроить так, чтобы он перенаправлял запросы на ваш локальный сервер разработки.
Это позволяет моментально видеть изменения в коде без пересборки и загрузки на устройство.
[Дополнительные настройки для отладки в браузере]
1. Отключите кэширование в браузере (в инструментах разработчика) во время тестирования.
2. Для отладки непосредственно в VS Code можно настроить конфигурацию запуска [2]. Однако это менее актуально для конечного устройства, такого как ESP32.
Реальный пример проекта, где приложение Vue.js развернуто на ESP32, показывает, что итоговый размер оптимизированного файла составляет около 86.5 КБ [3]. В режиме отладки (без минификации и с source maps) размер файлов будет значительно больше, и может не поместиться в ограниченную файловую систему (SPIFFS/LittleFS) вашего микроконтроллера. Для сравнения:
# Сборка с оптимизацией (без секции build в файле vite.config.js,
# показанной в примере выше):
$ npm run build
...
vite v5.4.14 building for production...
✓ 93 modules transformed.
dist/index.html 0.36 kB │ gzip: 0.23 kB
dist/assets/index-DnVUw_vK.css 231.93 kB │ gzip: 30.70 kB
dist/assets/index-DvibfdDm.js 186.47 kB │ gzip: 64.20 kB
✓ built in 726ms
# Сборка с отключенной оптимизацией:
$ npm run build
vite v5.4.14 building for production...
✓ 93 modules transformed.
dist/index.html 0.36 kB │ gzip: 0.24 kB
dist/assets/index-SW5sVrYA.css 232.80 kB │ gzip: 30.83 kB
dist/assets/index-zbWSGBCY.js 459.39 kB │ gzip: 101.82 kB │ map: 1,172.63 kB
✓ built in 838ms
Ошибка сборки образа исполняемого кода для ESP32-S3 из-за отключенной оптимизации проекта Vue.js:
$ idf.py flash monitor -p /dev/ttyACM0
Executing action: flash
Running ninja in directory ~/myweb_server/build
Executing "ninja flash"...
[0/1] Re-running CMake...
-- Building ESP-IDF components for target esp32s3
NOTICE: Using component placed at ~/esp/v5.4.1/esp-idf/examples/common_components/
protocol_examples_common for dependency "protocol_examples_common", specified
in ~/myweb_server/main/idf_component.yml
NOTICE:
Following dependencies have new versions available:
Dependency "espressif/json_generator": "1.1.2" -> "1.2.0"
Dependency "espressif/mdns": "1.9.0" -> "1.9.1"
Consider running "idf.py update-dependencies" to update your lock file.
...
-- Build web: 0
> web-demo@0.0.0 build
> run-p "build-only {@}" --
> web-demo@0.0.0 build-only
> vite build
vite v5.4.14 building for production...
transforming...
✓ 93 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html 0.36 kB │ gzip: 0.24 kB
dist/assets/index-SW5sVrYA.css 232.80 kB │ gzip: 30.83 kB
dist/assets/index-zbWSGBCY.js 459.39 kB │ gzip: 101.82 kB │ map: 1,172.63 kB
✓ built in 811ms
-- Create partition 'www' from ~/myweb_server/front/web-demo/dist
-- Create partition 'options' from ~/myweb_server/front/web-demo/dist
...
-- Configuring done (5.4s)
-- Generating done (0.3s)
-- Build files have been written to: ~/myweb_server/build
[3/13] cd ~/myweb_server/build/esp-idf/main && /h...56 --obj-name-len=64
--meta-len=4 --use-magic --use-magic-len
FAILED: esp-idf/main/CMakeFiles/spiffs_www_bin ~/myweb_server/build/esp-idf
/main/CMakeFiles/spiffs_www_bin
cd ~/myweb_server/build/esp-idf/main && ~/.espressif/python_env/idf5.4_py3.13_env
/bin/python ~/esp/v5.4.1/esp-idf/components/spiffs/spiffsgen.py 0x80000
~/myweb_server/front/web-demo/dist ~/myweb_server/build/www.bin --page-size=256
--obj-name-len=64 --meta-len=4 --use-magic --use-magic-len
Traceback (most recent call last):
File "~/esp/v5.4.1/esp-idf/components/spiffs/spiffsgen.py", line 431, in create_file
block.update_obj(contents_chunk)
~~~~~~~~~~~~~~~~^^^^^^^^^^^^^^^^
File "~/esp/v5.4.1/esp-idf/components/spiffs/spiffsgen.py", line 346, in update_obj
raise SpiffsFullError()
SpiffsFullError
During handling of the above exception, another exception occurred:
Traceback (most recent call last):
File "~/esp/v5.4.1/esp-idf/components/spiffs/spiffsgen.py", line 435, in create_file
raise SpiffsFullError
SpiffsFullError
During handling of the above exception, another exception occurred:
Traceback (most recent call last):
File "~/esp/v5.4.1/esp-idf/components/spiffs/spiffsgen.py", line 590, in < module>
main()
~~~~^^
File "~/esp/v5.4.1/esp-idf/components/spiffs/spiffsgen.py", line 582, in main
spiffs.create_file('/' + os.path.relpath(full_path, args.base_dir).replace('\\', '/'), full_path)
~~~~~~~~~~~~~~~~~~^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "~/esp/v5.4.1/esp-idf/components/spiffs/spiffsgen.py", line 446, in create_file
block = self._create_block()
File "~/esp/v5.4.1/esp-idf/components/spiffs/spiffsgen.py", line 395, in _create_block
raise SpiffsFullError('the image size has been exceeded')
SpiffsFullError: the image size has been exceeded
[1/1] cd ~/myweb_server/build/bootloader/esp-idf/...x0 ~/myweb_server/build/bootloader/bootloader.bin
Bootloader binary size 0x51f0 bytes. 0x2e10 bytes (36%) free.
[5/13] Linking C static library esp-idf/esp_app_format/libesp_app_format.a
ninja: build stopped: subcommand failed.
ninja failed with exit code 1, output of the command is in the ~/myweb_server/build/log/
idf_py_stderr_output_1085075 and ~/myweb_server/build/log/idf_py_stdout_output_1085075
Поэтому рекомендуемая схема работы:
1. Локальная разработка: используйте npm run dev и отладку на ПК.
2. Финальная сборка для устройства: только для готового кода используйте npm run build с настройками по умолчанию (минификацией) для загрузки на ESP32.
Если у вас на борту микроконтроллера достаточный объем flash, например установлена микросхема SPI flash на 16 мегабайт, то альтернативно можно оставить опции отладки, увеличив размер раздела www в таблице разделов проекта partitions.csv, например:
# ESP-IDF Partition Table
# Name, Type, SubType, Offset, Size, Flags
nvs, data, nvs, 0x9000, 0x4000,,
otadata, data, ota, 0xd000, 0x2000,,
phy_init, data, phy, 0xf000, 0x1000,,
ota_0, app, ota_0, 0x010000,0x400000,, # 4M
ota_1, app, ota_1, 0x410000,0x400000,, # 4M
# раздел www увеличен до 2M для отладки Vue.js:
www, data, spiffs, 0x810000,0x200000,,
# options 4K, сдвинут:
options, data, spiffs, 0xA10000,0x1000,,
[Ссылки]
1. ESP32 HTTP Server. 2. Debugging in VS Code site:vuejs.org. 3. Example Vue.js app deployment on ESP32. |