![[AI教做人]Web前端 Html ,Package构造和项目结构20-30-40](http://pic.xiahunao.cn/yaotu/[AI教做人]Web前端 Html ,Package构造和项目结构20-30-40)
前面一个文章说了几个Web前端 Html 构造的架构和层次只是伪代码记录一下代码请替换你自己的路径*方案B也用了EsBuild 安装也不麻烦就看你要不要用了frontend-dev-server/ │ ├── package.json ← 就是这个文件 │ ├── wwwroot/ │ └── frontend/ │ ├── src/ │ │ └── main.js ← 入口源文件 │ └── dist/ │ └── main.js ← 构建输出 │ └── node_modules/ ← npm install 生成npm run dev ::方案对比方案 A用 npm 脚本串联最简单在 scripts 里加一个dev构建完成后自动打开浏览器。可以用open跨平台或系统命令scripts: { build: esbuild wwwroot/frontend/src/main.js --bundle --formatesm --outfilewwwroot/frontend/dist/main.js, dev: npm run build open http://localhost:3000 }open是 macOS/Linux 命令Windows 用start。跨平台可用npx cross-env或安装open包。但这种方式只构建一次并打开浏览器不会监听文件变化自动重建。方案 Besbuild 的 serve/watch 自动打开推荐用 esbuild 自带的--serve或--watch--servedir构建后通过本地服务器访问配合浏览器自动打开scripts: { dev: esbuild wwwroot/frontend/src/main.js --bundle --formatesm --outfilewwwroot/frontend/dist/main.js --serve --servedirwwwroot/frontend sleep 1 open http://localhost:8000 }说明--serve会启动一个开发服务器并提供--servedir指定目录的静态文件。这样每次改动源码浏览器页面刷新即可生效无需手动重新构建。如果希望监听文件变更自动重建不重启服务器可改用dev: esbuild wwwroot/frontend/src/main.js --bundle --formatesm --outfilewwwroot/frontend/dist/main.js --watch --serve --servedirwwwroot不完整 Package.json 参考{ dependencies: { lit: ^3.3.3 }, devDependencies: { esbuild: ^0.28.2 }, scripts: { build: esbuild wwwroot/frontend/src/main.js --bundle --formatesm --outfilewwwroot/frontend/dist/main.js } }无厘头 -参考 - 以后试试自动构建 COCOs最新版本没什么用的参考动画的3种变速和减速方法http://novacreo.com/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%AF%E4%BA%A4%E6%B5%81/cocos2d-x%E5%8A%A8%E7%94%BB%E5%8A%A0%E9%80%9F%E4%B8%8E%E5%87%8F%E9%80%9F/点击打开链接