Edited at

babel の preset-stage-n の内訳

More than 1 year has passed since last update.

babel の plugin の中に preset-stage-0, preset-stage-1, preset-stage-2, preset-stage-3 というのがあって「入れとくと未来の機能が使えそう。便利」という感じで使うと死にそうなので、中身が何なのか調べたメモ。

結論としては、preset-stage-n という形で入れるのではなくて、欲しい機能の preset を明示的に指定するのが良さそう。


preset-stage-0


transform-do-expressions

let b = do {

let a = 1;
a++;
a;
}; //=> 2


transform-function-bind

let a = [1,2,3];

let map = Array.prototype.map;
let forEach = Array.prototype.forEach;

// ES6 まではこうやってた
forEach.call(map.call(a, (n) => n * 2), (n) => console.log(n));
// 2
// 4
// 6

// Function Bind Syntax を使うとメソッドチェインっぽくできる
a::map((n) => n * 2)::forEach((n) => console.log(n));
// 2
// 4
// 6


preset-stage-1


transform-class-constructor-call

class Hoge {

constructor() {
this.n = 99;
}

call constructor() {
return 100;
}
}

new Hoge().n; //=> 99
Hoge(); //=> 100


追記


  • (Deprecated)になってる


transform-export-extensions


fuga.js

export var a = {

hoge: 1
};


hoge.js

// ES2015 だとこれができない

export * as b from './fuga.js';


piyo.js

import {b} from './hoge.js';

b.a.hoge; //=> 1



追記1


This spec has been withdrawn in favor of the equivalent micro-proposals: export ns from and export default from.


とのこと


追記2


preset-stage-2


syntax-dynamic-import


This plugin only allows Babel to parse this syntax. If you want to transform it then see dynamic-import-webpack or dynamic-import-node.


とのこと

require("./template/" + name + ".jade");


transform-class-properties

class Base {

hoge = 0;
}

class Hoge extends Base {
hoge;
}

new Hoge(); //=> Hoge { hoge: 0 }


transform-decorators


追記


  • disabled pending proposal update ってなってる


Decorators are not currently supported

Decorators are disabled in Babel v6, pending a proposal update – see babel/babel#2645.

Until Babel officially supports decorators again, you might want to try the third-party transform-decorators-legacy plugin, or use Babel v5.


なるほど


preset-stage-3


transform-object-rest-spread

let [a, b, ...c] = [1, 2, 3, 4, 5];

a; //=> 1
b; //=> 2
c; //=> [ 3, 4, 5 ]

// みたいな感じで

let { x, y, ...z } = { x: 1, y: 2, z: 99, a: 3, b: 4};
x; //=> 1
y; //=> 2
z; //=> { z: 99, a: 3, b: 4 }

// ってできる


transform-async-generator-functions



  • async function* hoge() {} みたいなやつへの対応


  • for - await - of みたいなやつへの対応

for await (const line of readLines(filePath)) {

console.log(line);
}



async function* genAnswers() {

var stream = [ Promise.resolve(4), Promise.resolve(9), Promise.resolve(12) ];
var total = 0;
for await (let val of stream) { // val を待ってくれる?
total += val;
yield total;
}
}

function forEach(ai, fn) {
return ai.next().then((r) => {
if (!r.done) {
fn(r);
return forEach(ai, fn);
} else {
return null;
}
});
}

var output = 0;
forEach(genAnswers(), val => output += val.value).
then(() => console.log(output)); // 4+13+25 => 42


stage 4 入りしてるっぽいやつら


trailing-commas, async, exponentiation will be removed in the next major since they are stage 4 already



syntax-trailing-function-commas


  • 引数一覧のケツにカンマ付いてても怒らないでくれる優しさの提案

function hoge(

a,
b,
c, // ok
) { /* ... */ }


transform-async-to-generator

function bar(msg) {

return new Promise((res, rej) => {
setTimeout(
() => {
console.log(msg);
res();
}, 10
);
});
}

async function hoge() {

await bar(1);
await bar(2);
await bar(3);
console.log('finished');
}

hoge();
//=> 1
//=> 2
//=> 3
//=> finished 待ってから終わってくれる

// async await 無い場合

function fuga() {
bar(1);
bar(2);
bar(3);
console.log('finished');
}

fuga();
//=> finished 一足お先に終わっちゃう
//=> 1
//=> 2
//=> 3


transform-exponentiation-operator

let n = 2**10; //=> 1024

n **= 2
n //=> 1048576