задний план
АСТ это非常有用的.
Сегодня днем я слушал сообщение AST, сделанное братом в группе, и я полностью согласился.
Чтобы углубить впечатление, я написал резюме и, кстати, поделился им с вами, надеясь вдохновить своих друзей.
AST полезен, но доказательств этому нет, давайте рассмотрим несколько具体的案例.
Не говоря уж о:
Vue => ReactReact => Vue
метод преобразования кода,
Давайте посмотрим无痛升级旧版ReactИнструмент:
react-codemod
Кодовый адрес:GitHub.com/реагировать JS/Горячие…
Этот инструмент очень мощный, также очень удобно использовать, просто запустите строку команды:
npx react-codemod <transform> <path> [...options]
Это все средства АСТ.
Теперь давайте перейдем к сегодняшнему содержанию.
текст
Основное содержание этой статьи включает в себя:
- 1 Теория: концепции AST
- 2 Практика. Реализуйте инструмент преобразования кода с помощью AST, который преобразует
varПеревести вlet - 3 Практика: внедрить плагин Eslint с помощью AST, отключить консоль
- 4 Практика: реализовать подключаемый модуль Babel с помощью AST, отфильтровать отладчик
1. Основные понятия ТЧА
что такое АСТ
AST is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code.
В информатике,抽象语法а также抽象语法树По сути, это абстрактная синтаксическая структура исходного кода.树状表现形式.
Обычно используемые браузеры выполняют другие операции, такие как следующий анализ, путем преобразования кода js в абстрактное синтаксическое дерево.
Поэтому преобразование js в абстрактное синтаксическое дерево более удобно для анализа программы.
что может АСТ
- проверка синтаксиса кода
- проверка стиля кода
- форматирование кода
- подсветка кода
- сообщение об ошибке кода
- автодополнение кода
- и т.п.
Тройной топор AST
- Сгенерировать АСТ
- Пройдите и обновите AST
- Восстановите AST в исходный код
Для простоты понимания рассмотрим конкретный пример.
Вот, кстати, очень полезный сайт:astexplorer.net/
Вы, например:
Все виды информации, такие как объявления, переменные, типы и т. д., легко доступны.
И вот множество шаблонов плагинов на ваш выбор:
Очень удобно.
Давайте немного потренируемся на этом примере.
2. Практика. Реализуйте инструмент преобразования кода с помощью AST для преобразования var в let.
Например, теперь, чтобы провести рефакторинг старого проекта, вы хотите заменить все переменные в проекте на let, что бы вы сделали?
手动替换？или с инструментами一键替换？
А теперь научим вас трюку:一键替换大法.
Прежде всего, давайте представим большого убийцу:jscodeshift
jscodeshift — это инструмент Javscript Codemod, официальное объяснение Codemod:
Codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention.
jscodeshift также основан наesprima, это通过 path 可以很容易的在 AST 上遍历 node.
Теперь приступаем к замене var в проекте.
Во-первых, чтобыastexplorer.netНапишите код внутри.
Выбираем шаблон: jscodeshift
Официальный встроенный пример, переверните имя переменной:
Теперь мы собираемся изменить количество.Преимущество этого инструмента в том, что он может выделять сравнения в реальном времени.
Теперь найдитеkind === varобъект, замененный наlet:
Получите следующий код:
export default function transformer(file, api) {
const j = api.jscodeshift;
return j(file.source)
.find(j.VariableDeclaration, { kind: 'var'})
.forEach(path => {
const letStatement = j.variableDeclaration('let', path.node.declarations)
j(path).replaceWith(letStatement)
})
.toSource();
}
это тоже нормально:
path.node.kind = 'let'; // 传入的实际是一个引用
фактический эффект:
Готово!
Предположим, у меня в проекте есть несколько файлов, требующих одной и той же операции:
Простая установка:
sudo npm install -g jscodeshift
воплощать в жизнь:
jscodeshift -t transform.js ./src/demo.js --dry --print
используется здесь--dry 和 --print
--dryПосле добавления он не будет сразу перезаписывать исходный файл вновь сгенерированным кодом.
--printРаспечатай
В реальном проекте нужно独立的分支里операции, после вновь сгенерированного кода вам необходимо再检查检查,review没有问题Только после этого можно сливать.
3. Реализовать плагин Eslint с помощью AST, отключить консоль
Аналогично предыдущему, мы также можем сделать плагин eslint, функция также очень проста:检查到使用console的时候就报错.
Ожидаемый эффект:
// Do not use console methods (at 1:9)
console.log('haha')
// --------^
Мы выбираем это времяbabel-eslintтрафарет.
Код:
const disallowMethods = ["log", "info", "warn", "error", "dir"];
export default function(context) {
return {
Identifier(node) {
const isConsoleMethod =
disallowMethods.includes(node.name) &&
node.parent.type === "MemberExpression" &&
node.parent.object.name === "console";
if (!isConsoleMethod) return;
context.report({
node,
message: "Do not use console methods"
});
}
};
}
фактический эффект:
Просто и эффективно.
Но если вам приходится выполнять какие-то хитрые операции, например настройку лога, то этого делать не обязательно.
Наконец, вы можете обернуть этот код в полноценный плагин:
Научить вас писать плагины Eslint
Вы можете заниматься самостоятельно.
4. Реализуйте подключаемый модуль Babel, используя AST для фильтрации отладчиков.
Последний - фильтровать отладчик в исходном коде, Transform выбираемbabelv7
Этот плагин, мы ожидаем, что эффект будет:
var a = 1
debugger
function test() {
debugger
a++
}
debugger
прибыть:
var a = 1;
function test() {
a++;
}
Это тоже очень полезная функция.
Код:
export default function (babel) {
const {
types: t
} = babel;
return {
name: "ast-transform", // not required
visitor: {
DebuggerStatement(path) {
path.remove()
}
}
};
}
фактический эффект:
Суммировать
Контента наверное столько, сложностей нет, акцент делается на рассказ理论和入门.
Студенты, не владеющие AST, я надеюсь, что эта статья поможет вам.
Будет позжеAST在我们实际项目中的应用, я тоже напишу实战篇, Следите за обновлениями!
над.
дальнейшее чтение
Woohoo.topthem.com/JavaScript/…
наконец
Если вы найдете этот контент полезным, вы можете подписаться на мою официальную учетную запись «Front-end e Advanced» и учиться вместе.