學習如何使用 npm 與 bundler
npm 是管理專案中第三方套件的工具。也有其他替代方案如 yarn、pnpm 等。建議先學 npm,之後再慢慢研究不同工具各自的優缺點。
主要需學習常用的 npm 指令,如 init、install、uninstall ...,並了解 package.json 中的設定。
這部分建議學 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/[email protected]/lodash.min.js"></script>
npm
npm i --save lodash
ESM
import _ from "lodash"
CommonJS
var _ = require('lodash');
建議先統一用 npm 安裝套件,並用 ESM 語法引入。等熟練後,再來學習什麼是 CDN 和 CommonJS 等其他作法與使用時機。
嘗試不使用先前所提供的範本,自己新建一個專案,且試著理解專案中的所有設定。