Javascript入門-Day10：套件

浴火重生的雞

2024/06/04閱讀時間約 1 分鐘

引用套件的方式

npm

npm 是 Node.js 的套件管理器，用於在 Node.js 專案中安裝、管理和分享 JavaScript 套件。

以下是使用 npm 來管理 JavaScript 套件的基本步驟：

初始化專案： 在專案目錄中運行 npm init 命令，這將引導你創建一個 package.json 文件，用於描述你的專案和其相依套件。
安裝套件：在命令行中使用 npm install 命令安裝套件，例如：
```
npm install lodash
```
在代碼中引用套件：使用 require 或 import 來引入套件，例如：
```
const _ = require('lodash');
```

Yarn

Yarn 是另一個流行的 JavaScript 套件管理器，與 npm 類似，但提供了更快的下載速度和更好的緩存管理。

安裝套件：在命令行中使用 yarn add 命令安裝套件，例如：
```
yarn add lodash
```
在代碼中引用套件：使用 require 或 import 來引入套件，例如：
```
const _ = require('lodash');
```

使用 CDN 引入套件

CDN（Content Delivery Network）是一種分發網路，用於提供靜態資源，如 JavaScript 文件、CSS 文件和圖像。你可以通過 CDN 直接在網頁中引入 JavaScript 套件。

在 HTML 文件中使用 <script> 標籤引入套件，例如：

<script src="<https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js>"></script>

使用 ES6 模塊化

如果你的項目使用了 ES6 模塊化，你可以使用 import 關鍵字引入套件。

在代碼中使用 import 來引入套件，例如：
```
import _ from 'lodash';
```

自定義套件

自定義模組或套件可以讓你將功能模組化，使得程式碼更易於管理、重用和測試。在 JavaScript 中，你可以使用以下方式來創建和使用自定義模組或套件：

CommonJS 模組

在 Node.js 環境中，你可以使用 CommonJS 模組的形式來創建自定義模組。

創建一個名為 utils.js 的文件，並定義一個自定義模組：

// utils.js
function greet(name) {
    console.log(`Hello, ${name}!`);
}

module.exports = {
    greet: greet
};

在另一個文件中，你可以使用 require 函式來引入自定義模組：

// app.js
const utils = require('./utils');

utils.greet('World');

ES6 模組

在現代的 JavaScript 中，你也可以使用 ES6 模組的形式來創建自定義模組。

創建一個名為 utils.js 的文件，並定義一個自定義模組：

// utils.js
export function greet(name) {
    console.log(`Hello, ${name}!`);
}

在另一個文件中，你可以使用 import 關鍵字來引入自定義模組：

// app.js
import { greet } from './utils';

greet('World');

自定義套件（前端）

在前端開發中，你也可以將多個功能封裝為自定義套件，並在不同的專案中重用。

創建一個名為 my-package 的專案，並在其中定義自定義功能：

// index.js
export function sayHello() {
    console.log('Hello from my package!');
}

在你的前端專案中，你可以使用 npm 或 Yarn 安裝自定義套件，並在代碼中引入和使用它：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frontend Example</title>
</head>
<body>
    <!-- 引入自定義模組 -->
    <script src="index.js"></script>

    <!-- 你的 JavaScript 代碼 -->
    <script>
        // 在這裡使用自定義模組中的函式
        greet('World');
    </script>
</body>
</html>

這些方法都可以幫助你在 JavaScript 專案中創建和使用自定義模組或套件，從而使得程式碼更具組織性、重用性和可維護性。

常見的套件

前端套件

React 相關套件
- react-router-dom： 用於 React 前端路由管理的套件。
- axios： 用於在 React 應用中進行 HTTP 請求的套件。
- redux： 用於狀態管理的 JavaScript 庫。
- formik： 用於 React 表單處理的套件。
Vue.js 相關套件
- vue-router： 用於 Vue.js 前端路由管理的套件。
- axios： 用於在 Vue.js 應用中進行 HTTP 請求的套件。
- vuex： 用於狀態管理的 Vue.js 插件。

後端套件

Node.js 相關套件
- express： Node.js Web 應用框架，用於構建 Web 和 API 服務器。
- mongoose： 在 Node.js 中操作 MongoDB 數據庫的套件。
- jsonwebtoken： 用於在 Node.js 應用中生成和驗證 JSON Web Tokens 的套件。