Плагин для простого поиска журналов приложений
Следующая статья взята из журнала Поттер
Краткое содержание
- Строительство окружающей среды
- Этапы реализации
- Подведем итог
Добиться эффекта
Часто мы console.log распечатываем журнал. Если редактор не поддерживает это должным образом, тогда журнал печати не знает, какой файл и какая строка печатается, поэтому нам нужно знать, какой файл и какая строка печатается в журнале, и, наконец, добиться эффекта, как показано ниже,
Настройка среды
- Инициализировать проект
npm init -y
- Установить зависимости
npm install @babel/core @babel/preset-env @babel/types babel-loader webpack webpack-cli -D
- Создавать каталоги и упаковывать файлы
- настроить webpack.config.js
Анализировать AST кода
Посмотрите на console.log("sum: sdf");, как это выглядит при конвертации в AST. Чтобы видеть более четко, мы отмечаем все кнопки выше, чтобы AST выглядел простым и понятным.
Формат выходного журнала консоли
- Случай 1:
console.log("sum: sdf");
- Случай 2:
console.log("sum: sdf","123");
- Случай 3:
console.log("123","sum: sdf" + "sdf");
Настройка синтаксического дерева AST
В соответствии со структурой AST различных форматов выходной консоли сравните и посмотрите, как настроить AST.
Согласно приведенному выше анализу AST, у нас есть идея реализации, которая заключается не в том, чтобы найти метод журнала в консоли, а затем добавить параметр в конце аргумента, чтобы написать файл исходного кода вывода журнала и выходная функция.
Реализовать плагин
Подведем итог
- Сначала проверьте структуру AST, а затем сравните структуру AST, чтобы получить представление о корректировке AST.
- Сочетание отладки + официальной документации для достижения функциональных деталей
Исходный код портала: 04-traceLogPos
Рекомендации
Выше: Если вы обнаружите какие-либо проблемы, пожалуйста, оставьте сообщение и укажите на них, и я исправлю их вовремя.
Спасибо, что прочитали. Добро пожаловать, чтобы подписаться на меня для получения дополнительных технических статей
