Используйте компилятор webpack или node.js для переноса всех функций и методов.

Технология для этого должна быть доступна, я просто не знаю, как ее подключить. Это не предназначено для использования в производстве, поэтому я понимаю, как это повлияет на производительность, в основном это просто идея об отладке, над которой я работаю. Это будет для всех или некоторых файлов в проекте, а не только для одного файла.

Я хочу:

  1. Используйте прекомпилятор, такой как webpack или grunt, я не хочу, чтобы он был в реальных файлах.
  2. Найдите все функции/методы. (Методы прототипов тоже были бы хороши)
  3. Оберните эти функции простой функцией.

Простой пример:

ВВОД:

const obj = {
    func: function(){return 'obj.Func'}
};

function B(a,b,c){
    const innerFunc = (e,f,g)=>{
        return 'innerFunc'
    };
    return
}

---- Проходит через компилятор ---

ВЫВОД:

    const wrapper = (arguments,cb)=>{
        // Spread arguments etc.
        // this is pseudo code but you get the idea
        console.log('Hey this function ran!')
        return cb(arguments[0],arguments[1],arguments[2]);
    }

    const obj = {
        func: function(){return wrapper(arguments,()=>{ return 'obj.Func'})}
    };

    function B(a,b,c){
        return wrapper(arguments,(a,b,c)=>{
            const innerFunc = (e,f,g)=>{
                return wrapper(arguments,(e,f,g)=>{
                    return 'innerFunc
                });
            };
        });
    }

Я просто не совсем уверен, где искать, чтобы попытаться сделать это. Я предполагаю, что Babel уже идентифицирует все подобное, а также eslint и т. д.


webpack javascript babeljs gruntjs precompile
person tbh__    schedule 25.08.2019    source источник
comment
На какую помощь вы здесь рассчитываете? Я сделал аналогичный инструмент, используя плагин babel для веб-пакета, поэтому я могу подтвердить, что это определенно возможно.   -  person Abulafia    schedule 28.08.2019
comment
Было бы полезно почти просто регулярное выражение для поиска функций? Или ряд если, просто действительно нужен способ их идентифицировать? У вас есть репо того, что вы сделали?   -  person tbh__    schedule 28.08.2019
comment
Да, хотя в настоящее время это закрыто, но я рад добавить вас, если у вас есть учетная запись gitlab. В духе SO я приведу скелетный ответ о том, как использовать babel для определения методов и их обновления.   -  person Abulafia    schedule 28.08.2019

Ответы (1)


arrow_upward
3
arrow_downward

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

Сначала вам нужно будет прочитать

https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md

Затем вы создадите трансформер Babel, который выглядит примерно так.

module.exports = function transform(babel) {
  const t = babel.types;
  return {
    visitor: {
      FunctionDeclaration(path) {
        // you will use const t as defined above in here to
        // create your wrapper and manipulate the current method.
        // It essentially gives you access to babel types.
        // The path variable allows you get meta data about the function
        // and dive deeper into it.
      }
    }
  }
}

Важным моментом является то, что посетитель работает с «FunctionDeclaration» — то есть с блоками методов/функций, которые вы хотите изменить. Затем вы замените функцию новым идентификатором, который будет обертывать исходный метод, как вы указали в своем вопросе.

Это известно как загрузчик, и вам нужно будет добавить его в конфигурацию вашего веб-пакета с любыми другими загрузчиками, которые вы можете использовать. Он будет манипулировать вашим кодом до того, как он будет объединен webpack.

Может быть проще просто внедрить то, что вы хотите, чтобы ваш код-оболочка делал непосредственно в каждую функцию. Например, если вы просто хотите в console.log имя функции всякий раз, когда она запускается, этот преобразователь добьется этого:

module.exports = function transform(babel) {
  const t = babel.types;
  return {
    visitor: {
      FunctionDeclaration(path) {
        const args = [t.stringLiteral(`${path.node.id.name} called`)];
        const expression = t.callExpression(t.memberExpression(t.identifier('console'), t.identifier('log')), args);
        path.get('body').unshiftContainer('body', expression);
      }
    }
  }
}

Это преобразует:

function bobbins(arg1, arg2) {
  return arg1 + arg2;
}

to 

function bobbins(arg1, arg2) {
  console.log("bobbins called");
  return arg1 + arg2;
}
person Abulafia    schedule 28.08.2019
comment
Я попробую, это звучит как именно то, что я искал. Спасибо! Я принял ответ. - person tbh__; 28.08.2019
comment
пока кажется многообещающим решением, дополнительное примечание для всех, кто ищет подобную вещь, вы в основном создаете файл выше, а затем ссылаетесь на него в своем файле .babelrc stackoverflow.com/questions/36368788/ заняло, может быть, 10 минут, и транспилированный код выглядит так, как будто он был упакован. Следующий шаг: я хочу посмотреть, соответствует ли он классам и т. д. - person tbh__; 31.08.2019
comment
пришлось немного настроить функцию для некоторых крайних случаев ... все еще кажется, что генераторы и свойства класса доставляют некоторые проблемы, но я просто игнорирую их сейчас. В целом, если кто-то ищет подобное решение, это отличное место для начала. - person tbh__; 02.09.2019