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/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 的套件。
留言0
查看全部
你可能也想看
Google News 追蹤
Hi 我是 VK~
在 8 月底寫完〈探索 AI 時代的知識革命：NotebookLM 如何顛覆學習和創作流程？〉後，有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題，剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
國泰CUBE App 整合外幣換匯、基金、證券等服務，提供簡便、低成本的美股定期定額投資解決方案。
5分鐘開戶、低投資門檻，幫助新手輕鬆進軍國際股市；提供人氣排行榜，讓投資人能夠掌握市場趨勢。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
前言：
雖然前面有些定義還沒有完整的解釋，但還是後面再說吧，
誰想一直看理論啊（摔本子）
前言：
前一篇講了 JS 的定義，這裡來談談能用它來做什麼，
希望能限制在 500 字以內（這是我看文章的極限，超過字數就會開始分心（?））
前言：
一直想要把自己的學習筆記整理整理，至少在寫下筆記的時候，也能釐清觀念。
結果拖延到現在，終於要提筆了，不知道能堅持多久(???)。
JS 資料型別分為兩大類，原始型別 (Primitive values) 和物件型別 (Objects)。
類別 (class) 是在 ES6 中引入，用來作為建立新物件的模板。它可以將程式碼封裝起來。
在網頁開發中，時間與日期的處理是重要且基礎的部分，本文將介紹 JavaScript 中的日期的處理方法，並提供範例程式來協助你理解。
專案產生大量又瑣碎的作業做處理，眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來，提供給別人做Excel公式的資料表進行作業。
JavaScript 的關鍵價值
JavaScript 是一種強大且廣泛使用的編程語言，具有許多價值和應用。以下整理 JavaScript 的關鍵價值：
客戶端網頁開發、跨平台開發：
JavaScript 是種瀏覽器的語言，可實現動態網頁效果，並通過操作 HTML 和 CSS，使網頁互動性提昇，提供
Hi 我是 VK~
在 8 月底寫完〈探索 AI 時代的知識革命：NotebookLM 如何顛覆學習和創作流程？〉後，有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題，剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
國泰CUBE App 整合外幣換匯、基金、證券等服務，提供簡便、低成本的美股定期定額投資解決方案。
5分鐘開戶、低投資門檻，幫助新手輕鬆進軍國際股市；提供人氣排行榜，讓投資人能夠掌握市場趨勢。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
前言：
雖然前面有些定義還沒有完整的解釋，但還是後面再說吧，
誰想一直看理論啊（摔本子）
前言：
前一篇講了 JS 的定義，這裡來談談能用它來做什麼，
希望能限制在 500 字以內（這是我看文章的極限，超過字數就會開始分心（?））
前言：
一直想要把自己的學習筆記整理整理，至少在寫下筆記的時候，也能釐清觀念。
結果拖延到現在，終於要提筆了，不知道能堅持多久(???)。
JS 資料型別分為兩大類，原始型別 (Primitive values) 和物件型別 (Objects)。
類別 (class) 是在 ES6 中引入，用來作為建立新物件的模板。它可以將程式碼封裝起來。
在網頁開發中，時間與日期的處理是重要且基礎的部分，本文將介紹 JavaScript 中的日期的處理方法，並提供範例程式來協助你理解。
專案產生大量又瑣碎的作業做處理，眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來，提供給別人做Excel公式的資料表進行作業。
JavaScript 的關鍵價值
JavaScript 是一種強大且廣泛使用的編程語言，具有許多價值和應用。以下整理 JavaScript 的關鍵價值：
客戶端網頁開發、跨平台開發：
JavaScript 是種瀏覽器的語言，可實現動態網頁效果，並通過操作 HTML 和 CSS，使網頁互動性提昇，提供