如何让MobX Decorators与Create-React-App v2配合使用？

在Create-React-App v2（简称CRA v2）中使用MobX Decorators需要配置项目以支持装饰器语法。CRA默认不支持装饰器，因此我们需要通过一些方式来修改配置文件，一般有两种方法：使用 react-app-rewired和 customize-cra或者手动配置Babel。

使用react-app-rewired和customize-cra

步骤一：安装必要的依赖

首先，你需要安装 react-app-rewired和 customize-cra，这两个库可以帮助我们在不eject CRA的情况下修改webpack和Babel配置。

bash
npm install react-app-rewired customize-cra --save-dev

步骤二：修改package.json

然后，更改 package.json中的scripts部分，使用 react-app-rewired来启动、构建和测试项目。

json
{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

步骤三：创建配置文件

在项目根目录下创建一个名为 config-overrides.js的文件，用来配置装饰器支持。

javascript
const { override, addDecoratorsLegacy } = require('customize-cra');

module.exports = override(
  addDecoratorsLegacy()
);

此代码通过 addDecoratorsLegacy启用传统装饰器支持。

手动配置Babel

如果你不想使用 react-app-rewired，你可以选择手动弹出CRA的配置。

步骤一：弹出配置

bash
npm run eject

这将创建 config和 scripts文件夹，你可以在这里找到Babel的配置文件。

步骤二：修改Babel配置

在Babel配置文件（通常位于 package.json或 babel.config.js中），添加装饰器插件：

json
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

确保你已经安装了这个插件：

bash
npm install @babel/plugin-proposal-decorators --save-dev

结论

使用 react-app-rewired和 customize-cra是配置CRA以支持装饰器的推荐方法，因为它不需要你弹出CRA的配置，从而更容易维护。不过，如果项目需要更复杂的定制，eject方法也是一个可选方案。使用上述任一方法后，你就可以在CRA项目中使用MobX装饰器来管理你的应用状态了。