Отладочная сборка Vue.js Печать
Добавил(а) microsin   

У меня в веб-сервере 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.