WEBPACK & BABEL 打包项目
本文首发于 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。
本博客由 BriFuture 原创,并在个人博客(WordPress构建) BriFuture's Blog 上发布。欢迎访问。
欢迎遵照 CC-BY-NC-SA 协议规定转载,请在正文中标注并保留本人信息。