taro增加循环引用检测

返回
Author Avatar
钢翼
2023-10-02
编程
119

在尝试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文件夹下的代码
            			})
          			}
				}
      		})
		}
	}
}

这样启动时控制台就可以输出有循环引用的代码了,自己再看情况要不要修改了。