LayaBox2.4配置VsCode编译及运行环境

-前言-

Laya2.4取消了内置VsCode编辑器，现在代码编辑需要在单独的代码编辑器里面写，推荐使用VsCode。发现不少同学无法运行启动调试了。这篇博客就是讲述如何配置编译及调试环境。

-正文-

添加VsCode启动文件

以前启动文件是通过.laya启动，不过现在在VsCode需要在.vscode中配置一个launch.json。这里需要确保VsCode安装了Debugger for Chrome插件。

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "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",
				"--allow-file-access-frome-files",
				" --disable-web-security"				
			],
			"sourceMaps": true,
			"webRoot": "${workspaceRoot}",
			//假如谷歌调试报userDataDir不可用，请把谷歌安装路径取得管理员权限,或者更换${tmpdir}为其他可以读写的文件夹，也可以删除。
			"userDataDir": "${workspaceRoot}/.laya/chrome",
			"sourceMapPathOverrides": {
				"src/*": "${workspaceRoot}/src/*"
			}		
		}
    ]
}

配置编译文件

如果我们工程代码选择的是TypeScript需要将ts编译到js再执行。这里使用VsCode我们就不选用Laya默认编译文件。

1.初始化工程文件

npm init

跟着提示初始化完成

2.依次安装gulp、rollup、rollup-plugin-typescript2、rollup-plugin-glsl

npm install gulp --save-dev
npm install rollup --save-dev
npm install rollup-plugin-typescript2 --save-dev
npm install rollup-plugin-glsl --save-dev

3.配置编译文件

在项目根目录下新建gulpfile.js文件

const rollup = require("rollup");
const typescript = require('rollup-plugin-typescript2');//typescript2 plugin
const glsl = require('rollup-plugin-glsl');

function dev(cb){
	return rollup.rollup({
		input:'./src/Main.ts',
		treeshake: true,//建议忽略
		plugins: [
			typescript({
				check: false, //Set to false to avoid doing any diagnostic checks on the code
				tsconfigOverride:{compilerOptions:{removeComments: true}}
			}),
			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 => {
		bundle.write({
			file: './bin/js/bundle.js',
			format: 'iife',
			name: 'laya',
			sourcemap: true
        }).then(()=>{
			return cb();
		});        
	});
}

module.exports.dev = dev;

注意：rollup模块只适用es6，如果编译报错需要修改tsconfig.json将module字段修改为"es6"

至此我们可以在终端输入：gulp dev编译typescript，之后运行即可。

也可以在package配置对应执行代码，例如编译我们取名dev可以在scripts字段配置即可以通过npm run dev执行编译

"scripts": {

    "dev": "gulp dev"
  }