搭建前端環境 -Node 環境

1 什麼是Node.js

　　簡單的說 Node.js 就是執行在服務端的 JavaScript。

　　JavaScript程式，必須要依賴瀏覽器才能執行！沒有瀏覽器怎麼辦？OK，nodejs幫你解決

　　Node.js是脫離瀏覽器環境執行的JavaScript程式，基於Google的V8引擎，V8引擎執行Javascript的速度 非常快，效能非常好。

2 Node.js有什麼用

　　如果你是前端程式設計師，你不懂得像PHP、Python或Ruby等動態程式語言，然後你想建立自己的服務， 那Node.js是一個非常好的選擇。

　　Node.js 是執行在服務端的 JavaScript，如果你熟悉Javascript，那麼你將會很容易的學會Node.js。

　　當然，如果你是後端程式設計師，想部署一些高效能的服務，那麼學習Node.js也是一個非常好的選擇。

3 安裝

　　下載

　　　　官網：https://nodejs.org/en/

　　　　中文網：http://nodejs.cn/

　　　　LTS：長期支援版本

　　　　Current：最新版

　　　　安裝：Windows下雙擊點選安裝——>Next——>finish

　　　　注意：

　　　　　　node-v14.5.0-x64.msi 最新版本，如果是win7系統的話，可能安裝不了。

　　　　　　如果是win7系統，安裝node-v10.14.2-x64.msi這個版本

　　　檢視版本

　　　　　　在dos視窗中執行命令檢視版本號

　　　　　　　　node -v

　　　　　　建立資料夾 lagou-node,

　　　　　　用vscode開啟目錄，其目錄下建立 hello.js

       　　　　console.log("hello,nodejs");

　　　　　　開啟命令列終端：Ctrl + Shift + y,

　　　　　　輸入命令

　　　　　　　　node hello.js

　　　　　　第一次執行，可能會報錯！

　　　　　　相容性的問題，以管理員身份執行即可

　　　　　　這樣，沒有使用瀏覽器，我們也可以執行js程式了

4 伺服器端應用開發（瞭解）

　　建立 node-server.js

const http = require("http"); // node中自帶的require引入方法，http也是node中自帶的服
務物件
http.createServer( function(request,response){

    // 發出http請求的頭部資訊
    // http的狀態碼：200；OK
    // 請求的內容型別：text/plain
    response.writeHead(200,{"Content-Type": "text/plain"});

    //響應的資料 "hello,welcome！" ,此時，並不支援中文（以後一定會解決！）
    response.end("hello,welcome!");
} ).listen(8888); // 監聽埠

console.log("伺服器已啟動，請訪問 http://127.0.0.1:8888");

　　伺服器啟動成功後，在瀏覽器中輸入：http://localhost:8888/ 檢視webserver成功執行，並輸出 html頁面

　　停止服務：ctrl + c

搭建前端環境 -NPM環境

1 什麼是NPM

　　NPM全稱Node Package Manager，是Node.js包管理工具

　　是全球最大的模組生態系統，裡面所有的模組都是開源免費的，也是Node.js的包管理工具，相當於前 端的Maven

　　如果一個專案需要引用很多第三方的js檔案，比如地圖，報表等，檔案雜而亂，自己去網上下載，到處 是廣告和病毒

　　那麼，我們就想辦法，把這些js檔案統一放在一個倉庫裡，大家誰需要，誰就去倉庫中拿過來，方便多 了

　　npm就是這個倉庫系統，如果你需要某個js檔案，那就去遠端倉庫中下載，放在本地磁碟中，進而引用 到我們的專案中

　　管理前端工程 so easy！

2 NPM工具的安裝位置

　　node的環境在安裝的過程中，npm工具就已經安裝好了。

　　Node.js預設安裝的npm包和工具的位置：Node.js目錄\node_modules

　　在這個目錄下你可以看見 npm目錄，npm本身就是被NPM包管理器管理的一個工具，說明 Node.js已 經集成了npm工具

#在命令提示符輸入 npm -v 可檢視當前npm版本
npm -v

3 使用npm管理專案

專案初始化

全新建立一個目錄，作為專案目錄，使用dos命令進入此目錄，輸入命令

npm init

# 接下來是一堆專案資訊等待著你輸入，如果使用預設值或你不知道怎麼填寫，則直接回車即可。

# package name: 你的專案名字叫啥
# version: 版本號
# description: 對專案的描述
# entry point: 專案的入口檔案（一般你要用那個js檔案作為node服務，就填寫那個檔案）
# test command: 專案啟動的時候要用什麼命令來執行指令碼檔案（預設為node app.js）
# git repository: 如果你要將專案上傳到git中的話，那麼就需要填寫git的倉庫地址（這裡就不寫地
址了）
# keywirds： 專案關鍵字（我也不知道有啥用，所以我就不寫了）
# author: 作者的名字（也就是你叫啥名字）
# license: 發行專案需要的證書（這裡也就自己玩玩，就不寫了）

最後會生成package.json檔案，這個是包的配置檔案，相當於maven的pom.xml

我們之後也可以根據需要進行修改。

上述初始化一個專案也太麻煩了，要那麼多輸入和回車。想簡單點，一切都按照預設值初始化即可， ok，安排

npm init -y

4 修改npm映象 和 儲存地址

NPM官方的管理的包都是從 http://npmjs.com下載的，但是這個網站在國內速度很慢。

這裡推薦使用淘寶 NPM 映象 http://npm.taobao.org/ ，淘寶 NPM 映象是一個完整npmjs.com 鏡 像，同步頻率目前為 10分鐘一次，以保證儘量與官方服務同步。

設定映象和儲存地址：

#經過下面的配置，以後所有的 npm install 都會經過淘寶的映象地址下載
npm config set registry https://registry.npm.taobao.org

#設定npm下載包時儲存在本地的地址（建議英文目錄）
npm config set prefix "E:\\repo_npm"

#檢視npm配置資訊
npm config list

5 npm install命令的使用

npm install jquery

使用 npm install 安裝依賴包的最新版

模組安裝的位置：專案目錄\node_modules

安裝會自動在專案目錄下新增 package-lock.json檔案，這個檔案幫助鎖定安裝包的版本

同時package.json 檔案中，依賴包會被新增到dependencies節點下，類似maven中的 <dependencies>

jQuery版本有很多，上述命令下載的什麼版本的？ - 最新版

如果我的專案使用1.9.1版本進行開發的，通過npm安裝的3.5.1版本太新，會導致專案失效，如何 安裝指定版本庫？

npm install [email protected]