Включить синтаксис декоратора в приложении create-реагировать

React.js

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

Способ 1: разоблачитьcreate-react-appКонфигурация

незащищенныйcreate-react-appвсе конфигурации

Запустите команду:

$ npm run eject

В проекте отображаются различные конфигурационные файлы.

существуетbabelдобавлено вpluginsнастроить

существуетpackage.jsonнашел в файлеbabelконфигурации добавьте следующий код:

package.json

"babel": {
    "presets": [
      "react-app"
    ],
+    "plugins": [
+        [
+            "@babel/plugin-proposal-decorators",
+            { "legacy": true }
+        ]
+    ]
}

Перезапустите проект, и синтаксис декоратора будет работать как обычно.

Шаблон create-реагировать-приложение уже установлен@babel/plugin-proposal-decoratorsПлагин, если это скаффолд, настроенный вами, сначала установите плагин:npm install @babel/plugin-proposal-decorators --save-dev

Способ 2: непосредственно в проектеnode-modulesдобавить конфигурацию

открытый проектnode_modulesпапка, найтиbabel-preset-react-appсодержание. открыть каталогcreate.jsдокумент. оказатьсяpluginsКонфигурация локального свойства, конфигурация может быть изменена следующим образом:

-isTypeScriptEnabled && [
-    require('@babel/plugin-proposal-decorators').default,
-    false,
-],

+[
+    require('@babel/plugin-proposal-decorators').default,
+    { legacy: true },
+],

Не рекомендуется использовать второй способ, т.к. один раз его нужно переустанавливатьnode_modules, вам нужно идти сноваbabel-preset-react-appДобавьте конфигурацию внутри.

Суммировать

После использования двух вышеуказанных методов синтаксис декоратора можно использовать в проекте в обычном режиме, но при использовании декораторов. Может все еще быть сообщение об ошибке красной строки.В это время в файле конфигурации VSCode (кнопка «Настройки» в левом нижнем углу кода Visual Studio (или «Файл»> «Настройки»> «Настройки») добавьте следующую конфигурацию:

setting.json

"javascript.implicitProjectConfig.experimentalDecorators": true,

Рекомендуется использовать первый метод, хотя он может быть громоздким и требует раскрытия всей конфигурации. А вот второй способ, это нормально, если вы сами проведете небольшие демо-тесты. В противном случае, когда вам нужно переустановитьnode_modules, вам нужно идти сноваbabel-preset-react-appДобавьте конфигурацию внутри.

Ссылка на ссылку

Проблема декоратора в redux connect

Категории