▉ 新手任務：安裝PixiJS

系統提示：「工欲善其事，必先利其器」，PixiJS青銅玩家獲得一把木劍。

赤手空拳的去打怪就準備被怪打，所以至少要先完成新手任務，首先就是要把PixiJS給裝起來啦。

PixiJS 教程中文版中利用的版本是v4.5.5，這裡也會跟著使用這個版本。而關於安裝PixiJS的方式跟大多數套件一樣有三種：npm、下載JS文件、CDN

安裝PixiJS方法

1. npm
   Install

   npm i pixi.js
   

   There is no default export. The correct way to import PixiJS is:

   import * as PIXI from 'pixi.js'
   

2. 下載JS文件

   • 可以從以上PixiJS的主要發布頁面中，找到各種版本的PixiJS，然後找到v4.5.5的，往下滑到Asset的部份，可以看見很多個文件（如下圖），其中最重要的就是pixi.js跟pixi.min.js，這兩個檔案都可以使用。
   • pixi.js vs. pixi.min.js ？[註]
     • .js檔案：為JavaScript原始檔案
     • .min.js檔案：為壓縮過後的JavaScript檔案
   • 怎麼使用？
     ( a ) 先下載pixi.js或pixi.min.js其中一個檔案，在教程中使用的是後者pixi.min.js。
     ( b ) 下載好後放到想使用pixi的資料夾中
     ( c ) 利用HTML的<script src="">標籤，在src中放入相對路徑：
     [注意] 相對路徑會依照檔案位置相對於目前這個HTML檔案位置的不同而有所改變，例如底下例子中的HTML檔就會與pixi.min.js位在同一個資料夾中。

     <script src="pixi.min.js"></script>
     

3. CDN
   一樣會看到很多選擇，就選底下圖中的第一項或第三項即可。然後同樣利用HTML中的<script src="">標籤，將CDN網址放入src之中。

   <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.5/pixi.min.js"></script>
   

   

大致上就是這三種安裝方法，雖然教程是使用第二種下載的方式，但這裡選擇第三種載入CDN的方法。

[註] .js檔與.min.js檔案的區別
功能上都是一樣的，無論使用哪個都可以使用。既然這樣，就有點好奇他們之間的差異，所以額外紀錄起來。

	.js檔	.min.js檔
優點	可讀性高，比較好觀察、修改	1. 減小體積，使傳輸變快 2. 可以使JS防止被偷窺、竊取
缺點	體積較大，傳輸較慢	可讀性差
圖片

參考資料

PixiJS 教程中文版