Pourquoi vous pouvez vous passer de Babel

Pour les futurs étudiants du cours "Développeur JavaScript. Basique", nous avons préparé une traduction du matériel.



Nous invitons également tout le monde au webinaire ouvert "Code as a Project - Setting Up an Environment for JavaScript Development". Lors du webinaire, les participants, avec un expert, passeront en revue les principaux outils qui aident à rendre le code meilleur et plus propre - plus joli, eslint, husky.

---

De nos jours, les développeurs frontaux passent encore beaucoup de temps à sur-préparer et à peaufiner les logiciels. Babel est perçu par certains comme une nécessité, mais j'ai l'intention de vous montrer que ce n'est pas le cas.

Après avoir lu cet article, vous comprendrez:

• comment déterminer quels navigateurs nécessitent vraiment une assistance supplémentaire au cas par cas.

  
  
  
  
  

• 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».