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。