本文首发于 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。