Javascript入門-Day10：套件

浴火重生的雞

發佈於10天快速學習系列

更新於 2024/06/04發佈於 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 的套件。

#Javascript

Michael楊10天快速學習系列Javascript

Michael楊

15會員

111內容數

日後將分享關於我的經驗(日常、工作、技術)，並期待未來能創造屬於我的宇宙。

留言0

查看全部

發表第一個留言支持創作者！

Michael楊的其他內容

Javascript入門-Day9：例外處理

當你在開發程式時，難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性，我們使用「例外處理」來處理這些異常情況。

#Javascript

Javascript入門-Day8：物件導向

本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用，建構子的作用，以及公開，私有，受保護(Protected)等不同訪問修飾符的概念。此外，還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。

Javascript入門-Day7：函數

本章節旨在介紹JavaScript中函數的基本結構和使用方法，包括函數聲明、函數表達式、箭頭函數和匿名函數的定義方式，以及函數的呼叫、參數使用和返回值的處理方式。透過了解這些函數的基本概念和用法，可以幫助讀者更靈活地編寫和理解JavaScript代碼。

#Javascript

Javascript入門-Day6：流程控制

本章節主要介紹了JavaScript中的流程控制，包括條件語句（如if、else if、else和三元運算子）和循環結構（如for迴圈、while迴圈等）。同時，也提供了如何使用break、continue和label來控制迴圈的執行。

#Javascript

Javascript入門-Day5：運算符

了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼

#Javascript

Javascript入門-Day4：資料型別

這些章節的目的是為了介紹JavaScript中的各種數據類型，包括基礎類型和物件類型，以及如何將數據從一種類型轉換為另一種類型。此外，還介紹了如何創建自定義類型，以及如何使用JavaScript中的陣列、集合和字典。

#Javascript

Javascript入門-Day9：例外處理

#Javascript

Javascript入門-Day8：物件導向

Javascript入門-Day7：函數

#Javascript

Javascript入門-Day6：流程控制

#Javascript

Javascript入門-Day5：運算符

了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼

#Javascript

Javascript入門-Day4：資料型別

你可能也想看

連媽媽都會用！輕鬆養成專屬自己的質感金融生活圈

/ 大家現在出門買東西還會帶錢包嗎鴨鴨發現自己好像快一個禮拜沒帶錢包出門還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠鴨鴨都會特別注意銀行的App好不好用！像是介面設計就是會很在意的地方很多銀行通常會為了要滿足不同客群會推出很多App讓使用者下載每次

#國泰世華銀行 #國泰世華 #國泰世華CUBEApp

筱涵｜Hannah的沙龍

2025/01/02

【生活記事】AI人工智慧解籤｜慈母籤｜線上求籤｜科技與玄學

嘿，大家新年快樂~ 新年大家都在做什麼呢？跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~

※ 補充說明： ※ npm 常用指令： ◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱：用來安裝

Joker Cat

2024/06/04

安裝 StandardJS 及補充實用套件

因為最近想嘗試編碼風格，於是就選了一套比較"不嚴格"的輔助工具來摸索。編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }

NPM 全稱為 ( Node Package Manager )，直接翻譯就是 "node套件管理器" ，是 Node.js 預設的，當下載 Node.js 時也會一並下載到本機端並安裝，而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境，可謂是前端開發的好朋友。

※ 函式基礎介紹： ※ JavaScript 特殊的函式特性：函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法： ※ 調用 (invoke) 函式： "調用" 意指呼叫或執行