系统原本框架问题

首先遇到的问题是,AMP系统是用 creact-react-app 搭建的,具体使用的的版本不知.在启动层面上,严重依赖脚手架自带的启动配置,而在开发时又在其基础上添加修改,代码可读性非常差.主要表现在以下几个方面:

• 多个系统启动时相互复制,webpack 配置非常复杂切不易读
• package.json 内的开发依赖项严重冗余,并且没有区分开发依赖和生产依赖,一些项目配置完全没有作用.

项目添加规则后的问题

一开始切换分支时是没有代码问题的,真正开始项目报错是在安装了新的依赖之后,主要是这个问题:

./src/index.js
Error: /src/index.js: 'loose' mode configuration must be the same for 
@babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled).
    at transformFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)

被 observer 装饰过的组件都会出现这个问题,所以有两方面的解决.一个是去除装饰器语法,二是修改出错位置的代码和Babel Plugin 配置.

修改Babel配置

需要修改 Babel 插件的属性:

// .babel.config.js
[
  // "@babel/plugin-proposal-class-properties",{"loose": false}
     "@babel/plugin-proposal-class-properties",{"loose": true}
]

去除Mobx的装饰器

Mobx团队在 6.0 版本之后推出了makeObservable 来创建可观察对象,并解释了不再维护装饰器的原因:

装饰器语法尚未定案以及未被纳入ES标准，标准化的过程还需要很长时间，且未来制定的标准可能与当前的装饰器实现方案有所不同。出于兼容性的考虑，我们在MobX 6中放弃了它们，并建议使用makeObservable / makeAutoObservable代替.