[LayaAir 2.0]layabox零秒构建项目工具,修改代码后直接就能看效果,不用等待编译什么的。

# LayaBoxEsBuild

##  介绍 
  • 使用 esbuild 来增量构建 layabox 项目 修改代码后立即就能看到效果 提高开发速度,优化开发体验。 

 


## 关于 esBuild
  • esbuild 是一个用 Go 语言编写的用于打包,压缩 Javascript 代码的工具库。它最突出的特点就是速度极快。

  
  •   为什么它能做到那么快

             它是用 Go 语言编写的。
            该语言可以编译为本地代码解析,生成最终打包文件和生成 source maps 的操作全部完全并行化,无需昂贵的数据转换,只需很少的几步即可完成所有操作。
            该库以提高编译速度为编写代码时的第一原则,并尽量避免不必要的内存分配。
            更多详细介绍,详见 Breword 翻译的 esbuild 官方文档

## 安装 
  • npm安装npm i layabox-esbuild -g 注意是全局安装,安装一次就行了。


## 命令 
  • layabox-esbuild -s 直接开始构建项目,在项目目录下执行就能跑起来了

 
  • layabox-esbuild -c <url>指定配置文件来构建项目。在项目根目录下创建 layaboxEsbuildConfig.js 位置,名字都可以随便,执行命令时参数填对就行了 文件,然后导出一个满足 IConfig 接口的对象就行了,默认配置示例如下:         
    /** 配置数据 */module.exports = {    /** 代理src目录,可以是绝对路径或者相对路径 */    src: './src/',    /** 代理bin目录,可以是绝对路径或者相对路径 */    bin: './bin/',};
    然后执行  layabox-esbuild -c ./layaboxEsbuildConfig.js 就可以以指定配置文件来构建项目了。

  
  • layabox-esbuild --log-config    查看配置文件,如果不带后面的url参数则会打印默认的配置数据。


## 全部配置选项 
/**
* 配置接口
*/
export default interface IConfig {
/** 代理src目录,可以是绝对路径或者相对路径 */
src?: string,
/** 代理bin目录,可以是绝对路径或者相对路径 */
bin?: string,
/** 文件路径修改,会把 a 匹配的替换成 b */
filePathModify?: {
a: RegExp,
b: string,
};
/** 代理端口,可以随便指定,只要不冲突就行 */
port?: {
src: number,
bin: number,
},
/** 入口文件名,地址相对于src目录 */
mainTs?: string,
/** 主页地址, 相对于bin目录 */
homePage?: string,
/** 主页脚本, 相对于bin目录 */
homeJs?: string,
/** 入口js文件,相对于bin目录 */
mainJs?: string,
/** 是否打印日志 */
ifLog?: boolean,
/** 是否启用webSocket工具 */
ifOpenWebSocketTool?: boolean,
}

## 注意 
  • esbuild只是构建项目,不会把src的代码打包到bin/js/bundle.js文件里面而是缓存在内存中的,所以只能在开发环境中使用,最后再用laya的编译和打包,把代码都打包到bin/js/bundle.js文件中,它的作用只能体现再开发时,能更快的响应代码改动,不会影响最终laya编译的结果。 

 
  • 最好的方案是把webpack的增量编译一起打开,因为esbuild只是构建不编译,所以在补个webpack的增量编译就完美了,如果电脑卡的话就算了,最后上传代码时别忘了用laya或者webpack编译一下就行,不然bin/js/bundle.js是不会被更改的。

已邀请:

152*****794

赞同来自: 期待。 Nikeo

操作简介:全局安装包后在项目目录下执行 layabox-esbuild -s 命令就可以跑起来了,此时控制台会打印一个主页的地址,在浏览器输入这个地址就能访问游戏了,局域网也能访问,就跟打开一个服务一样简单,只不过是打开的是一个实时按需编译的服务而已。

152*****794

赞同来自:

项目运行截图

捕获31.JPG

 
断点截图
 

捕获44.JPG

 

阳光宅男

赞同来自:

外网小项目正常能用 内网大项目没有编译 也没报错头大

要回复问题请先

商务合作
商务合作