Использование MobX наблюдаемых декораторов с create-react-app

на MobX docs скажите мне, что я должен "использовать transform plugin transform-decorators-legacy и убедиться, что он первый в списке плагинов", чтобы декораторы работали. Проект MobX boilerplate предполагает, что мне нужен .babelrc как:

{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy", "react-hot-loader/babel"]
}

как это сделать с помощью проекта create-react-app? Любая попытка использовать @ декораторы ошибки. Нет .babelrc даже после того, как проект 'выталкивается'.

10
babeljs mobx reactjs webpack

5 ответов

вы не можете использовать синтаксис декоратора, если вы eject. Однако, вы можете использовать MobX без @ так как это просто синтаксический сахар.

Дэн Абрамов сформулировал причину такого

наша позиция проста: мы добавляем преобразования, которые либо стабильны достаточно (например, async / await) или сильно используется Facebook (например, class свойства.) Только это позволяет нам быть уверенными в их предложении, потому что если что-то изменится стандарт, мы напишем и выпустим в codemod отказаться от них.

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

вы также можете посмотреть create-react-app-mobx

обсуждений:

9

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

хороший средне-статьи объясняя идеи, стоящие за ней.

10

вы можете использовать https://www.npmjs.com/package/react-app-rewire-mobx

React App Rewired даст вам доступ к конфигурации, чем вам просто нужно настроить пакет.

npm install react-app-rewired --save

// create a file named config-overrides.js

/* config-overrides.js */

const rewireMobX = require('react-app-rewire-mobx');

module.exports = function override(config, env) {
  config = rewireMobX(config, env);
  return config;
}

Примечание: Это спасает вас от катапультирования. CRA не поддерживает изменение конфигурации https://github.com/facebookincubator/create-react-app/issues/99#issuecomment-234657710 - ...

4

теперь, вы можете нажать require.resolve('babel-plugin-transform-decorators-legacy') в node_modules / babel-preset-react-app / index.JS plugins array

2

Это лучшее решение, которое я нашел без катапультирования. Заменить create-react-скрипты.

https://www.npmjs.com/package/custom-react-scripts

если у вас есть новый проект, начните с этого в вашем терминале:

create-react-app my-app --scripts-version custom-react-scripts

затем cd в каталог my-app и создайте.файл env. Отредактируйте .env файл к этому:

REACT_APP_BABEL_STAGE_0=true
REACT_APP_DECORATORS=true

теперь ваше приложение будет поддерживать оформителей.

если у вас есть существующее приложение и хотите добавить этот. Добавить .env, как и выше:

npm i custom-react-scripts --save

удалить react-скрипты в вашем пакете.формат JSON. Не меняйте скрипты с react-скрипты начинают создавать-react-скрипты начинают. Оставьте сценарии как есть.

теперь добавьте свой материал mobx с декораторами и наслаждайтесь меньшим шаблонным кодом.

мой последний пакет.в JSON

{ "name": "mobx-test", "version": "0.1.0", "private": true, "dependencies": { "custom-react-scripts": "^0.2.1", "mobx": "^3.4.0", "mobx-react": "^4.3.5", "react": "^16.2.0", "react-dom": "^16.2.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

о, и если вы используете vscode, вы захотите скрыть предупреждения о неподдерживаемых декораторах. Для этого добавить tsconfig.файл json для вашего проекта с этим

{ "compilerOptions": { "experimentalDecorators": true, "allowJs": true } }

1