[譯]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~