亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

全部開發者教程

JavaScript 入門教程

Node.js

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行時。

Node.js 并不是運行在瀏覽器里的一個庫或框架。

Node.js 可以提供了一系列服務端能力,如 HTTP 服務、讀寫本地文件等,開發者可以利用 JavaScript 來使用這些能力,因為前端開發者的主要語言就是 JavaScript,所以利用 Node.js 可以降低學習成本,讓前端開發者更容易接觸到服務端開發。

1. 安裝 Node.js

Node.js 需要單獨安裝,進入 Node.js 官網 獲取對應平臺的安裝包下載即可。

如果是為了學習使用,建議使用最新版,支持更多的特性。

Node.js 的安裝過程和普通軟件相似,安裝完畢后可以通過命令行測試是否安裝成功。

1.1 windows 下打開命令提示符

windows 下可以直接在開始中進行搜索,搜索命令提示符,打開搜索結果。

圖片描述

打開后在命令提示符中輸入 node -v 并回車,如果有正確輸出安裝的 Node.js 的版本號,則表示安裝成功。

圖片描述

1.2 Mac OS 下打開終端

Mac OS 操作系統下,打開 聚焦搜索 ,輸入 終端 后回車即可打開終端。

圖片描述

打開終端后輸入 node -v,如果正確輸出了版本號,則表示安裝成功。

圖片描述

因為兩個平臺下的命令幾乎一致,后續內容不再區分平臺,統一使用 Mac OS 下的終端。

2. npm

Node.js 安裝后,會同時安裝 npm,和查看 Node.js 的版本一樣,在終端里輸入 npm -v,即可查看到 npm 的版本號。

npm -v

圖片描述

npm 的全稱是 Node Package Manager,翻譯過來就是 node.js 的包管理工具。

一個項目開發過程中需要許多第三方的代碼,比如一些框架,這些框架大部分都會被做一個 npm 包 發布,通過 npm 命令行工具就可以安裝到本地項目中,進行使用。

同樣的可以自己開發一些 ,發布到 npm,然后造福社會。

2.1 創建一個包

一個 npm 包 由一個 package.json 文件描述。

package.json 所在的位置通常會被作為項目的根目錄。

可以通過 npm 提供的命令創建一個 package.json,可以先創建一個項目目錄,然后在終端中進入到這個目錄,使用 npm init -y 命令,就可以創建一個最簡單的 package.json

圖片描述

當然現在的工程化的前端項目,也會用 package.json 來描述項目信息,來管理依賴、工作里等,一個包不一定要發送到 npm 上。

2.2 package.json 簡析

package.json 中有許多項目,描述了不同的信息。

這里介紹幾個常用的字段。

2.1.1 devDependencies

{
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-decorators": "^7.3.0"
  }
}

devDependencies 記錄了一些開發依賴,這些依賴在生產環境不會使用。

如一些代碼檢查工具,因為只有在開發、編譯階段需要檢查代碼,最終跑上線的代碼已經在運行了,不需要再進行語法、規范檢查。

2.1.2 dependencies

"dependencies": {
  "md5": "^2.2.1"
}

dependencies 記錄了生產、開發環境都會用到的依賴。

jquery,這樣實實在在跑在項目里,支撐起項目功能的依賴。

2.1.3 scripts

{
  "scripts": {
    "dev": "echo \"development\""
  }
}

scripts 可以說是直接接觸到的最常用的一個配置項。

配置 script 可以完成一些簡單的工作流,或者把復雜的命令配置為一個別名。

如配置的 dev 項,就可以通過在終端輸入 npm run dev 來調用。

同時 script 還提供了前置和后置鉤子,具體可以參閱文檔。

3. 體驗 Node.js

知道了 npmnode.js 的關系,了解了 package.json 的作用,就可以來嘗試使用 Node.js 做應用了。

3.1 讀寫文件

在終端使用 node js文件.js 就可以使用 Node.js 執行 .js 文件。

Node.js 中,處理文件需要使用 fs 模塊。這個模塊是 Node.js 自帶的,可以直接引入。

首先創建一個 .js 文件,然后在同級目錄下,創建任意的文本文件。

// app.js
var fs = require('fs');

var text = fs.readFileSync('./text.txt', 'utf-8');

console.log(text);

寫完這三行代碼,保存后就可以去終端執行代碼了。

圖片描述

fs 模塊的 readFileSync 方法,表示可以同步的讀取一個文件,然后將讀取到的文件放在 text 變量中。

隨后將讀取到的文件進行輸出。

fs 文件非常重要,一些特殊的配置文件,如 YAML 配置文件,就需要 fs 模塊讀取,在或者是靜態資源,也需要用 fs 模塊讀取或者寫入。

fs 模塊通過 require 引入,Node.js 支持 commonjs規范,通過 commonjs規范 來處理模塊。

新版的 Node.js 已經支持 ES Module,需要修改 package.json 中的 type 選項為 module。

3.2 使用 npm 包

md5 是很常用的加密算法,但通常又不可能自己去實現一遍,快速迭代的項目可以 拿來主義,有現成的方案直接拿來用。

npm 上有一個 md5 包,就可以拿來計算 md5。

首先在一個空目錄創建一個 package.json,用來描述項目信息,然后安裝 md5

npm init -y

npm i md5

圖片描述

然后新建一個 .js 文件,嘗試著使用 md5 這個包。

// app.js
var md5 = require('md5');

var password = '123456';

var encode = md5(password);

console.log(encode);

圖片描述

安裝好的包直接通過 require 引入,然后跟著包的文檔使用即可。

4. 小結

Node.js 目前生態主要集中在前端工具上,大眾的前段工程化的解決方案,都是由 Node.js 來驅動完成。

作為前端開發者,基礎的使用 Node.js 已經是必備技能,許多針對項目的自動化的流程工具,都需要前端開發者自己動手實現。