Babel
Plugins, Presets, Polyfills, Pourquoi ?
ES2015
AST
JS
Plugins
ES2015
AST
JS
AST'
plugins
var a = () => {}
"use strict";
var a = function a() {};
async function lol(){}
"use strict";
var lol = function () {
var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
return function lol() {
return _ref.apply(this, arguments);
};
}();
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
Object.assign({}, {lol: 5})
var a = () => {}
"use strict";
Object.assign({}, { lol: 5 });
var a = function a() {};
Transformation ou pas transformation ?
Deux options:
1. Liste de plugin manuelle
2. Presest
Avant
Maintenant:
{
"presets": [
["env", {
"targets": {
"browsers": [ ">0.25%", "not ie 11", "last 2 Safari"]
}
}]
]
}
Et les polyfills alors ?
import "babel-polyfill"
Object.assign({}, {lol: 5})
var a = () => {}
require("core-js/modules/es6.typed.array-buffer");
require("core-js/modules/es6.typed.int8-array");
require("core-js/modules/es6.typed.uint8-array");
require("core-js/modules/es6.typed.uint8-clamped-array");
require("core-js/modules/es6.typed.int16-array");
require("core-js/modules/es6.typed.uint16-array");
require("core-js/modules/es6.typed.int32-array");
require("core-js/modules/es6.typed.uint32-array");
require("core-js/modules/es6.typed.float32-array");
require("core-js/modules/es6.typed.float64-array");
require("core-js/modules/es6.map");
require("core-js/modules/es6.set");
require("core-js/modules/es6.weak-map");
require("core-js/modules/es6.weak-set");
require("core-js/modules/es6.reflect.apply");
require("core-js/modules/es6.reflect.construct");
require("core-js/modules/es6.reflect.define-property");
require("core-js/modules/es6.reflect.delete-property");
require("core-js/modules/es6.reflect.get");
require("core-js/modules/es6.reflect.get-own-property-descriptor");
require("core-js/modules/es6.reflect.get-prototype-of");
require("core-js/modules/es6.reflect.has");
require("core-js/modules/es6.reflect.is-extensible");
require("core-js/modules/es6.reflect.own-keys");
require("core-js/modules/es6.reflect.prevent-extensions");
require("core-js/modules/es6.reflect.set");
require("core-js/modules/es6.reflect.set-prototype-of");
require("core-js/modules/es6.promise");
require("core-js/modules/es6.symbol");
require("core-js/modules/es6.object.assign");
require("core-js/modules/es6.object.is");
require("core-js/modules/es6.object.set-prototype-of");
require("core-js/modules/es6.function.name");
require("core-js/modules/es6.string.raw");
require("core-js/modules/es6.string.from-code-point");
require("core-js/modules/es6.string.code-point-at");
require("core-js/modules/es6.string.repeat");
require("core-js/modules/es6.string.starts-with");
require("core-js/modules/es6.string.ends-with");
require("core-js/modules/es6.string.includes");
require("core-js/modules/es6.regexp.flags");
require("core-js/modules/es6.regexp.match");
require("core-js/modules/es6.regexp.replace");
require("core-js/modules/es6.regexp.split");
require("core-js/modules/es6.regexp.search");
require("core-js/modules/es6.array.from");
require("core-js/modules/es6.array.of");
require("core-js/modules/es6.array.copy-within");
require("core-js/modules/es6.array.find");
require("core-js/modules/es6.array.find-index");
require("core-js/modules/es6.array.fill");
require("core-js/modules/es6.array.iterator");
require("core-js/modules/es6.number.is-finite");
require("core-js/modules/es6.number.is-integer");
require("core-js/modules/es6.number.is-safe-integer");
require("core-js/modules/es6.number.is-nan");
require("core-js/modules/es6.number.epsilon");
require("core-js/modules/es6.number.min-safe-integer");
require("core-js/modules/es6.number.max-safe-integer");
require("core-js/modules/es6.math.acosh");
require("core-js/modules/es6.math.asinh");
require("core-js/modules/es6.math.atanh");
require("core-js/modules/es6.math.cbrt");
require("core-js/modules/es6.math.clz32");
require("core-js/modules/es6.math.cosh");
require("core-js/modules/es6.math.expm1");
require("core-js/modules/es6.math.fround");
require("core-js/modules/es6.math.hypot");
require("core-js/modules/es6.math.imul");
require("core-js/modules/es6.math.log1p");
require("core-js/modules/es6.math.log10");
require("core-js/modules/es6.math.log2");
require("core-js/modules/es6.math.sign");
require("core-js/modules/es6.math.sinh");
require("core-js/modules/es6.math.tanh");
require("core-js/modules/es6.math.trunc");
require("core-js/modules/es7.array.includes");
require("core-js/modules/es7.object.values");
require("core-js/modules/es7.object.entries");
require("core-js/modules/es7.object.get-own-property-descriptors");
require("core-js/modules/es7.string.pad-start");
require("core-js/modules/es7.string.pad-end");
require("core-js/modules/web.timers");
require("core-js/modules/web.immediate");
require("core-js/modules/web.dom.iterable");
require("regenerator-runtime/runtime");
Object.assign({}, { lol: 5 });
var a = function a() {};
- a utiliser dans une app, pas dans une lib
- à n'importer qu'une seule fois
- ne modifie pas l'AST (enfin que des ajouts quoi)
Polyfills et presets ?
La fameuse option useBuiltins
useBuiltins permet de limiter ce qu'importe babel-polyfill via le preset d'env
useBultins sans babel-polyfill ne fait rien
Babel
By whyl_
Babel
- 836