# Pixi.js 環境設定
---
## webpack相關設定
[Typescript ES6 + webpack 設定](https://hackmd.io/pEYltlTJT-qz3_v5MJmCPg)

## 安裝必要package
| package |
| -- |
| pixi.js |
| html-webpack-plugin |

## 安裝選用package
| package | 用途 |
| -- | -- |
| copy-webpack-plugin | 複製資源到發佈資料夾 |
| clean-webpack-plugin | 清空發佈資料夾 |

### copy-webpack-plugin 設定
自動更新特定資料夾或檔案
:::spoiler
修改 webpack.config.js
config -> plugins 新增項目
假設資源都放在 assets 資料夾, 發佈資料夾是 dist

new CopyPlugin({
    patterns: [
        {
            from: path.resolve(__dirname, "assets"),
            to: path.resolve(__dirname, "dist/assets"),
        },
    ]
}),

如果是複製指定檔案

from: path.resolve(__dirname, "相對路徑資料夾/檔名.副檔名"),
to: path.resolve(__dirname, "相對路徑資料夾")

:::

:::danger
HookWebpackError: Not supported when copy-webpack-plugin is used on Windows

:::success
嘗試降版 - [來源](https://stackoverflow.com/a/70325884)

npm install copy-webpack-plugin@9 -D

:::

## v6 tsconfig設定
* 修改 tsconfig

{
  "compilerOptions": {
    "moduleResolution": "node",
    // Required for importing 3rd-party dependencies like EventEmitter3
    "esModuleInterop": true,
    // Loaders needs this to use the more strict mini-signal types
    "paths": {
      "mini-signals": [
        "node_modules/resource-loader/typings/mini-signals.d.ts"
      ]
    },
    "baseUrl": "./",
  }
}

[參考來源](https://github.com/pixijs/pixijs/wiki/v6-Migration-Guide)

## babel (遭遇問題仍未解決)
:::spoiler
* 安裝相關套件

npm install -D babel-core @babel/core @babel/preset-env --save-dev

---

* 修改 webpack.config.js
將原本 ts-loader 的部分換成 babel-loader

:::spoiler
:::info
### BEFORE

    {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
    }

### AFTER

    {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        }
    }

:::

---

* 目前遭遇的問題
* 使用 **<font color=red>private</font>** 無法通過編譯, 需要用 **<font color=red>#</font>** 取代
[TypeScript class Caveats](https://www.typescriptlang.org/docs/handbook/2/classes.html#caveats), [MDN-private class features](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields)
* babel FAQ說明
:::warning
**Why am I getting a Syntax Error/Unexpected Token?**

It's most likely the case that you didn't include a plugin/preset that supports that feature. (It's also possible it's a bug in the parser, or that it actually is a syntax error).
:::

---

## ES6 專案使用 ES5 lib

#### d.ts 放在 typings 資料夾底下
:::info

以 [howler](https://github.com/goldfire/howler.js) v2.0.12 為例
* 入口 ts 開頭加上

    /// <reference path="../typings/howler.d.ts"/>

:::warning
不確定是否一定要加在入口, 但只需要加一次
:::
:::

:::info

* 全域引入 js

    const HowlObj = require("../libs/howler/howler.js");

* index.html 載入 js

    <script src="libs/howler/howler.js"></script>

:::warning

* require 的內容

    { Howl,Howler }

* 建立實體

    const obj = new HowlObj.Howl({
            src: ["相對路徑/檔名.mp3"]
    });

* [TS 3.9](https://devblogs.microsoft.com/typescript/announcing-typescript-3-9-beta/#cjs-auto-imports) 以後, require 可這樣寫

    const { Howl } = require("../libs/howler/howler.js");

    const obj = new Howl({
        src: ["相對路徑/檔名.mp3"]
    });

* require 拿到的 Howl, 型別是 any

:::

---
###### tags: `PixiJS`