思否 (SegmentFault) 专栏:边城客栈 作者:边城(James Fan)
目录/文件 | 说明 |
---|---|
src/ |
|
src/index.html |
主页面(也是唯一 HTML 页面) |
src/less/ |
样式表源码 |
src/scripts/ |
TypeScript 脚本源码 |
docs/ |
文档 |
dist/ |
构建结果(未构建前不存在此目录) |
dist/index.html |
发布页面,直接从 src/index.html 拷贝过来 |
dist/css/ |
从 src/less/ 构建出来的样式表 |
dist/js/ |
从 src/scripts/ 构建出来的脚本,需要浏览器支持 type="module"
|
dist/libs/ |
页面上引用的第三方库,目前只有 jQuery |
开发系统环境(以及 npm scripts 的环境)是 Windows 10,较低 Windows 版本或 Linux 需要对 package.json
中 scripts
下的脚本进行修改。
虽然是前端,仍然采用了项目构建的思想,目标脚本和样式表通过构建生成。构建在 NodeJs 14+ 环境下进行。
开发中使用了 TypeScript,需要 TypeScript 语言服务。虽然大多数支持 TypeScript 的编辑器或 IDE 已经内置了 TypeScript 语言服务支持,可能可能不是最新版本。可以通过 npm 安装最新版本的 TypeScript,之后通过 tsc --version
检查安装的版本。
TypeScript 可以全局安装,也可以局部安装,建议采用局部安装方式:
tetris/> npm install typescript
tetris/> npx tsc --version
最新重构使用 <script type="module" ...></script>
来引用脚本,使用现代 JS 语法,不需要打包,也不需要 Babel 转译,所以去掉了 Babel 和 Gulp,采用最简化的构造方式,由 npm scripts 实现。
完整构建使用 npm run build
命令,注意该命令不包含对旧构建结果的清理工作。
构建 TypeScript 直接使用 tsc
命令,详见 package.json
中的 compile
脚本。
由于 TypeScript 对
type="module"
支持不够友好,源代码中import
语句需要给脚本文件加上.js
扩展名(特别注意——不是.ts
)。
构建 LESS 样式表使用 lessc
命令,详见 package.json
中的 lessc
脚本。
拷贝 index.html
和 jQuery
使用系统命令,详见 package.json
中的 copy-html
和 copy-jquery
脚本。
清理构建结果使用 Powershell Core 的 rm
命令,详见 pckage.json
中的 clean
脚本。
由于使用 type="module"
,不能直接通过浏览器打开本地 index.html
来运行,需要将构建结果(dist
目录)作为静态 Web 发布运行,通过 HTTP 协议访问。Web 服务容器可选用 Nginx、IIS、Apache 等。
基于 Node 技术栈建议选择 http-server,建议全局安装方便在各种开发环境下使用:
/> npm install -g http-server
/> cd d:/workspace/tetris/
/> http-server dist
快捷键 | 功能 |
---|---|
[UP] |
方块旋转(顺时针) |
[LEFT] |
向左移动 |
[RIGHT] |
向右移动 |
[DOWN] |
向下移动 |
[SPACE] |
直降到底 |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型