Javascript入門-Day10：套件
引用套件的方式
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/[email protected]/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 的套件。
你可能也想看
