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

閱讀時間約 1 分鐘
學習如何使用 npm 與 bundler

npm


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

主要需學習常用的 npm 指令,如 init、install、uninstall ...,並了解 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 等其他作法與使用時機。



嘗試新建專案


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

avatar-img
3會員
31內容數
零基礎到成功轉職,一路上會遇到哪些挑戰、應該如何解決? - 猶豫階段:「這適合我嗎?薪水如何?...」 - 起步階段:「怎麼開始學?要不要做 side project?...」 - 成長階段:「如何優化開發效率?選擇框架?...」 - 面試階段:「怎麼準備技術和行為面試?...」
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
前端轉職經驗談 的其他內容
【猶豫階段】 1. 轉職前端適合我嗎? 2. 轉職前端能拿到多少薪水? 3. 前端工程師實際的工作內容是什麼? 4. 從開始到轉職成功要多久? ...
先確認是否對程式開發有興趣,再接著學習進階技術。
【猶豫階段】 1. 轉職前端適合我嗎? 2. 轉職前端能拿到多少薪水? 3. 前端工程師實際的工作內容是什麼? 4. 從開始到轉職成功要多久? ...
先確認是否對程式開發有興趣,再接著學習進階技術。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
在先前的型別文章中,我們曾經聊過 JavaScript 常用的一些型別,但針對布林這個型別,我們沒有做太多的解釋,原因在於布林值在 JavaScript 會有一個特殊的規則:自動轉型 。 自動轉型可說是讓 JavaScript 為弱型別、且難以管理的最重要的要素,接著就來讓我們來聊聊什麼是自動轉型
Thumbnail
我在準備進入切版的第一步通常會是設定好全域樣式,以及整理出有哪些共用樣式,也就是把設計稿上規範好的設計系統,例如顏色、間距、字體等等先寫好 CSS,而我自從會 SCSS 後就習慣用這個方式去寫 CSS,透過分成不同檔案、依序載入,日後在修改跟維護上會比較好管理跟減少時間。
Thumbnail
柯文哲表示綠營為了選戰進行政治操作,民進黨的台北市議員更開始張冠李戴,指出柯為了還債,挪用教育基金及捷運重置基金,犧牲市民權。柯文哲指出這些皆為假消息,且詳細解釋、破除謠言,下面就讓我們一起來看看柯文哲的說法吧。 蔡英文自稱最有財政紀律的政府 蔡英文在2019年稱,在他執政下,台灣22年來第一次
Thumbnail
玉溪有容,是博物館也是展演空間,自成一格,跟環境融合,像是無邊沼澤,生養獨立的姿態及美學。玉溪有容有兩個地點,一是91二為94,佇立於仰德大道二段路旁,隔路相望,宛如綠林聖地,沒得令牌閒人禁入。
Thumbnail
從身邊最小的事物開始吧! 這是我學習完基礎JavaScript後第一個做成的Project,應該是每個前端都一定會做過的project,但對於自學的我非常有挑戰性,我需要訓練自己在短時間內熟悉JS event並且運用他做出我的第一個搭配大量JS程式碼的網頁作品。
Thumbnail
教到了JS event,非常實用的一堂課程,開始進入監聽階段,可以跟使用者互動,也慢慢建立UX的概念,讓我可以開始自行設計動態網頁,並且優化了第二個靜態網頁,加入了滾動變化的效果。
Thumbnail
Hoisting 可以說是 ES6 問世之後,去面試還是會爾偶被問到的面試考題,雖然 Hoisting 離 Modern JavaScript 的技術有點距離,實作上幾乎不太會用到,但透過了解 Hoisting 的概念,可以對這門語言有更深的了解與掌握度。
Thumbnail
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方 尤其適合想要練練手感的時候可以方便地展示成果的地方 在過去使用手動commit至gh-page的分支上,或是使用deploy.sh檔來部署,對於我這種懶人來說都是多一個步驟,時常會覺得麻煩 現在能夠透過github ac
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
台灣從西元2017年開始,規劃推動前瞻基礎建設,建設密集鐵道路網改善大眾運輸......
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
在先前的型別文章中,我們曾經聊過 JavaScript 常用的一些型別,但針對布林這個型別,我們沒有做太多的解釋,原因在於布林值在 JavaScript 會有一個特殊的規則:自動轉型 。 自動轉型可說是讓 JavaScript 為弱型別、且難以管理的最重要的要素,接著就來讓我們來聊聊什麼是自動轉型
Thumbnail
我在準備進入切版的第一步通常會是設定好全域樣式,以及整理出有哪些共用樣式,也就是把設計稿上規範好的設計系統,例如顏色、間距、字體等等先寫好 CSS,而我自從會 SCSS 後就習慣用這個方式去寫 CSS,透過分成不同檔案、依序載入,日後在修改跟維護上會比較好管理跟減少時間。
Thumbnail
柯文哲表示綠營為了選戰進行政治操作,民進黨的台北市議員更開始張冠李戴,指出柯為了還債,挪用教育基金及捷運重置基金,犧牲市民權。柯文哲指出這些皆為假消息,且詳細解釋、破除謠言,下面就讓我們一起來看看柯文哲的說法吧。 蔡英文自稱最有財政紀律的政府 蔡英文在2019年稱,在他執政下,台灣22年來第一次
Thumbnail
玉溪有容,是博物館也是展演空間,自成一格,跟環境融合,像是無邊沼澤,生養獨立的姿態及美學。玉溪有容有兩個地點,一是91二為94,佇立於仰德大道二段路旁,隔路相望,宛如綠林聖地,沒得令牌閒人禁入。
Thumbnail
從身邊最小的事物開始吧! 這是我學習完基礎JavaScript後第一個做成的Project,應該是每個前端都一定會做過的project,但對於自學的我非常有挑戰性,我需要訓練自己在短時間內熟悉JS event並且運用他做出我的第一個搭配大量JS程式碼的網頁作品。
Thumbnail
教到了JS event,非常實用的一堂課程,開始進入監聽階段,可以跟使用者互動,也慢慢建立UX的概念,讓我可以開始自行設計動態網頁,並且優化了第二個靜態網頁,加入了滾動變化的效果。
Thumbnail
Hoisting 可以說是 ES6 問世之後,去面試還是會爾偶被問到的面試考題,雖然 Hoisting 離 Modern JavaScript 的技術有點距離,實作上幾乎不太會用到,但透過了解 Hoisting 的概念,可以對這門語言有更深的了解與掌握度。
Thumbnail
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方 尤其適合想要練練手感的時候可以方便地展示成果的地方 在過去使用手動commit至gh-page的分支上,或是使用deploy.sh檔來部署,對於我這種懶人來說都是多一個步驟,時常會覺得麻煩 現在能夠透過github ac
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
台灣從西元2017年開始,規劃推動前瞻基礎建設,建設密集鐵道路網改善大眾運輸......