ExtJS Sencha CMD 打包异常报错分析处理 - 1

一般在布署时会将文件编译打包成一个文件,这样可以节省空间,提高加载速度,但平时在开发时运行的正常的程序,编译之后就各种报错,有些都是完全看不懂,这里将日常使用中的故障都记录一下
目前的项目使用的是通用模式,项目即有经典,也有现代风格,程序自动识别加载适合终端的界面.
Sencha Cmd版本: v7.6.0.87
ExtJs SDK版本:7.6

  生成未加密的JS代码,方便找问题
  sencha app build -testing
  
  生产模式打包,生成混淆代码:
  sencha app build --production

app.json 文件,在JS项中,配置默认输出支持 ES6 代码方式以适应一下时代,默认输出是ES5,通过查看变量定义有没有将let,改成var就很好分辨

"output": {
    "base": "${workspace.build.dir}/${build.environment}/${app.name}",
    "page": "index.html",
    "manifest": "${build.id}.json",

    "js": {
        "path": "${build.id}/app.js",
        "version": "ES6"
    },
    "appCache": {
        "enable": false
    },
    "resources": {
        "path": "${build.id}/resources",
        "shared": "resources"
    }
},

2022年10月10日16:41:03
有时通过了testing编译,运行正常,但production编译时还是会出错,我这遇到了通过了production,在内网中运行正常但布署到外网,还是报错,所以需要有耐心来解决这些问题
这次报错,点错误连接,定位到错误代码,估摸着可能真有问题,就着重错误定位来解决,有时感觉还定位不到错误源头代码

app.js?_dc=20221008151621:20 TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
at Function.all ()
at app.js?_dc=20221008151621:20:149870
at app.js?_dc=20221008151621:20:107685
at Fe (app.js?_dc=20221008151621:20:102126)
at Ue (app.js?_dc=20221008151621:20:102602)
at IDBTransaction. (app.js?_dc=20221008151621:20:102966)

2022年10月10日20:59:07
问题终于得到解决,

app.js有段代码,这里面的代码固定不动,大概如下:

launch: function () {
    //调用了一个异步代码,返回使用是Promise
    Test.Init().then(function () {
		//代码
		console.log("2");
    });
},

Test.js文件 使用了Dexie.js库对IndexedDB一些操作,所以内部还有一些异步操作,一直在尝试使用Promise来解决问题,但不管怎么弄,都是报错,之前的说是在内网不错,在外网出错,是说错了,其实一个操作没有运行相关代码,所以没有激发而已,只是testing编译不出错,而production编译就出错了.
出错的代码,大概如下:

Init: function () {
        /**
         * Dexie.async(function* () {}); Return Function
         * Dexie.spawn(function* () {}); Return Promise
         */
        return Dexie.spawn(function* () {
            let rec = yield code();
        });
    }

最后终于打算改方式了,使用同步关键字async await,再次编译production并运行错误消失
注意async await的使用,正常改好的运行代码如下:

Init: async function () {
	let me = this;
    async function fnInit(me) {
        let rec = await code();
        console.log("1");
    };
    await fnInit(me);
},

完美解决,希望也能帮到有需要的朋友,另外吐槽一下SenchaArchitect是个极好的工具,可视化操作真的好方法,但好多骚操作就无法进行了,比如怎么这样使用async await就不知道怎么弄,也不能建立通用universal的项目.要不然真不想转IDE来coding…