本文首發於 BriFuture's Blog。
最近在用 Vue 重寫之前的一個項目 Compass，這個項目以前是用 QML + JavaScript 在 Qt 平台上搭建的。這是我本科畢設時做的一個項目，很有意思也學了很多東西（WebGL，QML 等等），但已經很久沒有更新了。
舊項目的翻新
不更新的原因有幾個：一是因為主要的功能都已經實現，程序長時間運行也不會出錯；另外一點就是當時是用 QtCreator 作為 IDE 進行開發的，每次修改代碼之后都需要重新編譯項目，導致開發起來非常耗時。盡管 QtCreator 為 QML 和 JavaScript 作了很多優化，在程序運行過程中也可以進入 DEBUG SESSION 中查看變量，但是開發過程仍然很繁瑣。
Compass 這個項目一直被丟在 Github 上，直到最近我學習了 Vue，我發現這個工具讓 Web 開發變得異常簡單，並且它支持 hot-reload（當然這個功能是由 webpack devserver 提供的）。於是我最近就嘗試將之前的代碼移植到 瀏覽器 中。之前的項目是 QML + JS 實現的，核心的功能都是由 JS 提供，移植過程比較輕松（現在大概完成了 50%）。我把 JS 代碼更新到了 ES6 語法，並且按功能分放在了不同的模塊，使用 babel 進行轉譯。
我的想法是在 Vue 中開發 JS 3D 程序，功能完備后通過 webpack 的打包功能將核心模塊打包成一個 JS 文件（打包后就像在 Compass 項目中的 SpacePath.js 文件一樣）。類似於將 Vue 當做開發環境，將 QML 環境當做生產環境。
移植過程的感受
Vue 項目的開發很簡單，我都是通過 Vue-cli@3.x 完成的，它隱藏了很多細節，用起來很簡單。說實話，我除了修改一些變量的引用和將之前的 SpacePath.js 文件拆分外沒有做多少工作。然后這個新的程序就可以在瀏覽器中跑了起來，顯示出我想要的東西。但是以前編寫的 QML 代碼沒法直接拿來用，不過好在 QML 的代碼不復雜，移植到 Vue 中應該不難。
當我覺得基本功能移植的差不多了，我開始想要將分散的各個 JS 文件編譯到一個單獨的文件中時，我發現 webpack （還有 babel）對於我這個新手來說很難，我的想法並不好實現。因為這些項目的版本迭代快，可能版本不對就會出現一些莫名其妙的錯誤。而且最要命的是，盡管在打包過程中 webpack（babel）給出了錯誤提示，但我在 Google 上面仍然找不到和我碰到的是一樣的問題，找到的解決方法不盡相同，但幫助甚少。
這里記錄下我的打包過程，很有可能對你沒有什么幫助，不過或許會給你一些提示，然后你就能自己動手解決這個問題了。
聲明：我並不了解 Webpack 和 Babel 的工作原理，僅僅是通過自己的嘗試找到了解決問題的方法。這個方法的解決思路（哦好像沒有思路，就是不斷的嘗試和 Google）並不一定是對的，但它對我來說確實是有用的。
Webpack 打包
首先在 package.json 中添加一條自定義的命令：
{
...
"scripts" : {
...
"bcompass": "webpack --config compass.config.js"
}
}
compass.config.js 是在項目根目錄下的一個 webpack 配置文件，最終的文件內容如下：
var path = require('path');
module.exports = {
entry: "./src/compass/SpacePath.js",
// chainWebpack: config => {
// config.module.rules.delete('eslint');
// },
mode: 'production',
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options:{
presets:["@babel/preset-env"]
},
exclude:[/node_modules/, /assets/],
},
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'spacepath.js'
},
optimization: {
minimize: false
}
}
babel 配置文件 .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
// "useBuiltIns": "entry"
"targets": {
"browsers": ["last 2 versions", {"modules": false}]
}
}
]
],
"plugins": ["transform-class-properties"]
}
運行 yarn bcompass 就會執行打包操作。配置的 Babel 環境是 "@babel/preset-env": "^7.4.2"。
在打包過程中出現了類變量定義的問題（語法問題）：
根據錯誤提示，安裝 babel-plugin-transform-class-properties 插件，並且在 .babelrc 中添加這個插件。
另外一個問題是打包過程中無法找到資源文件：
我的解決方法很簡單，將 @ 換成 .. 相對路徑，解決了找不到資源文件的問題。在使用 Vue 構建項目時沒有這個問題，應該是 Vue 配置了 @ 的別名，但我的 compass.config.js 中沒有配置，所以出現問題。
最后打包后的 spacepath.js 可以直接在 html 界面中引用：
<body>
<div id=app>
<canvas id="canvas" width="800" height="600"></canvas>
</div>
<script src=/static/gl-matrix-min.js></script>
<script src=/static/webgl-obj-loader.min.js> </script>
<script src=/static/spacepath.js> </script>
</body>
找到 canvas 的 document 對象，傳給 SpacePath 的構造函數，在 canvas 中就畫出 3D 場景了。
寫在后面
移植過程還沒有全部完成，全部完成后就可以實現在 Web 瀏覽器中做到之前的 QQuick 項目的效果。
雖然我編寫了 WebGL code 實現了 3D 場景的繪制，如果想了解 WebGL 中一些底層原理的話，就推薦自己動手實現一遍，但如果你想要快速的進行 WebGL 開發的話，我更推薦你去使用 Three.js。