深入理解LayaAir引擎架构和实现原理(二)项目调试原理及完美开发调试方案

1.背景

通常情况下我们在做项目时都是在LayaAir IDE下进行调试和开发的。通常情况不会接触到typescript的“编译”和bundle过程。这节我们要深入了解其中的过程，并剥离出来，能够在VsCode中直接运行项目，实时编译调试。

2.LayaAir的编译流程

打开LayaAirIDE的文件夹

LayaAirIDE_beta\resources\app\out\vs\layaEditor\laya\code\ts\empty

我们创建空项目时会应用这个套模板，直接再IDE中编译时会使用IDE自带的node环境和插件。
在.laya/compile.js中可知道使用的是gulp和rollup进行文件的编译的。

// v1.2.5
//是否使用IDE自带的node环境和插件，设置false后，则使用自己环境(使用命令行方式执行)
const useIDENode = process.argv[0].indexOf("LayaAir") > -1 ? true : false;
const useCMDNode = process.argv[1].indexOf("layaair2-cmd") > -1 ? true : false;

function useOtherNode(){
	return useIDENode||useCMDNode;
}
//获取Node插件和工作路径
let ideModuleDir = useOtherNode() ? process.argv[1].replace("gulp\\bin\\gulp.js", "").replace("gulp/bin/gulp.js", "") : "";
let workSpaceDir = useOtherNode() ? process.argv[2].replace("--gulpfile=", "").replace("\\.laya\\compile.js", "").replace("/.laya/compile.js", "") : "./../";

const gulp = require(ideModuleDir + "gulp");
const rollup = require(ideModuleDir + "rollup");
const typescript = require(ideModuleDir + 'rollup-plugin-typescript2');//typescript2 plugin
const glsl = require(ideModuleDir + 'rollup-plugin-glsl');
const path = require('path');
const fs = require('fs');

// 如果是发布时调用编译功能，增加prevTasks
let prevTasks = "";
if (global.publish) {
	prevTasks = ["loadConfig"];
}

gulp.task("compile", prevTasks, function () {
	// 发布时调用编译功能，判断是否点击了编译选项
    if (global.publish) {
        workSpaceDir = global.workSpaceDir; // 发布时调用编译，workSpaceDir使用publish.js里的变量
        let forceCompile = !fs.existsSync(path.join(workSpaceDir, "bin", "js", "bundle.js")); // 发布时，并且没有编译过，则强制编译
        if (!global.config.compile && !forceCompile) {
            return;
        }
    }

	return rollup.rollup({
		input: workSpaceDir + '/src/Main.ts',
		onwarn:(waring,warn)=>{
			if(waring.code == "CIRCULAR_DEPENDENCY"){
				console.log("warnning Circular dependency:");
				console.log(waring);
			}
		},
		treeshake: false, //建议忽略
		plugins: [
			typescript({
				tsconfig:workSpaceDir + "/tsconfig.json",
				check: true, //Set to false to avoid doing any diagnostic checks on the code
				tsconfigOverride:{compilerOptions:{removeComments: true}},
				include:/.*.ts/,
			}),
			glsl({
				// By default, everything gets included
				include: /.*(.glsl|.vs|.fs)$/,
				sourceMap: false,
				compress:false
			}),
			/*terser({
				output: {
				},
				numWorkers:1,//Amount of workers to spawn. Defaults to the number of CPUs minus 1
				sourcemap: false
			})*/        
		]
	}).then(bundle => {
		return bundle.write({
			file: workSpaceDir + '/bin/js/bundle.js',
			format: 'iife',
			name: 'laya',
			sourcemap: false
		});
	}).catch(err=>{
			console.log(err);
		
	})
});

打开.vscode/launch.json可知道使用的是Debugger for Chrome插件来调试

{
	"version": "0.2.0",
	"configurations": [ 
		{
			"name": "chrome调试",
			"type": "chrome",
			"request": "launch",
			"file": "${workspaceRoot}/bin/index.html",
			// "换成自己的谷歌安装路径，": 比如
			//window 默认安装路径为: "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
			//mac 系统上的默认安装路径为 "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
			// "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
			"runtimeArgs": [
				"--allow-file-access-from-files",
				" --disable-web-security"
			],
			"sourceMaps": true,
			"webRoot": "${workspaceRoot}",
			//假如谷歌调试报userDataDir不可用，请把谷歌安装路径取得管理员权限,或者更换${tmpdir}为其他可以读写的文件夹，也可以删除。
			"userDataDir": "${workspaceRoot}/.laya/chrome",
			"sourceMapPathOverrides": {
				"src/*": "${workspaceRoot}/src/*"
			}		
		}
	]
}

3.gulp实时编译剥离

在传统的laya项目开发流程中，通常是在修改完代码后，点击IDE中的Chorme编译，然后等待一段时间后，才能打开浏览器进行调试。
其实这个过程是可以进一步优化的，通过watch代码的更新来及时重新编译，并刷新浏览器。

3.1 launch和task配置

{
	"version": "0.2.0",
	"configurations": [ 
		{
			"name": "chrome调试",
			"type": "chrome",
			"request": "launch",
			"trace": true,
			"smartStep": true,
			"file": "${workspaceRoot}/bin/index.html",
			"runtimeArgs": [
				"--allow-file-access-from-files",
				"--allow-file-access-frome-files",
				"--disable-web-security"
			],
			"sourceMaps": true,
			"webRoot": "${workspaceRoot}",
			"userDataDir": "${workspaceRoot}/.vscode/chrome",
			"fixedPort":false,
			"sourceMapPathOverrides": {
				"src/*": "${workspaceRoot}/src/*"
			},	
			"preLaunchTask": "gulp"	
		},
		{
			"name": "chrome混淆",
			"type": "chrome",
			"request": "launch",
			"trace": true,
			"smartStep": true,
			"file": "${workspaceRoot}/bin/index.html",
			"runtimeArgs": [
				"--allow-file-access-from-files",
				"--allow-file-access-frome-files",
				"--disable-web-security"
			],
			"sourceMaps": true,
			"webRoot": "${workspaceRoot}",
			"userDataDir": "${workspaceRoot}/.vscode/chrome",
			"fixedPort":false,
			"sourceMapPathOverrides": {
				"src/*": "${workspaceRoot}/src/*"
			},	
			"preLaunchTask": "uglify"	
		},
		{
			"name": "实时编译",
			"request": "launch",
			"type": "pwa-chrome",
			"trace": true,
			"smartStep": true,
			"url": "http://localhost:1688",
			"runtimeArgs": [
				"--allow-file-access-from-files",
				"--allow-file-access-frome-files",
				"--disable-web-security"
			],
			"sourceMaps": true,
			"webRoot": "${workspaceFolder}/bin",
			"sourceMapPathOverrides": {
				"src/*": "${workspaceRoot}/src/*"
			},
		},
	]
}

task.json

{
	"version": "2.0.0",
	"tasks": [
		{
			"label": "gulp",
			"type": "shell",
			"command": "gulp",
			"group": {
				"kind": "build",
				"isDefault": true
			}
		},
		{
			"label": "uglify",
			"type": "shell",
			"command": "gulp uglify",
			"group": {
				"kind": "build",
				"isDefault": true
			}
		},
		{
			"label": "watch",
			"type": "shell",
			"command": "gulp watch",
			"group": {
				"kind": "build",
				"isDefault": true
			}
		},
	]
}

3.2 gulpfile

项目文件夹下安装好gulp和所需要的的库

//引用插件模块
var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var tsify = require("tsify");
let uglify = require('gulp-uglify-es').default;
const watchify = require("watchify");
const gutil = require("gulp-util");
const connect = require('gulp-connect');

// ------------------------------------实时编译-----------------------------

const watchedBrowserify = watchify(browserify({
	debug: true,
	entries: ['src/Main.ts'],
	cache: {},
	packageCache: {}
}).plugin(tsify));

function browserifyBundle() {
	return watchedBrowserify
	.bundle()
	//使用source把输出文件命名为bundle.js
	.pipe(source('bundle.js'))
	.pipe(buffer())
	.pipe(sourcemaps.init({
		loadMaps: true
	}))
	.pipe(sourcemaps.write('./'))
	//把bundle.js复制到bin/js目录
	.pipe(gulp.dest("bin/js"))
	.pipe(connect.reload());
}

// 定义livereload任务
gulp.task('connect', function () {
	connect.server({
		root: "./bin",
		livereload: true,
		port: 1688
	});
});

gulp.task("browserify", function() {
	return browserifyBundle();
})

gulp.task("watch", gulp.series('browserify', 'connect'));
watchedBrowserify.on("update", browserifyBundle);
watchedBrowserify.on("log", gutil.log);

// ------------------------------------默认编译-----------------------------

//使用browserify，转换ts到js，并输出到bin/js目录
gulp.task("default", function () {
	return browserify({
			//是否开启调试，开启后会生成jsmap，方便调试ts源码，但会影响编译速度
			debug: true,
			entries: ['src/Main.ts'],
			cache: {},
			packageCache: {}
	    })
		//使用tsify插件编译ts
		.plugin(tsify)
		.bundle()
		//使用source把输出文件命名为bundle.js
		.pipe(source('bundle.js'))
		.pipe(buffer())
		.pipe(sourcemaps.init({
		   loadMaps: true
		}))
		.pipe(sourcemaps.write('./'))
		//把bundle.js复制到bin/js目录
		.pipe(gulp.dest("bin/js"));
});

gulp.task("uglify", function () {
	return browserify({
			//是否开启调试，开启后会生成jsmap，方便调试ts源码，但会影响编译速度
			debug: true,
			entries: ['src/Main.ts'],
			cache: {},
			packageCache: {}
	    })
		//使用tsify插件编译ts
		.plugin(tsify)
		.bundle()
		//使用source把输出文件命名为bundle.js
		.pipe(source('bundle.js'))
		.pipe(buffer())
		.pipe(sourcemaps.init({
		   loadMaps: true
		}))
		.pipe(uglify({mangle: false}))
		.pipe(sourcemaps.write('./'))
		//把bundle.js复制到bin/js目录
		.pipe(gulp.dest("bin/js"));
});

使用时，先在项目文件夹执行gulp watch，在点击实时编译即可