---
# System prepended metadata

title: Pixi.js 環境設定
tags: [PixiJS]

---

# 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
```javascript=
new CopyPlugin({
    patterns: [
        {
            from: path.resolve(__dirname, "assets"),
            to: path.resolve(__dirname, "dist/assets"),
        },
    ]
}),
```


如果是複製指定檔案
```javascript=
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)
```nodejs
npm install copy-webpack-plugin@9 -D
```
:::

## v6 tsconfig設定
* 修改 tsconfig
```json=
{
  "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
* 安裝相關套件
```nodejs
npm install -D babel-core @babel/core @babel/preset-env --save-dev
```

---

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

    :::spoiler
    :::info
    ### BEFORE
    ```javascript=
    {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
    }
    ```

    ### AFTER
    ```javascript=
    {
        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 開頭加上
    ```typescript
    /// <reference path="../typings/howler.d.ts"/>
    ```
    :::warning
    不確定是否一定要加在入口, 但只需要加一次
    :::
:::
    
:::info

* 全域引入 js
    ```typescript
    const HowlObj = require("../libs/howler/howler.js");
    ```
* index.html 載入 js
    ```html
    <script src="libs/howler/howler.js"></script>
    ```

:::warning

* require 的內容
    ```typescript
    { Howl,Howler }
    ```
* 建立實體
    ```typescript
    const obj = new HowlObj.Howl({
            src: ["相對路徑/檔名.mp3"]
    });
    ```
    
* [TS 3.9](https://devblogs.microsoft.com/typescript/announcing-typescript-3-9-beta/#cjs-auto-imports) 以後, require 可這樣寫
    ```typescript
    const { Howl } = require("../libs/howler/howler.js");
    ```
    ```typescript
    const obj = new Howl({
        src: ["相對路徑/檔名.mp3"]
    });
    ```

* require 拿到的 Howl, 型別是 any
![](https://i.imgur.com/Tx2nIDb.png)

:::

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