Por qué puedes prescindir de Babel

Para los futuros alumnos del curso "JavaScript Developer. Básico" hemos preparado una traducción del material.



También invitamos a todos al seminario web abierto "Código como proyecto: configuración de un entorno para el desarrollo de JavaScript". En el webinar, los participantes, junto con un experto, revisarán las principales herramientas que ayudan a hacer el código mejor y más limpio: más bonito, eslint, ronco.

---

En estos días, los desarrolladores de aplicaciones para el usuario todavía dedican mucho tiempo a preparar y ajustar el software en exceso. Algunos perciben a Babel como una necesidad, pero pretendo demostrarles que no lo es.

Después de leer este artículo, comprenderá:

• cómo averiguar qué navegadores realmente requieren soporte adicional según cada caso.

  
  
  
  
  

• Visual Studio Code, Babel.

  
  
  
  
  

• , .

  
  
  
  
  

Babel ?

Babel — , JavaScript . , JSX, .

API ECMAScript. . : ? .

, , . (Transpiling — : transforming — compiling — ) . . ().

(transpiling) (polyfilling)

(Transpiling) — , , , .

let



:

// the new syntax `let` was added in ECMAScript 2015 aka ES6
let x = 11;

// `let` transpiles to the old syntax `var` if your transpiler target was ES5
var x = 11;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

(Polyfilling) — , API .

. , (polyfill) isNaN



:

// check if the method `isNaN` exists on the standard built-in `Number` object
if (!Number.isNaN) {
  // if not we add our own version of the native method newer browsers provide
  Number.isNaN = function isNaN(x) {
    return x !== x;
  };
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

core-js.

, , . , , .

№1:

, , , . , .

— , . Internet Explorer, -.

, . , . Microsoft Edge, , , V8, Chrome, .

, , .

1. ?

- , , . , . JavaScript- , , .

, , . . , , IE11 (Internet Explorer 11), web-literate ( ) .

, . , , ?

, . , , , ?

2. ?

API (Application Programming Interfaces) , . .

ES5 (ECMAScript) XMLHttpRequest()



, Babel, - .

3. ?

Can I use ( ), . , , , Browserlist ( ).

№ 2: eslint-plugin-compat

(transpiling) , - , . , :

• (transpilers). .

  
  
  
  
  

• , , (polyfill). 

  
  
  
  
  

, , .

, , Babel . .

, (transpiled).

(transportation) console.assert



( ), , , . eslint-plugin-compat



, linting (Linting — , linter, , , , , ).

test.js

// test nullish coalescing - return right side when left side null or undefined
const x = null ?? "default string";
console.assert(x === "default string");

const y = 0 ?? 42;
console.assert(y === 0);

// test optional chaining - return undefined on non existent property or method
const adventurer = {
  name: "Alice",
  cat: {
    name: "Dinah",
  },
};

const dogName = adventurer.dog?.name;
console.assert(dogName === undefined);

console.assert(adventurer.someNonExistentMethod?.() === undefined);

// use browser API fetch, to check linting
fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => response.json())
  .then((json) => console.log(json));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

eslint env eslint-plugin-compat

API .

eslint (Eslint – , JavaScript) . env



 es2020



.

API eslint-plugin-compat



. Browserlist , Babel.

eslint-plugin-compat repo. browserlist defaults



. , .

browserlist?

Browserlist  , , .

, defaults browserlist. 

defaults



 — :

• > 0,5 ( , )

  
  
  
  
  

• ( " (not dead)" ) 

  
  
  
  
  

• Firefox ESR (Extended Support Release)

  
  
  
  
  

• “ (not dead)”  ( 24 ).

  
  
  
  
  

GitHub, , .

eslint-plugin-compat Visual Studio Code

.

npm install --save-dev eslint eslint-plugin-compat
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

package.json



.

"browserslist": [
    "defaults"
  ]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.eslintrc.json



.

{
  "extends": ["plugin:compat/recommended"],
  "env": {
    "browser": true,
    "es2020": true
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, VS Code ESLint.

API , browserlist



  package.json



, linting



. , ECMAScript , env .eslintrc.json



.

, eslint-plugin-compat



, .

IE 11



  —

— API fetch()



.

env



es6



.

nullish coalescing



, Es2020.

№ 3: Babel

, , Babel.

Babel (transpile) (polyfill)

- .

mkdir babel-test
cd babel-test
npm init -y
mkdir src dist
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

package.json



.

"browserslist": "defaults",
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

test.js



   src



, .

npx babel src --out-dir dist --presets=@babel/env
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , , .

node dist/test.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , fetch is not defined



, Node.js fetch()



. 

(transpiled) . .

"use strict";

var _ref, _, _adventurer$dog, _adventurer$someNonEx;

// test nullish coalescing - return right side when left side null or undefined
var x = (_ref = null) !== null && _ref !== void 0 ? _ref : "default string";
console.assert(x === "default string");
var y = (_ = 0) !== null && _ !== void 0 ? _ : 42;
console.assert(y === 0); // test optional chaining - return undefined on non existent property or method

var adventurer = {
  name: "Alice",
  cat: {
    name: "Dinah",
  },
};
var dogName =
  (_adventurer$dog = adventurer.dog) === null || _adventurer$dog === void 0
    ? void 0
    : _adventurer$dog.name;
console.assert(dogName === undefined);
console.assert(
  ((_adventurer$someNonEx = adventurer.someNonExistentMethod) === null ||
  _adventurer$someNonEx === void 0
    ? void 0
    : _adventurer$someNonEx.call(adventurer)) === undefined,
); // use browser API fetch, to check linting

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(function (response) {
    return response.json();
  })
  .then(function (json) {
    return console.log(json);
  });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Babel

:

• .

  
  
  
  
  

• Babel 36.8k GitHub .

  
  
  
  
  

:

• 
  
  
  
  

• (dependencies), (dev-dependencies). ( 269 )

  
  
  
  
  

• 39 , du -sh

  
  
  
  
  

• 5728 , find . - f | wc -l

  
  
  
  
  

swc (transpile) (polyfill)

Swc — Babel. Rust 20 . , , .

:

mkdir swc-test
cd swc-test
npm init -y
mkdir src dist
npm install --save-dev @swc/cli @swc/core browserslist
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

package.json



.

"browserslist": "defaults",
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.swcrc



  .

{
  "env": {
    "coreJs": 3
  },
  "jsc": {
    "parser": {
      "syntax": "ecmascript"
    }
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

src



, (transpile).

npx swc src -d dist
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , .

node dist/test.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

swc-transpiled ()  , :

var ref, ref1;
var ref2;
// test nullish coalescing - return right side when left side null or undefined
var x = (ref2 = null) !== null && ref2 !== void 0 ? ref2 : "default string";
console.assert(x === "default string");
var ref3;
var y = (ref3 = 0) !== null && ref3 !== void 0 ? ref3 : 42;
console.assert(y === 0);
// test optional chaining - return undefined on non existent property or method
var adventurer = {
  name: "Alice",
  cat: {
    name: "Dinah",
  },
};
var dogName =
  (ref = adventurer.dog) === null || ref === void 0 ? void 0 : ref.name;
console.assert(dogName === undefined);
console.assert(
  ((ref1 = adventurer.someNonExistentMethod) === null || ref1 === void 0
    ? void 0
    : ref1.call(ref1)) === undefined,
);
// use browser API fetch, to check linting
fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(function (response) {
    return response.json();
  })
  .then(function (json) {
    return console.log(json);
  });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

swc

:

• swc

  
  
  
  
  

• ( 43 )

  
  
  
  
  

:

• Babel

  
  
  
  
  

• 
  
  
  
  

: Google Closure Compiler TypeScript

Google Closure Compiler , , , . , (transpile) (polyfill). , — , .

TypeScript (transpile) core-js (polyfill) , , , .

. , , .

linting, . , (transpilation).

, SWC , Babel, . Google Closure Compiler TypeScript, .

LogRocket: -

LogRocket — , , . , , , , LogRocket , , . , , Redux, Vuex @ngrx/store.

Redux, LogRocket , JavaScript, , / + , . DOM (Document Object Model) HTML CSS, .

---

"JavaScript Developer. Basic".

« — JavaScript».