如何从源码构建 PlayCanvas Engine 并用 npm run serve 验证构建产物【免费下载链接】enginePowerful web graphics runtime built on WebGL, WebGPU, WebXR and glTF项目地址: https://gitcode.com/GitHub_Trending/en/engine当你需要基于 PlayCanvas Engine 做二次开发修改src/下的源码、给团队提供一个可本地引用的引擎包或在本地页面上直接加载自研构建时需要走完一条完整链路克隆仓库、安装依赖、从源码构建所有构建产物最后确认产物确实生成且可被访问。本文的完成标志是build/目录中生成 rel/dbg/prf/min 四种引擎包UMD ESM与类型声明并且npm run serve启动的静态服务器能在http://localhost:51000上返回这些文件。前提环境只有一条Node.js 18。README.md 的 “How to build” 一节要求 Node.js 18package.json 的engines字段进一步声明为node 18.3.0。构建体系由 esbuild 驱动JS 包加 TypeScript/Rollup.d.ts打包这些都在 AGENTS.md 的 “Build System” 一节中说明。安装依赖在仓库根目录执行npm install这一步安装 package.json 中的全部 devDependenciesrollup、esbuild、turbo、typedoc、mocha 等构建与测试都依赖它们。安装完成后node_modules/.bin里会有后续turbo、serve等命令。执行完整构建npm run build该脚本对应turbo run build:all。按 turbo.json 中的任务依赖build:all会依次触发build:umd、build:esm、build:types三组任务最终等价于构建 rel/dbg/prf/min 四种类型、UMD 与 ESM 两种格式外加类型声明。构建入口是src/index.js见 build.mjs产物全部输出到仓库根的build/目录。构建完成后build/中应该出现以下文件turbo.json 的各任务outputs字段和 test/bundles/helpers.mjs 中的目标列表都逐一列出了这些路径产物路径UMD 包rel / dbg / prf / minbuild/playcanvas.js、build/playcanvas.dbg.js、build/playcanvas.prf.js、build/playcanvas.min.jsESM 单文件包build/playcanvas.mjs、build/playcanvas.dbg.mjs、build/playcanvas.prf.mjs、build/playcanvas.min.mjsESM 未打包模块树build/playcanvas/src/index.js、build/playcanvas.dbg/src/index.js、build/playcanvas.prf/src/index.js类型声明build/playcanvas.d.ts其中 UMD 包是给script标签场景用的单文件ESM 单文件包供打包器整体引入而build/playcanvas*/src/下的模块树才是package.json中import playcanvas在对应条件下实际解析到的目录AGENTS.md 的 “Build System” 一节对此有说明。如果只需要部分产物可以用 package.json scripts 中的细分命令它们直接调用 build.mjsnpm run build:rel:umd # 只构建 release UMD 包 npm run build:types # 只构建 .d.ts 类型声明 npm run build:sourcemaps # rel ESM 构建并附带 source mapsbuild.mjs也支持直接传参调用常用选项为--type rel|dbg|prf|min|types、--format esm|umd、--watch、--sourcemaps完整用法见node build.mjs --help的输出。两点注意构建输出全部落在build/AGENTS.md 明确要求不要直接编辑build/里的文件也不要把它们提交进仓库build/应由npm run build重新生成。npm run clean会递归删除整个build/目录build.mjs 中--clean分支执行rm -rf build。只有在你确实要清空产物重新构建时才使用。用 npm run serve 验证构建产物package.json中定义了serve: serve build -l 51000 --cors即在仓库根目录运行npm run serve会用serve工具把build/目录作为静态站点根目录监听端口51000并开启 CORS 响应头。CORS 的用途是让其他来源的页面比如你自己的项目页面可以跨域import或加载本地构建产物。启动后按构建产物清单抽查几个路径确认返回的是文件内容而不是 404http://localhost:51000/playcanvas.jsrelease UMD 包http://localhost:51000/playcanvas.min.jsmin UMD 包http://localhost:51000/playcanvas/src/index.jsESM 模块树入口# 任选其一确认 HTTP 返回的是 JS 文件内容 curl -sI http://localhost:51000/playcanvas.js curl -s http://localhost:51000/playcanvas/src/index.js | head浏览器直接打开上述地址同样可行。能取回对应文件说明本次构建的产物路径正确、体积非空且可以被外部页面跨域加载。一个最小可用的消费示例在你的本地页面中按 package.jsonexports中 production 条件对应的路径引入script typemodule // 通过 serve 的 URL 引入自研构建的 ESM 模块树 import { Application } from http://localhost:51000/playcanvas/src/index.js; /script如果需要用调试包把路径换成http://localhost:51000/playcanvas.dbg/src/index.js即可对应exports中development条件的入口。可选用 test:build 做自动化校验npm run serve只能确认文件可访问。如果想让构建产物通过实际的加载与行为检查仓库自带 bundle 测试AGENTS.md 的 Testing 一节npm run build npm run test:buildtest:build用 mocha 运行test/bundles/下的测试对象正是上面列出的四个 UMD 包、四个 ESM 单文件包和三个 ESM 模块树。其中 test/bundles/smoke.test.mjs 会用NullGraphicsDevice从每个构建产物中真正启动一个Application检查app.root、app.scene、app.assets是否为预期的引擎类实例exports.test.mjs、bindings.test.mjs、treeshake.test.mjs则分别校验导出面、live bindings 与 tree-shaking 规则。全部通过即说明产物不仅存在还能被加载并正常构造引擎实例。另外注意区分npm testtest/README.md运行的是源码级单元测试直接加载src/模块不需要先构建和test:build的用途不同本文的“验证构建产物”路径依赖的是后者。边界说明当前仓库 package.json 的版本为2.23.0-beta.7npm run serve暴露的就是该源码对应的构建结果发布版行为以正式发布包为准。serve只是静态文件服务器不会启动图形后端引擎在浏览器中的实际渲染验证需要 WebGL2 或 WebGPU 支持的环境AGENTS.md 声明引擎最低要求 WebGL 2.0。构建完成后如需清空产物使用npm run clean日常增量修改源码后重新执行npm run build或对应细分命令即可不要手改build/内的任何文件。【免费下载链接】enginePowerful web graphics runtime built on WebGL, WebGPU, WebXR and glTF项目地址: https://gitcode.com/GitHub_Trending/en/engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考