CocosCreator 适配IE改ES5方法

前言

客户要我们做的CocosCreator项目支持IE11打开，v2.4之前的版本就直接放弃了，因为没有使用babel插件，导致TypeScript代码无法无伤转化为ES5的语法，v2.4之后就可以(文中使用v2.4.6)，但是某些地方需要略作更改，在此记录。

TypeScript 项目设置

CocosCreator上方菜单栏点击开发者-->VS Code工作流-->添加TypeScript项目配置
可以发现项目根目录下多了一个tsconfig.json文件

将target参数改为es5

ps:如果需要用到数组循环一类可以添加"downlevelIteration": true

Array类型修改

如果要使用Array类型，创建字段时一般为：

private AllUIForms: Array<{ 
	key: string, 
	node: cc.Node, 
	isMask: boolean 
	}> = new Array();

但是经过编译并不会自动new出来，所以要在onLoad时创建：

//定义字段
private AllUIForms: Array<{ 
	key: string, 
	node: cc.Node, 
	isMask: boolean 
	}> = new Array();
···
···
···
//初始化
this.AllUIForms = new Array<{ key: string, node: cc.Node, isMask: boolean }>();

Map类型修改

如果要使用Map类型，创建字段时一般为：

export const UIManagerMap=new Map<number, UIOption>([
    [0, { url: 'prefab/MaskPanel' }],
    [1, { url: 'prefab/MainPanel' }],
]);

但是经过编译并不会自动new出来，所以要在onLoad时创建：

//定义字段
UIManagerMap: Map<number, UIOption>  = new Map<number, UIOption> ();
···
···
···
//写入
this.UIManagerMap.set(0, { url: 'prefab/MaskPanel' });
this.UIManagerMap.set(0, { url: 'prefab/MainPanel' });

循环语法修改

普通使用循环：

for (let [key, value] of this.AllUIFormsMap) {
	if (value.node === node) {
		return value;
	}
}

由于使用ES6语法，会报错下图错误

修改后：

let returnEle;
this.AllUIFormsMap.forEach(element => {
	if (element.node===node) {
		returnEle=element;
    }
});
return returnEle;

当然，这里的遍历有好几种写法，看个人喜好

异步方法

直接在方法前加async并不可行，可能其他写法可以

async start()
{
	await console.log("Hello async");     
}

按照上面写法会有报错

修改后

start()
{
	console.log("Hello fucking async");     
}

参考

1. CocosCreator官方文档 JavaScript 标准支持: http://docs.cocos.com/creator/manual/zh/scripting/reference/javascript-support.html

2. 【Cocos Creator】【2.4】什么是 babel 编译器？Support via polyfill 又是什么？https://blog.csdn.net/humanxing/article/details/116840513