Question

MobX docs告诉我必须“使用转换插件transform-decorators-legacy并确保它是插件列表中的第一个”，以便装饰器工作。 MobX样板项目表明我需要.babelrc之类的：

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

如何使用create-react-app生成的项目执行此操作？任何尝试使用@装饰器错误。即使项目被“弹出”后也没有.babelrc。

Answer 1

现在有一个替代方案，在接受答案时尚未提供。这是custom-react-scripts。它将允许您在CRA应用程序中启用装饰器，SASS和其他细节。并且它没有弹出它。

有一个很好的medium article解释其背后的想法。

Answer 2

除非eject，否则不能使用装饰器语法。但是，您可以在没有@的情况下使用MobX，因为它只是一种语法糖。

Dan Abramov has articulated the reason for this

我们的立场很简单：我们添加稳定的变换   足够（如async / await）或Facebook大量使用（如课程   属性）。只有那样才能让我们有信心建议他们，   因为如果标准中的某些内容发生变化，我们就会编写并发布   一个可以远离它们的codemod。

由于我们目前不使用装饰器，我们不接受它   如果标准成为，我们自己提供迁移路径   不相容。此外，装饰者甚至没有得到官方支持   通过Babel（-legacy是有原因的）。当他们配置   人们错误地指责React。

您可能还想查看create-react-app-mobx

相关讨论：

Answer 3

您可以使用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。

Answer 4

现在，您可以在node_modules / babel-preset-react-app / index.js插件数组中推送require.resolve('babel-plugin-transform-decorators-legacy')

Answer 5

这是我在没有弹出的情况下找到的最佳解决方案。替换create-react-scripts。

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

删除package.json中的react-scripts。不要将脚本从react-scripts start更改为create-react-scripts start。保留脚本原样。

现在用装饰器添加你的mobx东西，享受更少的样板代码。

我的最后一个package.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 } }

使用带有create-react-app的MobX可观察装饰器

5 个答案: