前情提要
在学习WebGL的过程中,需要在Web环境进行开发,最开始使用js简单进行了测试,开发效率并不高。
因而替换成了ts,主要是因为有代码提示,方便学习和记忆。
因为学习过程中不需要其他的页面,所以没有使用其他前端框架(只有一个index.html)
在搭建这个环境的时候,发现了很多问题,比如es6语法html无法很好的解析。
这里使用的是任务形式去运行项目。
第一步 安装TypeScript和browserify
// typescript@x.x.x 可以选择安装不同版本的ts,默认最新
// -g 全局安装
cnpm install typescript -g
// 用于解释ES6(ES6转换为ES5)
cnpm install browserify -g
第二步 创建package.json
// 在当前目录下创建出package.json
cnpm init
文件内容大致是这样的:
{
"name": "webgl_ts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"lib": "lib"
},
"dependencies": {
"typescript": "^4.3.2"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC"
}
第三步 创建tsconfig.json
// 在当前目录下创建出tsconfig.json
tsc --init
文件内容大致是这样的:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "bin-debug",
"rootDir": "./src"
},
"include": [
"src/**/*",
"lib/**/*"
],
"exclude": []
}
第四步 创建目录
分别创建出bin-debug、src、lib(可以根据自己需求和习惯随意创建)
第五步 安装vsc插件[Debugger for Microsoft Edge]
这里不做过多要求,可以选择其他习惯的浏览器(如:Chrome、火狐等)
第六步 创建launch.json
在.vscode中创建出launch.json
选择Edge调试
大致内容Copy如下:
{
"version": "0.2.0",
"configurations": [
{
"name": "edge调试",
"type": "edge",
"request": "launch",
"trace": true,
"smartStep": true,
"file": "${workspaceRoot}/index.html",
"runtimeArgs": [
"--allow-file-access-from-files",
"--allow-file-access-frome-files",
"--disable-web-security"
],
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"userDataDir": "${workspaceRoot}/.vscode/edge",
"fixedPort": false,
"sourceMapPathOverrides": {
"src/*": "${workspaceRoot}/src/*"
},
"preLaunchTask": "browserify"
}
]
}
注意下preLaunchTask,这里设置调试会话开始前要运行的任务
第七步 创建tasks.json
在.vscode中创建出tasks.json
内容大致如下:
{
"version": "2.0.0",
"tasks": [
{
"label": "tsc",
"type": "shell",
"command": "tsc",
},
{
"label": "browserify",
"type": "shell",
"command": "browserify",
"args": [
"./bin-debug/App.js",
"-o",
"./bin-debug/es5/App_ES5.js"
],
"group": {
"kind": "build",
"isDefault": true
},
"dependsOn": [
"tsc"
]
}
]
}
这里配置了两组任务
- **第一组任务tsc,任务是编译src下面的ts文件,将编译好的js文件放在bin-debug下面
- 第二组任务browserify,任务是将bin-debug目录下的js文件解释称es5,方便html读取**;将解释好的文件放到bin-debug/es5下面
第二组任务中使用args,这里面定义了完整的命令
browserify ./bin-debug/App.js -o ./bin-debug/es5/App_ES5.js
第八步 index.html
简简单单HTML
内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="./bin-debug/es5/App_ES5.js"></script>
</body>
</html>
第九步 创建App.ts
src目录下创建入口目录,叫什么根据自己喜好定义
第十步 运行
F5运行项目
在.vscode下面会自动创建出edge
bin-debug目录下也会根据src目录下的格式创建出相应的js文件,但是会多出一个es5目录,这个目录就是html可以直接读取的es5文件
至此,所有基础框架已经完成~愉快的学习吧
开源万岁!