JavaScript >> Javascript 文檔 >  >> Node.js

Node.js 和 npm 教程:安裝和使用

為了使用幾乎所有基於 JavaScript 的開發工具,您需要知道如何使用 npm 和 Node.js。 Gulp、Grunt 和 Webpack 是您可能聽說過的一些需要了解 Node 生態系統知識的流行技術示例。

我發現自己在我開始寫的一篇文章的先決條件中一遍又一遍地寫這個。我寧願寫一個權威的指南以供將來參考,所以就在這裡。

  • 在 GitHub 上查看

先決條件

  • 基本的命令行能力。不要跳過這一步!如果您不知道如何使用命令行,那麼您將面臨一場艱苦的戰鬥。提供的教程包含您需要了解的所有內容。

目標

  • 了解 Node.js 和 npm 是什麼
  • 在 Windows 和 Mac 上設置 Node.js 和 npm

什麼是 Node.js?

JavaScript 是一個客戶端 編程語言,這意味著它是在瀏覽器中處理的。隨著 Node.js 的出現,JavaScript 也可以用作服務器端 語言。

什麼是 npm?

npm 不代表 Node Package Manager* ,這意味著它是連接到包含所有 Node.js 程序、插件、模塊等的存儲庫的工具。

本地與全球

這是一開始要理解的最令人困惑的概念,因此重要的是讓它適應。傳統上,您習慣於在計算機上全局安裝任何類型的程序或軟件。如果您想要 Spotify,您將下載 Spotify,然後您就可以使用它了。

使用 npm,您將進行一些全局安裝,但大多數都將在本地項目的基礎上完成,這意味著您必須將每個項目所需的一切安裝在其自己的目錄中。如果你想讓一個項目運行 Gulp 和 Sass,你將創建一個目錄,使用新的 npm install。

為了將來參考,任何全局安裝都將具有 -g 標誌。

在 Windows 上安裝

在 Windows 上安裝一切都是輕而易舉的事。

安裝 Node.js 和 npm

可以從下載鏈接安裝 Node.js 和 npm。轉到 Node 安裝頁面,並下載 Node 安裝程序。我有一個 64 位的 Windows 10 操作系統,所以我選擇了那個。

完成後,您可以通過打開 PowerShell(或任何 shell)並輸入 node -v 來測試節點和 npm 是否正常運行 和 npm -v ,它將檢查版本號。

一切就緒。

在 Mac 或 Linux 上安裝

為了在 Mac 上安裝所有東西,我們將在 Terminal.app 中運行命令,並且 Linux 發行版會有所不同。

安裝 Node.js 和 npm

我們將使用 Node Version Manager (nvm) 來安裝 Node.js 和 npm。

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

打開~/.bash_profile 文件,並確保 source ~/.bashrc 寫在那裡某處。重啟終端。

運行安裝命令。

nvm install node

運行使用命令。

nvm use node
Now using node v8.2.0 (npm v5.3.0)

現在已經安裝了 Node.js 和 npm,輸入 node -v 來測試它們 和 npm -v .

一切就緒。

創建項目

此時,您已準備好開始設置 Gulp、Webpack、Browserify 或任何您的目標。我們還可以創建一個簡單的項目來測試一切是否正常。

初始化項目

導航到您希望項目存在的目錄 - 在我的例子中,sites/node-test .

cd sites/node-test

現在用 npm 初始化一個新項目。

npm init

終端會彈出以下內容,提示你幾個

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

首先,它會詢問一個包名。

node-test

版本號。

1.0.0

說明。

Creating my first "Hello, World!" Node project.

其餘的你可以按回車鍵跳過。現在你會注意到我們有一個 package.json 包含我們輸入的所有信息的文件。

package.json
{
  "name": "node-test",
  "version": "1.0.0",
  "description": "Creating my first \"Hello, World!\" Node project.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Tania Rascia",
  "license": "ISC"
}

一個 package.json 是一個包含項目元數據的文件,並處理項目的依賴項(附加軟件和模塊)。

現在,我們要安裝我們的第一個依賴項——一個非常重要且有用的包,名為 left-pad ,這將在字符串的左側添加空格,加起來是一個數字。

比如這樣寫:

leftPad('String', 10)

會輸出這個:

console
String

left-pad 是 npm 上的一個包,正如我們之前所說,它包含所有公開可用包的註冊表。

安裝依賴項

要使用 npm 安裝依賴項,我們使用命令 npm install dependency-name-here .現在,只需運行 npm install 將下載依賴項,但不會將其保存到項目中。因為我們已經創建了 package.json ,我們將使用標誌 --save 安裝依賴 將其添加到 package.json .

npm install left-pad --save

只要您在項目目錄中運行此命令,它將通過創建 node_modules 成功安裝依賴項 目錄。它還將創建一個 package-lock.json 文件,我們可以忽略。最後,它更新了我們的 package.json 文件換行。

"dependencies": {
  "left-pad": "^1.1.3"
}

現在項目將left-pad依賴識別為存在

在終端運行節點

讓我們創建 index.js 在我們目錄的根目錄中。這是你現在應該擁有的一切:

為了將來參考,不要費心查看 node_modules 兔子洞。大型項目真的會讓人不知所措。

為了使用依賴,我們使用 require() 並將其放入變量中,如下所示:

const leftPad = require('left-pad')

這將是我們 index.js 的全部內容 文件,我們需要left-pad,運行leftPad() 函數,並將其發送到控制台。

index.js
const leftPad = require('left-pad') // Require left pad
const output = leftPad('Hello, World!', 15) // Define output

// Send output to the console
console.log(output)

由於瀏覽器無法識別 Node.js,我們將在控制台中對此進行測試。在你的 shell 中,運行 node 命令後跟項目根目錄中的文件名。

node index.js

如果一切順利,你應該打印出 Hello, World! 到控制台,左邊有兩個空格。

Hello, World!

結論

在本教程中,我們學習了以下內容:

  • 什麼是 Node.js
  • 什麼是 npm
  • 如何在 Windows 或 Mac 上安裝 Node.js 和 npm
  • 如何製作本地項目
  • 如何使用 npm 安裝依賴項
  • 如何使用 node_modules 運行文件 shell 中的依賴項

如果您在任何時候迷路了,請查看 GitHub 上的源代碼。

有了這些知識,你就可以開始使用 Gulp、Grunt、Webpack、Browserify 或任何其他依賴於 Node.js 或 npm 的東西了。


Tutorial JavaScript 教程
  1. 如何使用 Jest 測試 React 組件

  2. 如何將您的 React 應用程序連接到同一來源的後端

  3. 在 Javascript 中調用 API 的 4 種方法。

  4. 挑戰:在 React 中創建待辦事項列表

  5. 如何使用 window.fetch 下載文件?

  6. 在異步等待函數中拋出錯誤並從調用它的位置捕獲

  7. 未處理的承諾拒絕警告錯誤

  1. 自定義錯誤擴展、新建和重新拋出

  2. 使用 Wordpress REST API 集成 Ionic 和 Wordpress

  3. 引擎蓋下的 Node.js #9:收集垃圾

  4. 使用 React、PHP 和 WebSockets 程序生成的遊戲地形

  5. 移動 Web:創建 SVG 加載微調器

  6. 如何使用 Lodash 從對像中刪除空值

  7. 在沒有互聯網的情況下嘗試新框架

  1. 可視化 React-Redux

  2. Js中的數組和對象!!!解釋[可能]最簡單的方法。

  3. 在 Node.js 中使用 RxJS 進行反應式編程和可觀察序列

  4. 一個 jQuery Twitter Ticker(更新)