按照这种方式配mobx和react-mobx一定不会报错

最新推荐文章于 2025-06-24 10:50:06 发布

原创最新推荐文章于 2025-06-24 10:50:06 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

webpack 专栏收录该内容

5 篇文章

订阅专栏

本文详细记录了在React项目中配置MobX以使用ES6修饰器的过程，强调了版本匹配的重要性。作者指出，除了安装必要的依赖如`mobx`, `mobx-react`外，还需要额外配置`babel-plugin-transform-class-properties`和`babel-plugin-transform-decorators-legacy`，并创建`.babelrc`文件。最后，作者提供了完整的`package.json`配置文件以供参考，以避免配置错误导致的运行时错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

兄弟们这真的是血的教训，配置这个东西一开始花了我很多时间，报了很多莫名其妙的错。其实总结下来就是第三方的版本问题。

因为mobx中要使用es6 的修饰器，配置方法如下。

//首先新建一react项目
npx create-react-app mobx-study
//用vscode打开项目，打开终端然后下载依赖
yarn add react-app-rewired customize-cra @babel/plugin-proposal-decorators

然后在项目的根目录下创建config-overrides.js文件在文件中输入以下配置

const{override,addDecoratorsLegacy}=require('customize-cra');
module.exports=override(addDecoratorsLegacy());

然后找到package.json文件中的scripts配置，改成下面的格式

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

然后再下载

yarn add mobx@5 mobx-react@5

一定要指定版本要不后面会报错。

一般网上的配置教程到这里就结束了。但是少年，如果你这样想，那就错了。如果只配置这些后面还是会报错。

接下来才是这篇文章的精华，废话不多说了看配置

接下来你还要下载

yarn add babel-plugin-transform-class-properties
yarn add babel-plugin-transform-decorators-legacy

然后在根目录下新建.babelrc文件在文件中输入以下配置

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

至此才算配置完成。

为了照顾一些cv工程师下面是我的整个package.json的文件

{
  "name": "mobx-study",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "mobx": "5",
    "mobx-react": "5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.17.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.2.1"
  }
}

这是我的项目目录截图