random-yang / GAMES202-homework-framework

基于官方发布的作业0修改,目的在于给对前端不熟悉的同学更简单的配置过程和更好的开发体验。

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

GAMES 202 作业框架(基于现代web开发流)

本框架是在官方发布的 homework0 的基础上进行简单修改得到的,对于官方提供的框架代码基本没有做任何的修改。

主要修改有:

  • 引入 npm 包管理(主要是为了减少手动管理 lib 包)
  • 将之前的 /lib 文件夹删除(因为我们已经不需要手动引入这些包了,只需要通过npm去下载管理)
  • 引入模块热更新能力(利用 vite 构建工具提供的能力)
  • 将之前全局注册的模块更改为现在主流的 esm 模块 (正如你能在代码中看到的 import/export)

修改之后的好处:

  • 自动具备server能力,不需要同学再自己去配置安装各种静态 server,例如vscode 的 live-server、或者是自己用node或者python写的server,这些都不需要了。
  • 热更新,理论上你的项目跑起来之后,修改任何源代码,浏览器都会自动更新
  • 更清晰的模块引用关系

如何跑起来:

  1. 安装nodejs(如果你没有安装)
  2. 安装 npm 包管理工具(通常安装完nodejs就自动安装了npm)
  3. 进入当前项目的文件夹运行
npm i

...安装完毕后

  1. 仍然在当前项目文件夹运行
npm run dev

...几秒钟后

在浏览器中访问 http://localhost:3000/ 这时候你应该能看到本次作业所提供的作业框架对应的效果。

以上流程跑通之后,下一次再起项目就只需要运行第4步的 npm run dev 就可以了。

About

基于官方发布的作业0修改,目的在于给对前端不熟悉的同学更简单的配置过程和更好的开发体验。


Languages

Language:JavaScript 90.3%Language:GLSL 8.0%Language:HTML 1.7%