For future students of the course "JavaScript Developer. Basic" we have prepared a translation of the material.
We also invite everyone to the open webinar "Code as a Project - Setting Up an Environment for JavaScript Development". At the webinar, the participants, together with an expert, will review the main tools that help to make the code better and cleaner - prettier, eslint, husky.
These days, front-end developers still spend a lot of time over-preparing and tweaking software. Babel is perceived by some as a necessity, but I intend to show you that it is not.
After reading this article, you will understand:
how to figure out which browsers really require additional support on a case-by-case basis.
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;
};
}
, , . , , .
№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
— :
> 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
}
}
API , browserlist
package.json
, linting
. , ECMAScript , env .eslintrc.json
.
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
:
( 43 )
:
: 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".