#javascript #webpack #babeljs #babel-loader
#javascript #webpack #babeljs #babel-загрузчик
Вопрос:
Я пытаюсь выяснить, как извлечь некоторую информацию из babel
процесса компиляции.
Более конкретно, когда я запускаю babel
(независимо от того, использую ли я Webpack babel-loader
, transformers от Test Framework, Babel CLI и т.д.) Мне нужно было бы извлечь некоторую информацию для каждого скомпилированного файла. Нравится:
- путь к файлу
- время, затраченное на компиляцию
- какие-либо другие метаданные?
Что я пробовал до сих пор
Плагин для измерения скорости для Webpack (ссылка)
Работает нормально, но обеспечивает время работы только загрузчиков Webpack. Нет информации об отдельных скомпилированных файлах.
Подключение к экземпляру компилятора / compilation Webpack
Я рассматривал возможность написания плагина Webpack для подключения к процессу компиляции, как описано здесь, но я не смог найти подходящих подключений для распознавания файла, обрабатываемого babel
.
Обновления
Я думаю, @kidroca указал правильное направление. Более конкретно, я понимаю, что wrapPluginVisitorMethod
опция Babel является ключом для подключения к процессу компиляции Babel.
Смотрите babel-minify
плагин синхронизации.
Связанные темы:
- https://github.com/babel/babel/issues/5340
- https://github.com/babel/babel/issues/2206
- https://github.com/babel/babel/pull/3659
- https://github.com/babel/minify/pull/93
- https://github.com/babel/babel/pull/3659
Обновления 28/04/18
В конце концов я попытался обернуть решение в инструмент, который я назвал babel-timing.
Комментарии:
1. Просто идея, вместо создания другого плагина, просто перехватите babel-loader.
2. ^ зачем останавливаться на загрузчике, перехватывайте
babel.transform
. По возможности перенесите свою логику измерения прямо в исходный код babel.3. Я определенно хотел бы найти решение, включающее только babel, чтобы иметь возможность измерять время компиляции независимо от окружающего инструментария.
4.
babel-minify
кажется, что для использования внутри babel лучше всего использовать плагин-тайминг и бенчмарк. Я не уверен,wrapPluginVisitorMethod
можно ли передать из внешней конфигурации, например. babelrc. Если это возможно, это позволит вам интегрировать этот тест / анализ без внесения изменений в код babel и запустить его для любого проекта, использующего babel
Ответ №1:
Вы можете использовать @babel/core
и babel.transformSync(code)
, которые будут возвращать информацию об абстрактном синтаксическом дереве (AST) наряду с некоторыми другими данными. И вы также можете добавить некоторую логику для измерения производительности этого метода
Я настроил минимальный репозиторий и немного поиграл с ним сам: https://github.com/kidroca/babel-meta
В принципе, вы можете запустить npm run analyze-file ./es6-src/es6-module.js
или npm run analyze-dir ./es6-src/es6-module.js
и проверить результаты
Это вернет:
{
"filename": "/full/path/to/src/file.js",
"cwd": "current/dir",
"ast": "ast information json - lines, comments, and other info",
"executionTime": "execution time in ms",
/* a lot of other info */
}
Вы можете изменить analyze.js
файл, чтобы отфильтровать необходимую вам информацию
Вы можете изменить .babelrc
файл, чтобы управлять преобразованием и добавлять / удалять плагины