[前端自學轉職攻略] 15. 如何使用第三方套件/框架？

學習如何使用 npm 與 bundler

npm

npm 是管理專案中第三方套件的工具。也有其他替代方案如 yarn、pnpm 等。建議先學 npm，之後再慢慢研究不同工具各自的優缺點。

主要需學習常用的 npm 指令，如 init、install、uninstall ...，並了解 package.json 中的設定。

• CLI command
• package.json

bundler/build tool

這部分建議學 Vite，如果想知道還有哪些選擇，可參考 https://2023.stateofjs.com/en-US/libraries/build_tools/

除了學習 bundler 的使用方法，也要了解為什麼專案中會需要 bundler。例如 Vite 的指令中， vite、vite build、vite preview 的區別與使用時機。

如何引入套件？

在套件的文件中，有時會看到多種不同使用方式。

安裝方式

CDN

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

npm

npm i --save lodash

使用方式

ESM

import _ from "lodash"

CommonJS

var _ = require('lodash');

建議先統一用 npm 安裝套件，並用 ESM 語法引入。等熟練後，再來學習什麼是 CDN 和 CommonJS 等其他作法與使用時機。

嘗試新建專案

嘗試不使用先前所提供的範本，自己新建一個專案，且試著理解專案中的所有設定。