Я работаю разработчиком Angular более 3 лет и всегда был в восторге от множества готовых решений, которые предлагает фреймворк Angular.

Сегодня я решил рассказать вам о декораторах - одной из самых фундаментальных частей Angular и о том, как включить эту функцию в React. Но позвольте мне сначала напомнить вам, что такое декораторы и какие новые и полезные возможности они предлагают.

В общем, декораторы - это просто чистые функции с аргументами, которые могут динамически присоединять к объекту дополнительные функции до его использования, или, если быть точным, с их помощью вы можете:

  • проверять состояние окружения перед выполнением функции;
  • провести отложенную инициализацию;
  • вести журнал / трассировку;
  • точно расширить код, написанный кем-то другим;
  • делать многое другое ...

Я влюбился в декораторы в 2016 году, когда был выпущен Angular 2. Итак, с тех пор прошло уже три года, и до сих пор лишь немногие люди используют декораторы в React. Как вы думаете, в чем могут быть причины?

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

Содержание

  1. Если у вас есть доступ к конфигурации babel
  • 1.1. Включение синтаксиса декоратора с помощью Babel 6;
  • 1.2. Включение синтаксиса декоратора с помощью Babel 7.

2. Включение синтаксиса декоратора с помощью приложения Create React (v2):

  • 2.1. Включение синтаксиса декоратора с помощью Typescript;
  • 2.2. Включение синтаксиса декоратора с помощью Fork;
  • 2.3. Включение синтаксиса декоратора с помощью Eject;
  • 2.4. Включение синтаксиса декоратора с помощью пакета npm «customize-cra».

3. Заключение

1. Если у вас есть доступ к конфигурации Babel

1.1. Включение синтаксиса декоратора с помощью Babel 6:

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

npm i --save-dev babel-plugin-transform-decorators-legacy

И внесите изменения в файл. babelrc:

1.2. Включение синтаксиса декоратора с помощью Babel 7:

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

npm i --save-dev @ babel / плагин-предложение-свойства-класса
npm i --save-dev @ babel / plugin-offer-decorators

И внесите изменения в файл .babelrc:

2. Включение синтаксиса декоратора с помощью приложения Create React (v2)

2.1 Включение синтаксиса декоратора с помощью Typescript:

Использование Typescript - это самый простой способ включения декораторов в React, потому что он не требует каких-либо уловок или уловок. Вам нужно всего лишь выполнить несколько действий:

  • запустить в терминале:

npx create-response-app my-typescript-app --typescript

  • Перезагрузите compilerOptions в файле tsconfig.json, добавив emitDecoratorMetadata и experimentalDecorators:

Буквально, я считаю это одним из лучших вариантов, потому что мне нравится Typescript. Использование Typescript дает преимущества в виде линтинга вашего кода, статической типизации и общего повышения качества кода. Вы можете посмотреть пример использования декораторов с Typescript здесь.

2.2 Включение синтаксиса декоратора с помощью Fork

На мой взгляд, метод Fork - лучший выбор для настройки сборки. Кроме того, этот вариант поддерживает Дэн Абрамов - один из лидеров мнений в команде React. Форк проекта является альтернативой Eject, другими словами, он не содержит минусов Eject, но имеет свои различные нюансы. Вы можете найти полную информацию здесь

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

2.3 Включение синтаксиса декоратора с помощью Eject

Для включения декоратора вам достаточно выполнить несколько шагов:

  • запустить в командной строке:

npm run eject

  • установите плагины babel, выполнив следующие команды:

npm i -D @ babel / плагин-предложение-декораторы
@ babel / плагин-предложение-свойства-класса

  • обновите Babel в файле package.json, добавив к нему плагины:

Эта команда удалит из вашего проекта зависимость отдельной сборки. Он скопирует все файлы конфигурации и транзитивные зависимости (Webpack, Babel, ESLint и т. Д.) Прямо в ваш проект, чтобы вы имели полный контроль над ними. Вы можете найти пример включения синтаксиса Decorator с помощью Eject здесь.

2.4 Включение синтаксиса декоратора с помощью пакета npm “customize-cra”

Если вы создаете проект с помощью

npx создать-реагировать-приложение мое приложение

команда, то у вас не будет возможности использовать декораторы из коробки. И для этого вам необходимо установить пакет customize-cra. Вы можете найти пример здесь.

Затем вам следует обновить devDependencies в файле «package.json», добавив к нему 2 пакета - «customize-cra» и «react-app-rewired». Второй пакет необходим для включения первого пакета.

После этого вам следует обновить скрипты в файле «package.json», заменив response-scripts на «react-app-rewired».

Наконец, добавьте файл config-overrides.js в корень проекта, который активирует синтаксис декоратора. Содержимое файла:

Это простой способ включить синтаксис декоратора, поскольку он требует минимальных изменений в проекте. Однако у такого подхода есть свои последствия: он может перестать работать в будущих версиях «сценариев реакции». И если это произойдет, вам придется использовать подходы «выталкивания» или «вилки», описанные выше.

Заключение

В целом, как вы знаете, декораторы предоставляют нам множество преимуществ, и возможность получить прибыль от их обширной функциональности - отличный шанс для любого разработчика. В этой статье я раскрыл несколько подходов к включению синтаксиса Decorator в приложении React и рассмотрел их преимущества и недостатки.
Какой подход выбрать, зависит только от вас. - реализовать, использовать и получить все преимущества декораторов прямо сейчас.

Олег, JS Team Lead, Full-Stack. Специалист по кастомным социальным сетям и мобильным приложениям. Вдохновляется работой со стартапами, поддерживая творческие идеи.

Особая благодарность Александру (React Team Lead, Full-Stack, Architect) за поддержку этой статьи.

Давайте вместе приступим к вашему проекту!

Первоначально опубликовано на 2muchcoffee.com 10 января 2019 г.