自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

為什么Nodejs成為后端開發(fā)者的新寵?

開發(fā) 后端
對于一些復(fù)雜的項(xiàng)目,“npm run dev” 可能還會執(zhí)行一系列的構(gòu)建任務(wù)。例如,在 Vue 項(xiàng)目中,它可能會使用 Webpack 或 Vite 等構(gòu)建工具對項(xiàng)目進(jìn)行打包和優(yōu)化。

1. 認(rèn)識 nodejs

nodejs 是基于 Chrome V8 引擎構(gòu)建的一個(gè)開源、跨平臺的 JS 運(yùn)行時(shí)環(huán)境,它允許開發(fā)者在服務(wù)器端運(yùn)行 JS 代碼。

眾所周知,Chrome 瀏覽器是谷歌公司開發(fā)的一個(gè)超級好用的瀏覽器,而 V8 引擎是谷歌公司開源的一種技術(shù),它在 Chrome 瀏覽器中主要用來提高編譯 JS 的執(zhí)行速度。

nodejs 也用到了 Chrome 的 V8 引擎,也能編譯執(zhí)行 JS 代碼。

那 nodejs 可以在服務(wù)器端運(yùn)行 JS 代碼什么意思呢?

我們可以基于 Node 環(huán)境開發(fā)后臺項(xiàng)目,處理用戶在瀏覽器發(fā)起的各種請求。

圖片圖片

2. 安裝配置 nodejs

2.1 下載安裝

https://nodejs.cn/download/

圖片圖片

直接下一步下一步安裝即可,建議安裝在 C 盤之外的其他盤符

安裝完成之后,Win+r 輸入 cmd,然后輸入 node -v 和 npm -v 驗(yàn)證安裝結(jié)果

圖片圖片

2.2 配置

1)配置環(huán)境變量

windows系統(tǒng):

系統(tǒng)環(huán)境變量 -> 新建:NODE_HOME,值為 node.js 的安裝目錄。path 變量新增 %NODE_HOME%

2)配置 npm 依賴位置

在 nodejs 安裝目錄下,創(chuàng)建 node_global 和 node_cache 兩個(gè)文件夾

圖片圖片

設(shè)置 npm 依賴下載位置

npm config set cache "D:\Software\Node\npm_cache"
npm config set prefix "D:\Software\Node\npm_global"

3)配置淘寶鏡像

npm config set registry https://registry.npmmirror.com

4)驗(yàn)證

npm config get registry

圖片圖片

3. nodejs 和 npm 的關(guān)系

npm 全稱 Node Package Manager,npm 是隨著 nodejs 一起安裝的一個(gè)包管理工具,nodejs 內(nèi)含 npm。

我們在開發(fā) nodejs 應(yīng)用的時(shí)候,可能需要用到很多不同的功能模塊,這些模塊由其他開發(fā)者開發(fā)并共放在一個(gè)倉庫里面。

如果我們想要使用某個(gè)第三方模塊,例如 axios ,只需要使用 npm install xxx 安裝即可,非常的方便。

圖片圖片

npm 倉庫地址:

https://www.npmjs.com/

圖片圖片

4. 內(nèi)置模塊

學(xué)習(xí) nodejs 主要就是學(xué)習(xí)它的一些內(nèi)置 API 和一些常用的第三方 API。

接下來我們先看一些常用的內(nèi)置模塊。

4.1 文件操作:fs

fs 模塊是 nodejs 官方提供的、用來操作文件的模塊。

在 nodejs 中,如果需要使用內(nèi)部的模塊,我們需要通過 require 加載模塊。

4.1.1 讀文件

圖片圖片

// 1. 加載 fs 模塊,
const fs = require('fs')
//    參數(shù)1:讀取文件的存放路徑
//    參數(shù)2:編碼格式,默認(rèn) utf8
//    參數(shù)3:回調(diào)函數(shù)
fs.readFile('./zhifou.txt', 'utf8', function (err, data) {
  if (err) {
    return console.log('讀取失??!' + err.message)
  }
  console.log(data)
})

圖片圖片

4.1.2 寫文件

// 1. 加載 fs 模塊,
const fs = require('fs')

//  參數(shù)1:文件路徑
//  參數(shù)2:寫入的內(nèi)容
//  參數(shù)3:回調(diào)函數(shù)
fs.writeFile('./hello.txt', '鋤禾日當(dāng)午,汗滴禾下土', function (err) {
  if (err) {
    return console.log('寫入失敗!' + err.message)
  }
  console.log('寫入成功!')
})

圖片圖片

__dirname 表示當(dāng)前文件所處的目錄,可以用來解決路徑動拼接的問題

// 1. 加載 fs 模塊,
const fs = require('fs')

//  參數(shù)1:文件路徑
//  參數(shù)2:寫入的內(nèi)容
//  參數(shù)3:回調(diào)函數(shù)
console.log(__dirname)
fs.writeFile(__dirname + '/hello.txt', '鋤禾日當(dāng)午,汗滴禾下土', function (err) {
  if (err) {
    return console.log('寫入失?。? + err.message)
  }
  console.log('寫入成功!')
})

圖片圖片

如果寫入同一個(gè)文件,新寫入的內(nèi)容會覆蓋之前的舊內(nèi)容

4.2 路徑操作:path

path 模塊是 nodejs 官方提供的、用來處理路徑的模塊。

4.2.1 join

const path = require('path');
let pathA = "/a";
let pathB = "/b";
let pathC = "/c";
let finalPath = path.join(pathA, pathB, pathC);
console.log(finalPath);

圖片圖片

4.2.2 basename

path.basename(path,ext) 可以獲取路徑中的最后一部分,經(jīng)常通過這個(gè)方法獲取路徑中的文件名

  • path 必選參數(shù),表示一個(gè)路徑的字符串
  • ext 可選參數(shù),表示文件擴(kuò)展名
const path = require('path');
const fpath = '/a/b/zhifou.js'
const fullName = path.basename(fpath)
console.log("name1:", fullName)
const fileName = path.basename(fpath, '.js')
console.log("namew:", fileName)

圖片圖片

4.2.3 extname

path.extname(path) 可以獲取路徑中的擴(kuò)展名

const path = require('path');
const filePath = '/a/b/zhifou.js'
const name = path.extname(filePath)
console.log("name:", name)

圖片

4.3 http

http 模塊是 Node.js 官方提供的用來創(chuàng)建 web 服務(wù)器的模塊

通過 http 模塊提供的 http.createServer() 方法,就能方便的把一臺普通的電腦,變成一臺 Web 服務(wù)器,從而對外提供 Web 資源服務(wù)。

// 1. 導(dǎo)入 http 模塊
const http = require('http')

// 2. 創(chuàng)建 web 服務(wù)實(shí)例
const server = http.createServer()

// 3. 為服務(wù)器實(shí)例綁定 request 事件,監(jiān)聽客戶端的請求
server.on('request', (req, res) => {
  // req.url 是客戶端請求的 URL 地址
  const url = req.url

  // 調(diào)用 res.setHeader() 方法,設(shè)置 Content-Type 響應(yīng)頭,解決中文亂碼的問題
  res.setHeader('Content-Type', 'text/html; charset=utf-8')
  // req.method 是客戶端請求的 method 類型
  const method = req.method
  const str = `請求的的 url 是 ${url}, 請求的方法類型是 ${method}`
  console.log(str)

  // 響應(yīng)數(shù)據(jù)
  res.end(str)
})

// 4. 啟動服務(wù)器
server.listen(8081, function () {
  console.log('server running at http://127.0.0.1:8081')
})

圖片圖片

5. 模塊化

5.1 nodejs 模塊化

我們說的前端模塊化,其實(shí)就是 JS 模塊化。模塊化是前端指定的一種開發(fā)規(guī)范。

在實(shí)際項(xiàng)目開發(fā)中,我們將常用的一些變量或者方法放到一個(gè) js 文件中,然后暴露出來,一個(gè) js 文件可以看做一個(gè)功能模塊。如果想要使用該模塊,只需要導(dǎo)入即可。

剛開始 JS 沒有模塊系統(tǒng)、標(biāo)準(zhǔn)庫較少、缺乏包管理工具。后來 CommonJS 橫空出世。

CommonJS 的模塊規(guī)范:

一個(gè)文件就是一個(gè)模塊,擁有單獨(dú)的作用域。普通方式定義的變量、函數(shù)、對象都屬于該模塊內(nèi)。

  • 通過 require 來加載模塊。
  • 通過 exports 和 module.exports 來暴露模塊中的內(nèi)容

nodejs 遵循了 CommonJS 模塊化規(guī)范。

nodejs 模塊化案例:

導(dǎo)出:

module.exports

圖片圖片

exports:

圖片圖片

導(dǎo)入:

const math = require('./math');
const testPrint = require('./print');

console.log(math.add(100, 200));
console.log(testPrint.print('知否技術(shù)'));

圖片圖片

5.2 ES6 模塊化

目前大家最常用的就是 ES6 的模塊化,因?yàn)?ES6 模塊化將更好地與其他前端技術(shù)棧(如React、Vue等)進(jìn)行整合。

ES6 模塊化語法:

  • 使用 import 關(guān)鍵字導(dǎo)入其他 js 文件
  • 使用 export 關(guān)鍵字向外共享 js 文件

5.2.1 搭建 node 環(huán)境

我們在 node 環(huán)境下體驗(yàn) ES6 模塊化。

首先在項(xiàng)目終端輸入以下命令初始化項(xiàng)目:

npm init -y

這時(shí)會立即生成 package.json 文件,然后配置 "type":"module" ,這樣我們就可以在 node 環(huán)境下體驗(yàn) ES6 模塊化了。

圖片圖片

5.2.2 導(dǎo)出方式

1)默認(rèn)導(dǎo)出:export default

let name = "知否君";
let age = 23;
function desc() {
    console.log("公眾號:知否技術(shù)");
}
export default {
    name, age, desc
}
export default {
    name: "知否君",
    age: 23,
    desc: function () {
        console.log("公眾號:知否技術(shù)");
    }
}

2)統(tǒng)一導(dǎo)出:export

let name = "知否君";
let age = 23;
function desc() {
    console.log("公眾號:知否技術(shù)");
}
export {
    name, age, desc
}

3)分別導(dǎo)出

export let name = "知否君";
export let age = 23;
export function desc() {
    console.log("公眾號:知否技術(shù)");
}

5.2.3 導(dǎo)入方式

1)默認(rèn)導(dǎo)入

import common from './common.js'
console.log(common);

2)解構(gòu)賦值導(dǎo)入

注意:解構(gòu)賦值導(dǎo)入其實(shí)就是分別導(dǎo)入,只適用于統(tǒng)一導(dǎo)出和分別導(dǎo)出。

import { name, age } from './common.js'
console.log(name);
console.log(age);

6. 第三方 API

第三方 API 太多了,例如 axios、pinia、vuex、myqsql、express 等,這里不再詳細(xì)介紹。

大家根據(jù)學(xué)習(xí)和工作需要,去 npm 倉庫或者網(wǎng)上單獨(dú)查找學(xué)習(xí)即可。

圖片圖片

7.node 常見問題

1)npm 是什么?

npm 就好比是一個(gè)前端的插件商店,里面有各種開發(fā)者寫的包,你需要的時(shí)候就從命令行安裝就可以了。

2)node 和 vue 有什么聯(lián)系

vue 的開發(fā)本身是不依賴 node 的,不過 vue 的腳手架 vue-cli 里面集成的 webpack 是基于 node 開發(fā)出來的,因此只能說 webpack 是依賴 node 的。

3)vite 和 node 什么關(guān)系

Vite 是一個(gè)前端構(gòu)建工具,它需要 nodejs 環(huán)境來運(yùn)行,因?yàn)樗拿钚泄ぞ吆蜆?gòu)建腳本都是基于 nodejs 的。

4)node 和 npm 什么關(guān)系

npm 是 nodejs 的包管理器(package manager)。我們在 nodejs 上開發(fā)時(shí),會用到很多別人已經(jīng)寫好的 JS 代碼,

如果每當(dāng)我們需要別人的代碼時(shí),都根據(jù)名字搜索一下,下載源碼,解壓,再使用,會非常麻煩。于是就出現(xiàn)了包管理器 npm 。

大家把自己寫好的源碼上傳到 npm 官網(wǎng)上,如果要用某個(gè)插件,直接通過 npm 安裝就可以了,不用管那個(gè)源碼在哪里。

并且如果我們要使用模塊 A ,而模塊 A 又依賴模塊 B ,模塊 B 又依賴模塊 C 和 D,此時(shí) npm 會根據(jù)依賴關(guān)系,把所有依賴的包都下載下來并且管理起來。

5)npm run dev 的本質(zhì)

通常,當(dāng)你在項(xiàng)目中執(zhí)行 “npm run dev” 時(shí),它會啟動一個(gè)開發(fā)服務(wù)器。這個(gè)服務(wù)器的主要目的是在開發(fā)過程中為你的前端應(yīng)用提供服務(wù)。

例如,在一個(gè) Vue 項(xiàng)目中,這個(gè)開發(fā)服務(wù)器可能是由 vite 提供的。它會監(jiān)聽項(xiàng)目中的文件變化,當(dāng)你修改了代碼后,服務(wù)器會自動重新加載頁面,讓你能夠立即看到修改后的效果,而無需手動刷新頁面。這樣可以大大提高開發(fā)效率,讓你能夠快速迭代和調(diào)試代碼。
  • 依賴管理

在執(zhí)行 “npm run dev” 之前,你的項(xiàng)目通常會有一個(gè) “package.json” 文件,其中列出了項(xiàng)目所需的各種依賴包。當(dāng)你運(yùn)行這個(gè)命令時(shí),npm 會首先檢查這些依賴包是否已經(jīng)安裝。如果沒有安裝,它會自動從 npm 倉庫中下載并安裝這些依賴包。

這些依賴包可能包括前端框架本身(如 Vue 或 React)、各種插件、庫以及開發(fā)工具等。

  • 構(gòu)建過程

對于一些復(fù)雜的項(xiàng)目,“npm run dev” 可能還會執(zhí)行一系列的構(gòu)建任務(wù)。例如,在 Vue 項(xiàng)目中,它可能會使用 Webpack 或 Vite 等構(gòu)建工具對項(xiàng)目進(jìn)行打包和優(yōu)化。

這個(gè)構(gòu)建過程可能包括將 ES6+ 的代碼轉(zhuǎn)換為瀏覽器可以理解的 ES5 代碼、合并多個(gè) CSS 文件和 JavaScript 文件、對圖片和字體等資源進(jìn)行優(yōu)化處理等。

責(zé)任編輯:武曉燕 來源: 知否技術(shù)
相關(guān)推薦

2016-12-28 11:18:10

NodeJSJava開發(fā)者

2021-12-16 20:12:37

后端開發(fā)Sentry

2013-03-28 19:25:35

騰訊云

2013-04-25 10:14:39

Facebook開發(fā)者開發(fā)

2011-12-27 09:31:13

程序員

2014-09-17 10:16:41

Java 9

2023-09-20 15:02:56

Java編程語言

2012-01-16 11:05:22

紅帽PaaS 開源

2024-10-06 13:00:05

2025-03-25 07:10:00

開發(fā)前端JavaScript

2012-11-16 14:57:25

2015-07-22 16:08:46

OpenStack開源貢獻(xiàn)代碼

2023-09-08 14:12:04

2016-12-07 08:59:15

LinuxWindows 10開發(fā)者

2013-06-07 10:07:28

開發(fā)者優(yōu)秀開發(fā)者

2014-12-04 09:58:59

PHP

2015-05-14 14:28:52

2013-08-05 13:26:05

2016-05-26 10:57:51

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號