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"
  }