Asroads'Blog 君子不器
Layabox2.3.0如何配置代码编辑器(WebStorm2019)
发布于: 2019-09-24 更新于: 2024-07-20 分类于: game 阅读次数: 

今天看到新闻,Laya官方更新了新版本,新版本很多优势,有了很多更新,看到公众号下面有人留言说,希望有个外置的代码编辑器,其实我从学习开发Layabox一直都是用的Webstorm外置编辑器,打开了两个IDE,Webstorm主攻代码,配置了编译,LayaboxIDE主攻美术和项目构建。整体来讲和Cocos开发差不多,效率很快,特别是再用上快捷键。下面我就把这个配置分享一下,希望更多的人能够提高效率。

软件下载

环境配置

  1. 首先打开我们的Layabox

image-20190924194713152

  1. 新建一个项目 我这边起名字 idedemo

image-20190924194837296

  1. 我们看到 Layabox 的编译文件处于 .laya 文件夹下

image-20190924195013484

  1. 我们打开我们Webstorm软件

image-20190924195131072

  1. 我们用Webstorm 打开我们刚刚新建的项目 选择项目文件夹即可

image-20190924195313820

  1. 我们打印一下compile.js文件的里面的 process.argv,准备替换(我们用LayaboxIDE)点击那个编译按钮,然后就能看的参数的值

image-20190924195724793

1
["/Applications/LayaAirIDE_beta2.3.0.app/Contents/Frameworks/Code Helper.app/Contents/MacOS/Code Helper","/Applications/LayaAirIDE_beta2.3.0.app/Contents/Resources/app/node_modules/gulp/bin/gulp.js","--gulpfile=/test/laya/demos/idedemo/.laya/compile.js","compile"]
  1. 我们观察这个compile.js文件发现 Laya集合了几个工具
  • gulp
  • rollup
  • rollup-plugin-typescript2
  • rollup-plugin-glsl
  1. 我们接下来用npm 安装上面几个插件
  2. 安装成功后,在.laya目录下复制 compile.js 新建一个名字为 gulpfile.js (必须是这个名字)

image-20190924200252783

  1. 右键菜单 选择

image-20190924200412048

  1. 修改我们这个参数配置

image-20190924200457724

主要是修改我们这个 gulp 路径

image-20190924200526822

选择 Layabox 自带的 gulp 文件夹

image-20190924200632868

具体路径地址(你根据自己地址写)

1
/Applications/LayaAirIDE_beta2.3.0.app/Contents/Resources/app/node_modules/gulp
  1. 接下来修改 我们新建的文件 gulpfile.js 的代码

原代码

1
let useIDENode = process.argv[0].indexOf("LayaAir") > -1 ? true : false;

修改为

1
2
3
let addvalue = process.argv.splice(2,2)[1];
process.argv[process.argv.length-2] = addvalue+"="+process.argv[process.argv.length-2].replace("gulpfile","compile");
let useIDENode = process.argv[0].indexOf("node") > -1 ? true : false;

之所以这么修改是因为

layaIde 编译 compile.js 打印的 process.argv 内容是

1
["/Applications/LayaAirIDE_beta2.3.0.app/Contents/Frameworks/Code Helper.app/Contents/MacOS/Code Helper","/Applications/LayaAirIDE_beta2.3.0.app/Contents/Resources/app/node_modules/gulp/bin/gulp.js","--gulpfile=/test/laya/demos/idedemo/.laya/compile.js","compile"]

而我本地的 Webstorm 编译 gulpfile.js 打印的 process.argv 内容是

1
["/usr/local/bin/node","/Applications/LayaAirIDE_beta2.3.0.app/Contents/Resources/app/node_modules/gulp/bin/gulp.js","--no-color","--gulpfile","/test/laya/demos/idedemo/.laya/gulpfile.js","--tasks"]

读者可以根据自己的环境 更改内容,以上便是如果使用Webstorm 编译Laya2.0项目.

双击这个 compile 然后 发现 编辑通过

image-20190924201158236

image-20190924201231747

我们写一行输出

image-20190924201346213

然后重新编译

image-20190924201423882

我们发现 正确输出 但是 文件路径指向了我们生成的 js 文件 这个不是我们要的

注意: 这样编译后,我们发现在调试的时候,编译器总是指向编译后的JavaScript文件,这个是个很头疼的时候,上次因为忙,今天得以进一步了解,其实还是参数的问题

需要修改代码:

原代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//使用browserify,转换ts到js,并输出到bin/js目录
gulp.task("compile", prevTasks, function () {
// 发布时调用编译功能,判断是否点击了编译选项
if (global.publish && !global.config.compile) {
return;
} else if (global.publish && global.config.compile) {
// 发布时调用编译,workSpaceDir使用publish.js里的变量
workSpaceDir = global.workSpaceDir;
}

return rollup.rollup({
input: workSpaceDir + '/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 => {
return bundle.write({
file: workSpaceDir + '/bin/js/bundle.js',
format: 'iife',
name: 'laya',
sourcemap: false
});
});
});

修改后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//使用browserify,转换ts到js,并输出到bin/js目录
gulp.task("compile", prevTasks, function () {
// 发布时调用编译功能,判断是否点击了编译选项
if (global.publish && !global.config.compile) {
return;
} else if (global.publish && global.config.compile) {
// 发布时调用编译,workSpaceDir使用publish.js里的变量
workSpaceDir = global.workSpaceDir;
}

return rollup.rollup({
input: workSpaceDir + '/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 => {
return bundle.write({
file: workSpaceDir + '/bin/js/bundle.js',
format: 'iife',
name: 'laya',
sourcemap: true
});
});
});

其实就是修改 sourcemap: true 而已

另外去修改 我们的项目配置文件 tsconfig.json 里面 的 tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"noEmitHelpers": true,
"sourceMap": true
},
"exclude": [
"node_modules"
]
}

同理也是 sourcemap: true 然后重新编译我们的项目

image-20190924201833740

同理 也可以断点调试

image-20190924201904468

image-20190924201918327

以上 全部搞定

2019年12月20日 发现 本地环境更新 编译报错:

1
semantic error TS2354: This syntax requires an imported helper but module 'tslib' cannot be found

解决办法:参考链接 stackoverflow

Noob mistake (which I just made). Try:

1
npm install tslib

or

1
npm i

Personally before signing off on Friday I did a git clean -fxd, but no npm i so all the npm packages were missing. Doh!

我只用了 npm install tslib 就成功解决问题。

另外关于Layabox1.x版本 和前面的2.x 版本 细节可以参考我的另外一篇文章

--- 本文结束 The End ---