NPM命令是什麼？

npm 作為包管理器，類似於Grunt 和Gulp 等早期命令行任務運行工具，也能執行任務。在上一章節安裝Sass 包後，我們就可以開始使用它了！

指南章節

1. 本指南面向何人？
2. “npm” 究竟指什麼？
3. 命令行是什麼？
4. Node 是什麼？
5. 包管理器是什麼？
6. 如何安裝npm？
7. 如何安裝npm 包？
8. npm 命令是什麼？ (您當前位置！)
9. 如何安裝現有的npm 項目？

深入npm 命令

打開測試文件夾中的package.json文件，目前您不會看到太多內容；只有一個dependencies屬性，目前只有一個依賴項：

 <code>{ "dependencies": { "sass": "^1.43.4" } }</code>

然而， package.json文件包含的內容遠不止依賴項。它還包含許多關於項目的元信息。其中最有趣的部分是一個可選但非常有用的屬性，稱為scripts 。

請記住，Sass 的所有子依賴項都記錄在自動生成的package-lock.json中，不應手動編輯。 package.json通常只包含頂級依賴項，我們可以自由自定義它。

package.json文件中的scripts對象允許您創建可在該項目中運行的命令，以幫助您處理各種任務，無論是單次運行還是持續運行的進程。通常，這些“任務”用於啟動本地開發的開發服務器、編譯資源和/或運行測試。事實上，項目中通常內置一個start或dev命令來處理您可能需要同時運行的所有任務，例如按順序編譯Sass 和JavaScript。

我們還沒有任何要運行的腳本，但讓我們來解決這個問題！

示例：將Sass 編譯成CSS

在package.json文件的scripts部分中，我們可以訪問所有已安裝的包。即使我們現在無法直接在終端中鍵入Sass 命令，我們也可以將Sass 命令作為npm 腳本的一部分運行。

如果Sass 是全局安裝的（這意味著系統範圍的安裝，而不是安裝在特定項目文件夾中），我們可以在終端中運行Sass 命令。到目前為止，我們只將Sass 安裝到此文件夾（這是安裝包時的默認行為）。但是全局安裝會使Sass 命令在系統的任何位置都可用。

首先，將此代碼塊粘貼到您的package.json文件中，緊跟在開頭的{花括號之後：

 <code>"scripts": { "sass:build": "sass style.scss style.css" },</code>

JSON 語法非常嚴格。如果您遇到問題，請嘗試使用JSON 驗證器運行文件的內容。

這使我們可以訪問npm run sass:build腳本，它將為我們編譯Sass 到CSS！

命令的名稱並不重要，只要它是一個連續的字符串即可。還值得注意的是，冒號(:) 在此處沒有任何特殊作用；這只是一個約定，因為單獨使用build或sass可能過於通用。

如果您以前使用過Sass 命令（或者您提前查看了），您可能知道這意味著我們還需要在項目文件夾的根目錄中創建一個style.scss文件。讓我們這樣做，並將一些任意的Sass 代碼放入其中。

如果您想複製和粘貼，這是我使用的Sass 代碼：

 <code>$myColor: #ffd100; .a { .nested { .selector { color: $myColor; } } }</code>

太棒了！將該文件保存為項目根目錄下的style.scss ，然後讓我們嘗試運行新的命令：

 <code>npm run sass:build</code>

此任務完成後，您應該會立即看到項目文件夾中出現兩個新文件： style.css和style.css.map 。

如果您願意，您可以打開style.css文件（其中包含編譯後的CSS 代碼）以驗證它是否確實是我們期望的：

Sass 包甚至會為我們編譯一個源映射，這讓我們可以在瀏覽器的DevTools 中檢查樣式時查看哪些樣式來自哪些.scss文件。真棒！

如果您遇到錯誤：請仔細檢查package.json中的語法，確保它是有效的JSON（您可以使用此處的在線JSON 驗證器），並且您的.scss文件包含有效的Sass（這是一個在線Sass 轉換器）。另一件要檢查的事情是文件名與命令中的文件名是否匹配。

創建僅限開發的命令

這很不錯，但是當我們進行開發時，我們可能會厭倦一遍又一遍地運行該命令。因此，讓我們設置第二個命令，告訴Sass 為我們監視該文件，並在我們保存更改時自動重新編譯它！

在package.json中的scripts對象內添加以下內容：

 <code>"sass:watch": "sass style.scss style.css --watch"</code>

重要說明：確保兩個腳本之間有一個逗號(,)。順序無關緊要，但它們之間的逗號很重要。同樣，JSON 非常嚴格，因此如有需要，請依賴JSON 驗證器。

現在，如果我們運行sass:watch （不要與sasquatch 混淆），您將在終端中看到一條消息，顯示“Sass 正在監視更改。按Ctrl-C 停止”。

如果您現在打開style.scss文件，進行更改並保存，您應該會看到終端中自動彈出一條消息，確認Sass 已重新編譯為CSS：

現在這才是有用的！不僅如此，一旦我們將這些文件提交到我們的存儲庫，我們將擁有安裝和運行Sass 的確切說明，並使用一個簡單的命令——其他所有參與此項目的人也將擁有！

我們將在此測試項目中結束。看到如何開始很有用，但大多數情況下，您將使用預配置的項目，而不是從頭開始創建npm 命令，這正是我們將在本npm 指南的最後一章中要做的。

安裝npm 包的最終說明

您應該知道，實際上有兩種方法可以安裝npm 包，您想要哪一種取決於該包是否應作為生產構建的一部分，或者它是否純粹用於開發目的。

• npm install （或npm i ）是將包添加到項目的標準（和默認）方法。
• npm install --save-dev （或npm i -D ）僅將包添加到您的“開發依賴項”，這意味著它們僅在開發項目時才會安裝，而不會在構建項目的最終生產版本時安裝。

作為開發依賴項安裝的包可能包括測試庫、代碼檢查工具、預覽服務器和其他僅在開發過程中幫助您的工具。它們通常不用於編譯或運行網站本身。

還有一個最終標誌值得了解： npm install --global （或npm i -g ）。這就是全局安裝包的方式，正如我們在前面安裝Sass 時所討論的那樣。例如，如果您希望能夠在機器上的任何位置運行sass ，則可以使用此方法。全局安裝的其他常見用例可能包括您希望在任何地方使用的CLI 工具，甚至另一個包管理器，如Yarn。

接下來的步驟

我們即將完成旅程！還有一件事您應該知道，以及如何使用npm 快速啟動現有項目所需的一切。因此，假設您繼承了一個使用npm 的項目。你從哪裡開始？你如何確保與他人持續合作？這是本npm 指南最後一節的重點。

← 第7 章第9 章→

以上是NPM命令是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！