Извлечение и добавление декораторов в ваше приложение create-response-app

Если вы похожи на меня, вероятно, вам нужны декораторы для вашего приложения create-react-app. Нет простого и понятного способа сделать это, не извлекая приложение, так что это именно то, что я собираюсь пройти в этом посте.

Шаг 1

npm run eject

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

Шаг 2

Добавьте в приложение устаревший плагин babel для декораторов преобразования

yarn add babel-plugin-transform-decorators-legacy

Добавьте полужирную строку в /config/webpack.config.dev.js вокруг строки 162. Обязательно проделайте то же самое с /config/webpack.config.prod.js, иначе приложение не построится.

// Process JS with Babel.
 {
   test: /\.(js|jsx)$/,
   include: paths.appSrc,
   loader: require.resolve(‘babel-loader’),
   options: {
     plugins: [‘transform-decorators-legacy’],
     // This is a feature of `babel-loader` for webpack (not Babel   itself).
     // It enables caching results in ./node_modules/.cache/babel-    loader/
     // directory for faster rebuilds.
     cacheDirectory: true
   }
 },

Шаг 3

Теперь вы можете полностью использовать декораторы

import {withRouter} from ‘react-router’
@withRouter
class MyComponent extends …

Наслаждаться!