前言
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执行编译
因为项目开始之后很少再配置项目编译等等，备下来预防以后忘记了。记录一下下！！
标签：编译,VsCode,plugin,rollup,dev,--,LayaBox2.4 From： https://www.cnblogs.com/as3Gui/p/16706438.html