在实际项目中可能采用不止一个框架,由于各种原因,我们如果分开管理的话,对我们效率是有影响的,于是我们需要把这些框架集中管理,转化成一个工程,下面就说说vue、react集成一个工程遇到的坑

1.开发环境react启动正常,但是浏览器中报h is not a function

安装了react相关的包,启动后浏览器报h is not a function,证明编译是ok的,所以不是包问题,可能是配置的问题, 单独react这样配置运行是ok的,那说明还是跟vue某些地方有冲突,vue是用vue-li生成的,很多配置默认了,最后在.babelrc中看到一个plugins transform-vue-jsx的配置,想到应该是这个,去掉之后react运行成功

2.开发环境一切正常,打包部署后react项目报Cannot read property 'call' of undefined

用react写了2个demo界面,开发环境调试ok,于是打包在nginx中部署看看效果,react的项目报 Cannot read property 'call' of undefined ,vue的项目正常 相关的加载是ok的,但是manifest文件里面报Cannot read property 'call' of undefined,如果把vue的chunk加入后,页面显示正常,说明还是跟vue有关系,应该是某些模块打包进了vue这个包,然后react也需要这个模块,但是各个项目采用了不同的框架而只需要加载对应的框架就可以了,框架之间不应该产生依赖,依赖的相关模块都应该被打入public才对。我对比了vue、react项目的入口文件,只发现vue项目中多了以下代码,其他都差不多

Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))

于是了我删除了这句话,再次打包,react项目部署后正常,我改成for之后再次打包也正常,说明是Object.keys的问题,我在react项目入口文件中用Object.keys然后打包部署,两个项目框架运行都正常,具体原因目前还不太清楚,后续会继续跟踪这个问题,查找具体原因。