JavaScript ES6 Transpiling with Webpack and Babel

By Jonathan Hassall on

Awe­some to final­ly get to use Web­pack and Babel to tran­spile some ES6 code to vanil­la JavaScript that even Inter­net Explor­er can use:

ES6:

1
2
3
4
5
6
7
8
9
10
11
export func­tion arrowTest() {
var mate­ri­als = [
‘Hydro­gen’,
‘Heli­um’,
‘Lithi­um’,
‘Beryl­li­um’
];

// expect­ed out­put: Array [8, 6, 7, 9]
return mate­ri­als.map(mate­r­i­al => mate­r­i­al.length);
}

Tran­spiled:

1
2
3
4
5
6
7
func­tion arrowTest() {
var mate­ri­als = [‘Hydro­gen’, ‘Heli­um’, ‘Lithi­um’, ‘Beryl­li­um’]; // expect­ed out­put: Array [8, 6, 7, 9]

return mate­ri­als.map(func­tion (mate­r­i­al) {
return mate­r­i­al.length;
});
}

Use­ful links: