Код рефакторинга в обеденный перерыв: начало работы с Codemods

Мы можем видеть VariableDeclaration под массивом body, который содержит наш const. Все VariableDeclarations имеют атрибут id, который содержит нашу важную информацию, такую ​​как имя и т. Д. Если мы строим кодовый модуль для переименования всех экземпляров foo мы можем использовать этот атрибут имени и перебирать все экземпляры, чтобы изменить имя.

Установка и использование

Используя инструменты и методы, описанные выше, мы теперь можем в полной мере воспользоваться преимуществами JSCodeshift. Поскольку JSCodeshift является модулем узла, мы можем установить его на уровне проекта или на глобальном уровне.

 npm install -g jscodeshift 

После установки мы можем использовать существующие кодовые модули с JSCodeshift. Мы должны предоставить некоторые параметры, чтобы сообщить JSCodeshift, чего мы хотим достичь. Основной синтаксис — это вызов jscodeshift с jscodeshift пути к файлу или файлам, которые мы хотим преобразовать. Важным параметром является местоположение преобразования (-t). Это может быть либо локальный файл, либо URL-адрес файла codemod. Параметр transform по умолчанию ищет файл transform.js в текущем каталоге.

Другие полезные параметры включают в себя пробный запуск (-d), который будет применять преобразование, но не обновлять файлы, и Verbose (-v), который будет выводить всю информацию о процессе преобразования. Преобразования — это кодовые модули, простые модули JavaScript, которые экспортируют функцию. Эта функция принимает следующие параметры:

• FILEINFO
• апи
• параметры

FileInfo содержит всю информацию о файле, обрабатываемом в данный момент, включая путь и источник. Api — это объект, который обеспечивает доступ к вспомогательным функциям JSCodeshift, таким как findVariableDeclarators и renameTo. Наш последний параметр — это параметры, которые позволяют нам передавать параметры от CLI до codemod. Например, если мы работали на сервере развертывания и хотели добавить версию кода во все файлы, мы могли бы передать ее через CLI jscodeshift -t myTransforms fileA fileB --codeVersion=1.2 . Параметры будут содержать {codeVersion: '1.2'} .

Внутри функции, которую мы выставляем, мы должны возвращать преобразованный код в виде строки. Например, если у нас есть строка кода const foo = 'bar' и мы хотим преобразовать ее, чтобы заменить const foo на const bar, наш код модуля будет выглядеть следующим образом:

 export default function transformer(file, api) { const j = api.jscodeshift; return j(file.source) .find(j.Identifier) .forEach(path => { j(path).replaceWith( j.identifier('bar') ); }) .toSource(); } 

Как видите, мы объединяем несколько функций вместе и в конце вызываем toSource() для генерации строки преобразованного кода.

Есть некоторые правила, которым мы должны следовать при возврате кода. Возвращение строки, отличной от ввода, приведет к успешному преобразованию. Если строка совпадает с вводом, то преобразование будет неудачным, и если ничего не будет возвращено, преобразование не потребуется. Затем JSCodeshift использует эти результаты при обработке статистики преобразований.

Существующие кодовые модули

В большинстве случаев разработчикам не нужно писать собственный код. Многие общие действия по рефакторингу уже превращены в кодовые модули.

Некоторые примеры включают js-codemod no-vars, который преобразует все экземпляры var в let или const , в зависимости от использования переменной. Например, пусть, если переменная переназначается позднее, и const, когда переменная никогда не переназначается.

Шаблонные литералы js-codemod заменят экземпляры конкатенации строк шаблонными литералами, например

 const sayHello = 'Hi my name is ' + name; //after transform const sayHello = `Hi my name is ${name}`; 

Как пишутся codemods

Мы можем взять кодовый код no-vars сверху и разбить код, чтобы увидеть, как работает сложный кодовый модуль.

 const updatedAnything = root.find(j.VariableDeclaration).filter( dec => dec.value.kind === 'var' ).filter(declaration => { return declaration.value.declarations.every(declarator => { return !isTruelyVar(declaration, declarator); }); }).forEach(declaration => { const forLoopWithoutInit = isForLoopDeclarationWithoutInit(declaration); if ( declaration.value.declarations.some(declarator => { return (!declarator.init && !forLoopWithoutInit) || isMutated(declaration, declarator); }) ) { declaration.value.kind = 'let'; } else { declaration.value.kind = 'const'; } }).size() !== 0; return updatedAnything ? root.toSource() : null; 

Приведенный выше код является ядром кодового модуля no-vars. Во-первых, фильтр запускается на всех переменных VariableDeclaration, включая var, let и const. Фильтр возвращает только объявления var. Которые передаются во второй фильтр, это вызывает пользовательскую функцию isTruelyVar . Это используется для определения характера переменной var (например, является ли переменная внутри замыкания или объявлена ​​дважды, или является объявлением функции, которое может быть поднято). Это определит, безопасно ли делать преобразование в var. Для каждого var, который проходит фильтр isTruelyVar , они обрабатываются в цикле forEach.

 for(var i = 0; i < 10; i++) { doSomething(); } 

 const isForLoopDeclarationWithoutInit = declaration => { const parentType = declaration.parentPath.value.type; return parentType === 'ForOfStatement' || parentType === 'ForInStatement'; }; 

 var foo = 'bar'; 

 var foo = 'bar'; foo = 'Foo Bar'; //Updated 

 import React from 'react'; class HelloWorld extends React.Component { static propTypes = { name: React.PropTypes.string, } ..... 

 import React, { PropTypes, Component } from 'react'; class HelloWorld extends Component { static propTypes = { name: PropTypes.string, } ..... 

 import React, { PropTypes } from 'react'; const HelloWorld = ({name}) => { ..... } HelloWorld.propTypes = { name: PropTypes.string }; 

 jscodeshift src/ -t transforms/proptypes.js