如果你剛剛開始從事前端工作，你聽到的工具和技術(shù)的數(shù)量可能會(huì)非常多。而且，你可能很難決定實(shí)際需要哪些工具?；蛘吣憧赡軐?duì)這些工具很熟悉，但你沒有太多考慮過它們解決了什么問題。

我相信，對(duì)于軟件工程師和開發(fā)人員來說，了解我們每天使用的工具的用途是很重要的。

NPM

NPM是JavaScript開發(fā)的默認(rèn)包管理器。它可以幫助你找到并安裝可以在程序中使用的軟件包（程序）。

只需使用“npminit”命令即可將npm添加到項(xiàng)目中。當(dāng)你運(yùn)行此命令時(shí)，它會(huì)在當(dāng)前目錄中創(chuàng)建一個(gè)“package.json”文件。這是列出依賴項(xiàng)的文件，npm將其視為項(xiàng)目的ID卡。你可以使用“npminstall（package_name）”命令添加依賴項(xiàng)。

當(dāng)你運(yùn)行此命令時(shí)，npm將轉(zhuǎn)到遠(yuǎn)程注冊(cè)表，并檢查是否存在由此包名稱標(biāo)識(shí)的包。如果找到它，將向包中添加一個(gè)新的依賴項(xiàng)條目。json和包及其內(nèi)部依賴項(xiàng)是從注冊(cè)表下載的。

你可以在“node_modules”文件夾下找到下載的包或依賴項(xiàng)。請(qǐng)記住，它通常會(huì)變得很大，所以請(qǐng)確保將其添加到.gitignore中。

NPM不僅簡(jiǎn)化了查找和下載軟件包的過程，而且還簡(jiǎn)化了在項(xiàng)目中協(xié)作的過程。如果沒有NPM，將很難管理外部依賴關(guān)系。加入現(xiàn)有項(xiàng)目時(shí)，需要手動(dòng)下載每個(gè)依賴項(xiàng)的正確版本，這將是一個(gè)真正的麻煩。

在npm的幫助下，你只需運(yùn)行“npm-install”，它就會(huì)為你安裝所有外部依賴項(xiàng)。然后，只要團(tuán)隊(duì)中有人添加新的，你就可以再次運(yùn)行它。

Babel

Babel是一個(gè)JavaScript編譯器或轉(zhuǎn)發(fā)器，它將ECMAScript2015+代碼轉(zhuǎn)換為較舊的JavaScript引擎可以理解的代碼。

Babel是最流行的Javascript編譯器，Vue和React等框架默認(rèn)使用它。也就是說，我們將在這里討論的概念不僅與Babel相關(guān)，而且適用于任何JavaScript編譯器。

Webpack

Webpack是一個(gè)靜態(tài)模塊捆綁器。當(dāng)你創(chuàng)建一個(gè)新項(xiàng)目時(shí)，現(xiàn)在大多數(shù)JavaScript框架/庫都是開箱即用的。

Webpack還提供了像帶有熱重載的本地服務(wù)器(他們稱之為熱模塊替換)這樣的特性，讓你的開發(fā)體驗(yàn)更好。

Bonus– ESLint

代碼質(zhì)量很重要，有助于保持項(xiàng)目的可維護(hù)性和可擴(kuò)展性。雖然我們大多數(shù)開發(fā)人員都認(rèn)識(shí)到了干凈編碼的重要性，但在期限的壓力下，我們有時(shí)會(huì)忽略長(zhǎng)期的后果。

許多公司決定編碼標(biāo)準(zhǔn)，并鼓勵(lì)開發(fā)人員遵守這些標(biāo)準(zhǔn)。但是你如何確保你的代碼符合標(biāo)準(zhǔn)呢？

你可以使用ESLint這樣的工具來執(zhí)行代碼中的規(guī)則。例如，你可以創(chuàng)建一個(gè)規(guī)則來強(qiáng)制或禁止在JavaScript代碼中使用分號(hào)。如果違反了規(guī)則，ESLint會(huì)顯示一個(gè)錯(cuò)誤，代碼甚至不會(huì)被編譯——所以除非禁用該規(guī)則，否則不可能忽略它。如果你學(xué)習(xí)Bonus工具的使用，不妨報(bào)個(gè)web前端培訓(xùn)班，可以獲得快速提升。

Bonus– CI/CD (CircleCI)

假設(shè)你有一個(gè)部署/QA服務(wù)器和你的Git存儲(chǔ)庫。你希望將你的更改部署到你的部署/QA服務(wù)器，因此這里有一個(gè)示例流程:

將更改推送到Git

連接到服務(wù)器

創(chuàng)建一個(gè)Docker容器并運(yùn)行它

將更改拉至服務(wù)器，下載所有依賴項(xiàng)(npm安裝)

運(yùn)行測(cè)試以確保沒有任何損壞

使用ESLint/Sonar之類的工具來確保代碼質(zhì)量

如果一切正常，合并代碼

在CircleCI的幫助下，你可以自動(dòng)完成所有這些操作。每當(dāng)你向Git推送更改時(shí)，你可以設(shè)置并配置它來執(zhí)行上述所有操作。如果出現(xiàn)任何問題，例如測(cè)試失敗，它將拒絕推送。

結(jié)論

前端世界發(fā)展迅速，新工具每年都在流行。通過學(xué)習(xí)如何使用這個(gè)工具，很容易對(duì)這種變化做出反應(yīng)。

以上就是本次分享的全部?jī)?nèi)容，想學(xué)習(xí)更多編程技巧，歡迎持續(xù)關(guān)注六星云課堂！