Есть ли способ получить меньшее генерирование кода из Babel?

Question

Я вижу, кто-то меньше, чем оптимальная генерация коды в ситуациях, как это:

const selectedReddit = (state = 'reactjs', action) => { 
    console.log(state, action); 
} 

, который преобразуется в это:

'use strict'; 
var selectedReddit = function selectedReddit() { 
    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'reactjs'; 
    var action = arguments[1]; 

    console.log(state, action); 
}; 

Который является довольно большим кодом раздуваться, когда он мог бы :

'use strict'; 
function selectedReddit(state, action) { 
    state = state || 'reactjs'; 

    console.log(state, action); 
}; 

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

Для использования 119 требуется 219 символов. Это примерно 45% раздувания кода.

Playground example

@lonesomeday отметил, что это не будет работать для state === false но

'use strict'; 
function selectedReddit(state, action) { 
    state = (state === undefined) ? 'reactjs' : state; 

    console.log(state, action); 
}; 

который весит в @ 160 байт, который составляет только 26% кода наворотов.

Я не уверен, почему вставляется var funcName = function funcName и почему все аргументы становятся аргументами [index].

Было бы здорово писать в ES6, но это почти кричит DONT DO IT! если ваш код будет передан для браузера таким образом.

Answer 1

Есть несколько вещей, которые происходят. Обратите внимание, что это осознанная спекуляция, подкрепленная определенными фактическими различиями в поведении между тем, что вы предлагаете, и тем, что генерирует Babel (что близко соответствует требованиям спецификации); Я не знаю реальной мотивации.

• Причина var f = function f(){} вместо function f(){} является то, что он избегает hoisting. Здесь неважно, но, например, console.log(f); var f = function f(a) { return a; }; отличается от console.log(f); function f(a) { return a; }: первый будет печатать undefined, второй будет печатать функцию.

• Он должен содержать имя функции в выражении, поскольку оно влияет на свойство .name функции в средах до ES6 (которые предшествуют имени функции). В среде ES6 const f = a => a; console.log(f.name); напечатает 'f'; в средах pre-ES6, var f = function(a) { return a; }; console.log(f.name); напечатает ''.

• Предположительно причиной он использует arguments вместо названных формальных параметров является то, что она влияет на .length свойство функции: ((a = 0, b) => {}).length === 0, в то время как (function f(a, b){...}).length === 2.

• Как указано в комментариях, state || 'reactjs' предоставит вам reactjs, если указано какое-либо значение ложности, а не только undefined.

• arguments.length проверка необходима в случае, если кто-то определяет 0 собственность на Object.prototype: Object.prototype[0] = 'evil'; (function f(){return arguments[0] !== 'undefined' ? arguments[0] : 'default'; })() вернет 'evil' вместо 'default'.

Вавилон исторически сгенерированный код ближе к тому, что вы написали, еще в 6-55 дней. Оказалось, что компилятор, который генерирует код, который составляет только , в основном семантически то же, что и написанный вами, является очень болезненным компилятором для использования.

Что касается вашего фактического вопроса, у Babel есть предустановка es2015-loose, но это не повлияет на код, который вы написали. В целом, значение генерации правильно код обычно перевешивает значение генерации более короткого кода.