Javascript入門-Day10:套件

更新於 發佈於 閱讀時間約 1 分鐘

引用套件的方式

npm

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

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

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

Yarn

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

  • 安裝套件:在命令行中使用 yarn add 命令安裝套件,例如:
    yarn add lodash
  • 在代碼中引用套件:使用 requireimport 來引入套件,例如:
    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 的套件。
留言
avatar-img
留言分享你的想法!
avatar-img
Michael楊
18會員
111內容數
日後將分享關於我的經驗(日常、工作、技術),並期待未來能創造屬於我的宇宙。
Michael楊的其他內容
2024/06/03
當你在開發程式時,難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性,我們使用「例外處理」來處理這些異常情況。
Thumbnail
2024/06/03
當你在開發程式時,難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性,我們使用「例外處理」來處理這些異常情況。
Thumbnail
2024/06/02
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用,建構子的作用,以及公開,私有,受保護(Protected)等不同訪問修飾符的概念。此外,還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
Thumbnail
2024/06/02
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用,建構子的作用,以及公開,私有,受保護(Protected)等不同訪問修飾符的概念。此外,還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
Thumbnail
2024/06/02
本章節旨在介紹JavaScript中函數的基本結構和使用方法,包括函數聲明、函數表達式、箭頭函數和匿名函數的定義方式,以及函數的呼叫、參數使用和返回值的處理方式。透過了解這些函數的基本概念和用法,可以幫助讀者更靈活地編寫和理解JavaScript代碼。
Thumbnail
2024/06/02
本章節旨在介紹JavaScript中函數的基本結構和使用方法,包括函數聲明、函數表達式、箭頭函數和匿名函數的定義方式,以及函數的呼叫、參數使用和返回值的處理方式。透過了解這些函數的基本概念和用法,可以幫助讀者更靈活地編寫和理解JavaScript代碼。
Thumbnail
看更多
你可能也想看
Thumbnail
在本章節中,我們探討了 PHP 中如何引用和管理套件。學習了如何使用 Composer 來安裝第三方套件,以及如何引用自定義模組。此外,我們還介紹了如何創建和使用自定義套件,並列舉了一些在 PHP 社群中常見且廣泛使用的套件和庫。通過掌握這些知識,開發者可以更有效地管理和利用各種資源。
Thumbnail
在本章節中,我們探討了 PHP 中如何引用和管理套件。學習了如何使用 Composer 來安裝第三方套件,以及如何引用自定義模組。此外,我們還介紹了如何創建和使用自定義套件,並列舉了一些在 PHP 社群中常見且廣泛使用的套件和庫。通過掌握這些知識,開發者可以更有效地管理和利用各種資源。
Thumbnail
本章節的目的是介紹Java中的套件使用,包括如何引用第三方套件和自定義模組,如何創建和使用自定義套件,以及介紹一些常見的Java標準庫套件。這些內容將幫助讀者更好地理解和使用Java的套件系統。
Thumbnail
本章節的目的是介紹Java中的套件使用,包括如何引用第三方套件和自定義模組,如何創建和使用自定義套件,以及介紹一些常見的Java標準庫套件。這些內容將幫助讀者更好地理解和使用Java的套件系統。
Thumbnail
本章節旨在教導讀者如何在 Kotlin 中引入套件。將會涵蓋如何引用第三方套件,如何引用自定義模組,以及如何創建和引用自定義套件。此外,還會列出一些常用的套件,以供讀者參考。
Thumbnail
本章節旨在教導讀者如何在 Kotlin 中引入套件。將會涵蓋如何引用第三方套件,如何引用自定義模組,以及如何創建和引用自定義套件。此外,還會列出一些常用的套件,以供讀者參考。
Thumbnail
在 TypeScript 中,套件是模組化代碼的集合,可以提高代碼的可重用性和可維護性。常見的套件包括各種庫和框架,如 lodash、express 等。以下是有關引用套件、自定義套件和常見套件的詳細介紹。
Thumbnail
在 TypeScript 中,套件是模組化代碼的集合,可以提高代碼的可重用性和可維護性。常見的套件包括各種庫和框架,如 lodash、express 等。以下是有關引用套件、自定義套件和常見套件的詳細介紹。
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
NPM 全稱為 ( Node Package Manager ),直接翻譯就是 "node套件管理器" ,是 Node.js 預設的,當下載 Node.js 時也會一並下載到本機端並安裝,而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境,可謂是前端開發的好朋友。
Thumbnail
NPM 全稱為 ( Node Package Manager ),直接翻譯就是 "node套件管理器" ,是 Node.js 預設的,當下載 Node.js 時也會一並下載到本機端並安裝,而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境,可謂是前端開發的好朋友。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News