JavaScript ES2020 в React Project

Новая спецификация JavaScript принесет некоторые новые интересные функции и исправит существующие обходные пути. Однако может быть сложно начать использовать эти вещи, когда у вас уже есть приложение React, или даже когда вы хотите создать новое приложение.

В этой статье мы расскажем, как создать новое приложение React, добавить в него поддержку ES2020 и кратко рассмотрим некоторые новые доступные функции.

Создание нового проекта React

Есть несколько способов начать новый проект React. Все свои проекты я всегда начинаю с create-react-app.

npx create-react-app es2020-app
cd es2020-app

Приложение готово к развертыванию, набрав команду yarn start или npm start.

Установка плагинов ES2020

Спецификации JavaScript, такие как ES6 и ES2020, поддерживаются в браузерах с помощью компилятора Babel. Babel конвертирует весь новый код в совместимый с браузером JavaScript. В Babel есть множество различных плагинов, расширяющих базовый набор функций. На данный момент возможности ES2020 реализованы набором плагинов, которые мы собираемся установить.

В вашем недавно созданном проекте React уже установлен Babel, однако не так очевидно, как добавить в него дополнительные плагины. Один из способов добиться этого - установить пакет под названием rewire-your-app вместе с customize-cra.

Для нашего только что созданного приложения React мы собираемся установить эти пакеты:

npm i react-app-rewired customize-cra -save

Затем нам нужно изменить сценарии запуска, чтобы запустить его через rewire-your-app. Для этого нам нужно отредактировать файл package.json в корне нашего проекта:

“scripts”: {
   “start”: “react-app-rewired start”,
   “build”: “react-app-rewired build”,
   “test”: “react-app-rewired test”,
   “eject”: “react-scripts eject”
},

Теперь мы можем приступить к установке новых плагинов ES2020!

@ Babel / плагин-предложение-необязательная-цепочка

Это моя любимая функция ES2020, которую я сразу интегрировал в свои проекты. Это позволяет нам безопасно проверять, существует ли свойство в объекте, и если его нет, он вернет null или undefined.

Давайте посмотрим на пример:

// before:
const value = object1 && object1.prop1 && object1.prop1.prop2 // if object and prop1 exists, then access prop2
// now:
const value = object1?.prop1?.prop2 // if object1 or prop1 do not exist, it will return null or undefined.

Эта функция также может проверить, существует ли функция.

@ Babel / плагин-предложение-нулевой-коалесцирующий-оператор

Эта функция создает новый способ предоставления значения по умолчанию.

Предположим следующее:

const object2 = {
 prop1: 0,
 prop2: 1,
 prop3: ‘’,
 prop4: ‘test’,
 prop5: false
}
const prop1_before = object2.prop1 || “default” // returns “default”
const prop1_after = object2.prop1 ?? “default” // returns 0
const prop2_before = object2.prop2 || “default” // returns “1”
const prop2_after = object2.prop2 ?? “default” // returns 1
const prop3_before = object2.prop3 || “default” // returns “default”
const prop3_after = object2.prop3 ?? “default” // returns “”
const prop4_before = object2.prop4 || “default” // returns “test”
const prop4_after = object2.prop4 ?? “default” // returns “test”
const prop5_before = object2.prop5 || “default” // returns “default”
const prop5_after = object2.prop5 ?? “default” // returns false

Пример наглядно показывает разницу между старым и новым способом.

@ Babel / плагин-синтаксис-bigint

Наибольшее число в JavaScript - 2⁵³. Этот плагин добавляет новый примитив BigInt, который устраняет проблему.
Чтобы создать число BigInt, вам нужно добавить 'n' в конец целого числа:

const nr = 9007199254740993n

Он ведет себя так же, как обычный номер, но, к сожалению, их нельзя использовать вместе:

const nr2 = 10n + 2 // TypeError

К счастью, вы можете использовать конструктор BigInt для преобразования числа или строки в BigInt:

const nr3 = BigInt(‘12345’)
const nr4 = BigInt(12345)

Кроме того, вы можете преобразовать BigInt в число по умолчанию с помощью конструктора Number:

const nr5 = Number(12345n)

Вы должны быть осторожны с ним, так как точность может быть потеряна.

@ Babel / плагин-синтаксис-динамический-импорт

Динамический импорт позволяет нам импортировать модуль в любой момент в нашем приложении. Это может привести к повышению производительности, загружая только то, что вам нужно, вместо всего, можно использовать где угодно.

Это реализовано новым методом import (), который возвращает обещание.

import(“./module.js”).then((module) => { … })
const asyncMethod = async () => {
 const module = await import(“./module.js”)
}

Теперь, когда мы знаем, какие новые плагины существуют, мы можем их установить.

npm i @babel/plugin-proposal-optional-chaining -save
npm i @babel/plugin-proposal-nullish-coalescing-operator -save
npm i @babel/plugin-syntax-dynamic-import -save
npm i @babel/plugin-syntax-bigint -save

Однако для того, чтобы начать пользоваться новыми функциями, этого еще недостаточно. У нас также есть файл конфигурации, который будет загружать их при запуске приложения.

Создайте файл config-overrides.js в корневом каталоге проекта:

const {
   override,
   addBabelPlugin
} = require("customize-cra");
module.exports = override(
   addBabelPlugin(["@babel/plugin-proposal-optional-chaining", { "loose": false }]),
   addBabelPlugin(["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }]),
   addBabelPlugin(["@babel/plugin-syntax-dynamic-import", { "loose": false }]),
   addBabelPlugin(["@babel/plugin-syntax-bigint", { "loose": false }])
);

Как вы можете видеть выше, мы добавили один из наших плагинов, используя метод addBabelPlugin в нашем файле config-overrides.js.

Теперь, наконец, мы можем запустить наше приложение и протестировать некоторые из новых функций!