WEBPACK & BABEL 打包项目

时间 2019-12-08

标签 webpack babel 打包项目繁體版

原文原文链接

本文首发于 BriFuture's Blog。html

最近在用 Vue 重写以前的一个项目 Compass，这个项目之前是用 QML + JavaScript 在 Qt 平台上搭建的。这是我本科毕设时作的一个项目，颇有意思也学了不少东西（WebGL，QML 等等），但已经好久没有更新了。node

旧项目的翻新

不更新的缘由有几个：一是由于主要的功能都已经实现，程序长时间运行也不会出错；另一点就是当时是用 QtCreator 做为 IDE 进行开发的，每次修改代码以后都须要从新编译项目，致使开发起来很是耗时。尽管 QtCreator 为 QML 和 JavaScript 做了不少优化，在程序运行过程当中也能够进入 DEBUG SESSION 中查看变量，可是开发过程仍然很繁琐。webpack

Compass 这个项目一直被丢在 Github 上，直到最近我学习了 Vue，我发现这个工具让 Web 开发变得异常简单，而且它支持 hot-reload（固然这个功能是由 webpack devserver 提供的）。因而我最近就尝试将以前的代码移植到 浏览器 中。以前的项目是 QML + JS 实现的，核心的功能都是由 JS 提供，移植过程比较轻松（如今大概完成了 50%）。我把 JS 代码更新到了 ES6 语法，而且按功能分放在了不一样的模块，使用 babel 进行转译。git

个人想法是在 Vue 中开发 JS 3D 程序，功能完备后经过 webpack 的打包功能将核心模块打包成一个 JS 文件（打包后就像在 Compass 项目中的 SpacePath.js 文件同样）。相似于将 Vue 当作开发环境，将 QML 环境当作生产环境。github

移植过程的感觉

Vue 项目的开发很简单，我都是经过 Vue-cli@3.x 完成的，它隐藏了不少细节，用起来很简单。说实话，我除了修改一些变量的引用和将以前的 SpacePath.js 文件拆分外没有作多少工做。而后这个新的程序就能够在浏览器中跑了起来，显示出我想要的东西。可是之前编写的 QML 代码无法直接拿来用，不过好在 QML 的代码不复杂，移植到 Vue 中应该不难。web

当我以为基本功能移植的差很少了，我开始想要将分散的各个 JS 文件编译到一个单独的文件中时，我发现 webpack （还有 babel）对于我这个新手来讲很难，个人想法并很差实现。由于这些项目的版本迭代快，可能版本不对就会出现一些莫名其妙的错误。并且最要命的是，尽管在打包过程当中 webpack（babel）给出了错误提示，但我在 Google 上面仍然找不到和我碰到的是同样的问题，找到的解决方法不尽相同，但帮助甚少。json

这里记录下个人打包过程，颇有可能对你没有什么帮助，不过或许会给你一些提示，而后你就能本身动手解决这个问题了。canvas

声明：我并不了解 Webpack 和 Babel 的工做原理，仅仅是经过本身的尝试找到了解决问题的方法。这个方法的解决思路（哦好像没有思路，就是不断的尝试和 Google）并不必定是对的，但它对我来讲确实是有用的。浏览器

Webpack 打包

首先在 package.json 中添加一条自定义的命令：babel

{
    ...
    "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。