Javascript入門-Day10：套件
閱讀時間約 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/[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 的套件。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
前言：
雖然前面有些定義還沒有完整的解釋，但還是後面再說吧，
誰想一直看理論啊（摔本子）
前言：
前一篇講了 JS 的定義，這裡來談談能用它來做什麼，
希望能限制在 500 字以內（這是我看文章的極限，超過字數就會開始分心（?））
前言：
一直想要把自己的學習筆記整理整理，至少在寫下筆記的時候，也能釐清觀念。
結果拖延到現在，終於要提筆了，不知道能堅持多久(???)。
JS 資料型別分為兩大類，原始型別 (Primitive values) 和物件型別 (Objects)。
類別 (class) 是在 ES6 中引入，用來作為建立新物件的模板。它可以將程式碼封裝起來。
在網頁開發中，時間與日期的處理是重要且基礎的部分，本文將介紹 JavaScript 中的日期的處理方法，並提供範例程式來協助你理解。
專案產生大量又瑣碎的作業做處理，眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來，提供給別人做Excel公式的資料表進行作業。
JavaScript 的關鍵價值
JavaScript 是一種強大且廣泛使用的編程語言，具有許多價值和應用。以下整理 JavaScript 的關鍵價值：
客戶端網頁開發、跨平台開發：
JavaScript 是種瀏覽器的語言，可實現動態網頁效果，並通過操作 HTML 和 CSS，使網頁互動性提昇，提供
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
前言：
雖然前面有些定義還沒有完整的解釋，但還是後面再說吧，
誰想一直看理論啊（摔本子）
前言：
前一篇講了 JS 的定義，這裡來談談能用它來做什麼，
希望能限制在 500 字以內（這是我看文章的極限，超過字數就會開始分心（?））
前言：
一直想要把自己的學習筆記整理整理，至少在寫下筆記的時候，也能釐清觀念。
結果拖延到現在，終於要提筆了，不知道能堅持多久(???)。
JS 資料型別分為兩大類，原始型別 (Primitive values) 和物件型別 (Objects)。
類別 (class) 是在 ES6 中引入，用來作為建立新物件的模板。它可以將程式碼封裝起來。
在網頁開發中，時間與日期的處理是重要且基礎的部分，本文將介紹 JavaScript 中的日期的處理方法，並提供範例程式來協助你理解。
專案產生大量又瑣碎的作業做處理，眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來，提供給別人做Excel公式的資料表進行作業。
JavaScript 的關鍵價值
JavaScript 是一種強大且廣泛使用的編程語言，具有許多價值和應用。以下整理 JavaScript 的關鍵價值：
客戶端網頁開發、跨平台開發：
JavaScript 是種瀏覽器的語言，可實現動態網頁效果，並通過操作 HTML 和 CSS，使網頁互動性提昇，提供