该MobX文档告诉我，我必须“使用变换插件变换装饰遗留并确保它是第一个在插件列表”，为了使装饰工作。MobX 样板项目表明我需要一个.babelrc像：
{
"presets": [
"react",
"es2015",
"stage-1"
],
"plugins": ["transform-decorators-legacy", "react-hot-loader/babel"]
}
我如何使用 create-react-app 生成的项目来做到这一点？任何尝试使用@装饰器的错误。.babelrc甚至在项目被“驱逐”之后也没有。
现在有一个在接受答案时不可用的替代方案。它是custom-react-scripts。它将让您在 CRA 应用程序中启用装饰器、SASS 和其他细节。它不会弹出。
有一篇很好的中等文章解释了它背后的想法。
您不能使用装饰器语法，除非您使用eject. 但是，您可以不使用 MobX，@因为它只是一个语法糖。
丹·阿布拉莫夫 (Dan Abramov ) 阐明了这样做的原因
我们的立场很简单：我们添加足够稳定（如 async/await）或 Facebook 大量使用的转换（如类属性）。只有这样我们才有信心提出建议，因为如果标准发生变化，我们将编写并发布一个代码module来迁移它们。
由于我们目前不使用装饰器，因此如果标准变得不兼容，我们不会自行提供迁移路径。此外，Babel 甚至没有正式支持装饰器（存在 -legacy 是有原因的）。当它们配置稍有错误时，人们就会责怪 React。
您可能还想查看 create-react-app-mobx
相关讨论：
您可以使用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。
现在，您可以推送require.resolve('babel-plugin-transform-decorators-legacy')node_modules/babel-preset-react-app/index.js plugins 数组
这是我找到的最好的解决方案，无需弹出。替换 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
}
}