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 場景了。