兄弟们这真的是血的教训,配置这个东西一开始花了我很多时间,报了很多莫名其妙的错。其实总结下来就是第三方的版本问题。
因为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"
}
}
这是我的项目目录截图