taro增加循环引用检测
钢翼
编程
在尝试taro开发h5和小程序时,出现了奇怪的bug。
访问首页是正常的,从首页访问其他页面也正常。
但是如果一开始直接访问其他页面,就会报脚本错误 Cannot read properties of undefined (reading 'xxx')。
显示空白页。
由于webpack打包编译后的代码,想看下具体是哪里地方出问题很麻烦。 最终还是通过属性关键字在相关代码打上日志,才发现是循环引用导致对应的js代码加载顺序出错导致。
循环引用虽然不是很好,但是工程化项目也很难完全避免,只能说出了问题再去考虑怎么把它优化掉。
因此才考虑在taro中引入循环引用检测插件,方便以后定位问题。
步骤如下
1.安装依赖
yarn add -D circular-dependency-plugin
2.在config/index.ts中配置插件
import CircularDependencyPlugin from 'circular-dependency-plugin'
const config = {
h5:{
devServer:{
client: {
overlay: false,//不在浏览器中显示错误
},
},
webpackChain(chain) {
chain.merge({
plugin:{
install:{
plugin: new CircularDependencyPlugin({
include: /src/, //只检查src文件夹下的代码
})
}
}
})
}
}
}
这样启动时控制台就可以输出有循环引用的代码了,自己再看情况要不要修改了。