一、如何放Library進來?

上一篇認識了 Library，也知道接下來會用到 GSAP 和 Three.js。但新的問題來了：

我要怎麼把它們放進自己的專案？

這時候就要認識 npm。它的全名是 Node Package Manager，可以幫我們管理 JavaScript 的套件。不過使用 npm 前，要先安裝 Node.js。
安裝完成後，可以在 VS Code 的終端機輸入：

node -v
npm -v

如果都有出現版本號，就代表可以使用了。

二、 安裝GSAP

進入自己的專案資料夾後，終端機輸入:

npm init -y

建立 package.json檔案，建立完成後裡面本身就會有內容。

{
  "name": "ithome",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "gsap": "^3.15.0"
  }
}

接著安裝 GSAP，終端機輸入：

npm install gsap

安裝完成後，就可以在 JavaScript 裡引入 GSAP：

import { gsap } from "gsap";

記住!!因為這裡使用到 import，所以我們需要在HTML導入 JavaScript 的地方新增 type="module"。

<script src="index.js" type="module"></script>

這樣就代表我們已經把 GSAP 加進自己的專案了。

三、結論

到這裡為止會將Library放進JavaSvript裡面讓我們使用，也成功地將 GSAP 加進專案裡，但是!!!光會安裝還不夠。GSAP 到底可以讓網頁變成什麼樣子？

下一篇，就真的來玩看看。