FĂĽr zukĂĽnftige Studenten des Kurses "JavaScript Developer. Basic" haben wir eine Ăśbersetzung des Materials vorbereitet.
Wir laden auch alle zum offenen Webinar "Code als Projekt - Einrichten einer Umgebung für die JavaScript-Entwicklung" ein. Während des Webinars werden die Teilnehmer zusammen mit einem Experten die wichtigsten Tools überprüfen, die dazu beitragen, den Code besser und sauberer zu machen - hübscher, eslint, heiser.
Heutzutage verbringen Front-End-Entwickler immer noch viel Zeit damit, Software zu überarbeiten und zu optimieren. Babel wird von manchen als Notwendigkeit wahrgenommen, aber ich möchte Ihnen zeigen, dass dies nicht der Fall ist.
Nachdem Sie diesen Artikel gelesen haben, werden Sie verstehen:
wie man von Fall zu Fall herausfindet, welche Browser wirklich zusätzliche Unterstützung benötigen.
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".