[译]VSCode and WebGL 开发

原文连接
做者: Armno P.TH
理由: 简单实用的小伎俩

Foreword

Vscode 是一个优秀的前端开发编辑器，但仍然会有一些问题的存在，我以为我应该作一些笔记。

我见过大部分教程都是以这样开头: 首先建立index.html and main.js文件

• 在index.html放入<canvas>

<canvas id="canvas"></canvas>
复制代码

在main.js，获取 canvas 元素来做为渲染 WebGL内容的上下文

const canvas = document.getElementById('canvas');
// or const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
复制代码

• 而后基本上全部东西都使用gl对象

// methods
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.attachShader();
gl.vertexAttrib1f();
gl.getAttribLocation();
// constants
gl.COLOR_BUFFER_BIT;
gl.VERTEX_SHADER;
gl.COMPILE_STATUS;
复制代码

我发现VSCode并不能智能提示有关gl代码，由于VSCode发现它是 any 类型，或者VSCode不知道gl对象实际究竟是什么类型。所以我没法使用编辑器的智能提示功能

刚开始我以为它没什么问题，可能也会忍受。但你会发现，gl对象是WebGLRenderingContext类型，而且若是去查阅这个接口规范，会发现有超过200个属性(常量)和方法。个人天，我将他们所有记住可能性为 0 好么？！并且超过87.525%的概率我将打错这些属性和方法。

如何从VSCode中获得相应的辅助呢？

实际形成这个的缘由在于VSCode不知道 canvas元素 从 document.getElementById()or document.querySelector()方法中返回的是什么类型。
使用 document.getElementById(), HTMLElement类型将被返回

使用 document.querySelector(), Element将被返回

然而两种都不够具体，咱们须要更明确的类型来表示canvas - HTMLCanvasElement。我认为有2种变通的方法可使用

Option1：使用document.createElement()

不须要在HTML中建立<canvas>标签，而是直接用JavaScript建立它，并动态的放入页面中

const canvas = document.createElement('canvas');
document.querySelector('body').appendChild(canvas);
const gl = canvas.getContext('webgl');
复制代码

经过document.createElement('canvas')建立canvas，VSCode能知晓它是属于HTMLCanvasElement类型，而且经过调用.getContext()在canvas上，VSCode能获得它实际类型，再也不是any

传入一个字符串 webgl做为参数，VSCode知道方法将返回 WebGLRenderingContext类型

如今咱们能够得到代码的自动提示了

Option2：使用TypeScripts Type Assertion(类型断言)

若是项目使用TS，咱们能用 Type Assertion 来告诉VSCode，canvas对象是属于什么类型

const canvas = <HTMLCanvasElement>document.getElementById('canvas');
复制代码

这告诉TS编译器将canvas对象做为HTMLCanvasElement类型，而不是默认HTMLElement类型。可是它和类型转换还不同。
当VSCode知道类型后，它将能够像下面那样代码自动提示。

做为学习资源的代码编译器

VSCode有了智能提示功能后是很是有帮助的。不只能够帮助咱们加快编码速度减小错误率，还能够做为一个工具来学习WebGL新的方法和APIs，不须要额外去查官方文档
例如，鼠标悬停在一个方法名上将会提示方法的参数，顺序，和返回的值。要否则每次都要在浏览器和google中切换来查看第五个参数是什么

在方法或者一个属性名上点击 Cmd+click(or Ctrl+click)将跳转到定义上。若是幸运的话，定义文件里将有相关文档。虽然WebGL APIs还没彻底实现，可是我相信它最终会像其余API同样内置

补充:安装webpack 和 TypeScript

若是在项目中使用TS，则少不了转译成JS这一步。因此使用webpack进行构建转译。简单示例以下：

1. 安装TS

npm install --save-dev typescript
复制代码

2. 安装webpack

npm install --save-dev webpack webpack-cli webpack-dev-server
复制代码

3.安装TS loader并支持sourcemaps

npm install --save-dev awesome-typescript-loader source-map-loader
复制代码

4. 建立webpack.config.js配置文件

const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
 },
 devServer: {
   contentBase: './dist'
 },
 resolve: {
   extensions: ['.ts', '.tsx', '.js', '.jsx']
 },
 devtool: 'source-map',
 module: {
   rules: [
     {
       test: /\.tsx?$/,
       loader: 'awesome-typescript-loader'
     }
   ]
 }
};
复制代码

5. 启动webpack服务

npx webpack-dev-server
复制代码

END~