一、Nodejs介紹
Nodejs英文網:https://nodejs.org/en/
Nodejs中文網:http://nodejs.cn/
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。
Node.js 的包管理器 npm,是全球最大的開源庫生態系統。
1、JavaScirpt介紹
(1)什么是JavaScript?
javascript是一門運行在瀏覽器端的腳本語言,用來做客戶端頁面的交互。
(2)JavaScript的運行環境呢?
故名思意他的運行環境就是瀏覽器,但是真的是這樣的嗎?
其實不然,他的真正運行環境其實是運行在瀏覽器內核中的js引擎。
為什么是這樣的了?因為通俗來講瀏覽器的作用就是用來瀏覽網頁的,我們在瀏覽器除了執行js外還能執行其他得東西,比如我們在瀏覽器輸入一個地址敲回車就可以發送請求並且接收服務器得響應。所以說瀏覽器的第一功能是請求一個http地址,也就是可以封裝一個請求報文出來,將一個url的地址封裝成一個請求報文,這個報文到服務端,然后給我們一個響應報文,然后在將響應解析出來,這也是瀏覽器的最大的作用。
當然服務器響應的內容有可能不一樣,比如說服務器返回一個html文件,css文件,img文件,用來渲染,我們稱之為渲染引擎,除此之外,還可以執行js,由js引擎來完成,因此可以說javascript的運行環境是瀏覽器中的js引擎,而不是瀏覽器。瀏覽器是一個大的概念。
(3)瀏覽器中的javascript可以做什么
javascript就是用來做交互的,但是籠統的說交互有點不明確,具體一點可以分為:
1)操作dom(也就是對dom的增刪改,注冊事件之類的事情)
2)發送AJAX請求/跨域
3)BOM交互如給我們提供頁面跳轉,歷史記錄,控制台打印日志
4)ecmascript(js的核心語言,如用來定義變量,函數等)
(4)瀏覽器端的javasscript不可以做什么?
貌似javascrip對我們日常的交互都可以完成,貌似什么都可以做,但是他也有不能做的事。如:
1)涉及到端對端的應用程序,我們需要操作文件,瀏覽器中的javascript是不能進行文件操作的,雖然h5里面提供了關於文件相關的API,但是這些API大多數只限於只讀的層面 ,不能像傳統的語言如java,通過傳一個路徑,然后將對應的文件讀出來,說白了就是不能進行文件和文件夾的CURD.
2)瀏覽器端的javascript也沒有辦法去操作操作系統,如獲取操作系統的版本之類的。
那么為什么不能進行這兩類操作?
其實是出於安全考慮,因為,js這門語言運行的環境比較特殊,說他特殊,特殊在什么地方?
雖然我們編寫好的js代碼最終會放在服務器上,但是他畢竟不是在服務器上執行的,而是通過服務器發送到瀏覽器端執行的,在瀏覽器端執行文件的操作顯然是不安全的,因此說這些功能在客戶端不是不能做,而是由於特殊的運行環境沒法做。
(5)了解了客戶端的js所能做的事,javascrip只能運行在瀏覽器端嗎?
前端開發人員都知道,javascrip是有ecmascrip語言,BOM,DOM組成的,在語言層面,她只是給我們提供一些操作語法,如定義變量,函數,類型,流程控制等的操作。而BOM,DOM是瀏覽器提供的,並非es提供的。因此我們常提及的js其實就是es,js的大部分功能(DOm,BOM(瀏覽器開放出來的API)等的操作)都是由 瀏覽器的執行引擎決定的 ,這也衍生出一個觀點,任何一門編程語言 ,他的能力不是由語言本身決定的,而是由他的執行環境決定的。
比如說java,他即是一門語言也是一個平台,對於javascript來說語言就是es,平台是瀏覽器。那么js只能運行在瀏覽器中嗎?非也!對於大多數語言,都是運行 在一個平台上的,比如java只運行在虛擬機上,但是也有運行在多個平台的語言, java在一定層面上來講是沒有必要運行在多個平台上的,因為虛擬機是跨平台(也就是跨操作系統如window,linux等)的。
js同樣是可以運行在多個平台的,瀏覽器之所以能過運行js,是因為他由js的執行引擎。js同樣,只要由支持他的平台就可以執行。因此說要想語言有很強大的功能,只需要提供強大的平台,node就是這樣一個平台,能夠執行js。
2、node介紹
(1)什么是node?
根據官方文檔可以知道,node就是一個給予谷歌v8引擎的一個javascript的運行時,可以理解為運行js的一個虛擬機。他使用的是一個事件驅動,非阻塞I/O模型 ,他是將js的運行環境搬到了服務器端,和客戶端沒有一點關系。是一個純服務端的東西,node只是為js提供了一個平台。
node里面其實還分了兩塊,一是封裝了v8引擎,目的是為了執行es(如定義變量,定義函數等),另外一個提供了大量的工具庫,是幫助node實現各種功能的,提供了一些以前js的環境辦不到的事情,比如文件操作,網絡操作,操作系統的操作。
既然node是一個平台(所謂的平台就是用來運行特定語言的),也就意味着node是用來運行語言的,那么java也是語言,node能運行java嗎?據nodejs創始人Ryan Dahl回憶,他最初是選擇了Ruby這門語言,但是Ruby這門語言的虛擬機效率不怎么樣最終放棄了,按照這種思路,貌似node將java的虛擬機集成進來應該可以運行java,但node作者最終選擇了javascript。
這樣js就實現了在服務端運行的可能,js運行在node平台上(分為v8部分,用來執行es,和大量的工具庫組件(API)稱之為libuv,提供了以前js的環境辦不到的事,如文件操作,網絡操作等等)。
(2)node在web中有什么用途?
(1)node可以接受客戶端用戶的所有請求,並且能夠快速的給出響應,因此node可以用來做網站。
(2)node可以作為一個中間層來來分發調用數據接口,比如有一個網站數據是有java提供的,我們可以讓node作為一個中間層,來接受用戶的請求,然后通過node來調用java數據接口,獲取到數據后直接在node層面做html的瓶裝,然后將渲染好的頁面直接給用戶。為什么要這樣做,直接請求java接口不行嗎,這是因為node被稱之為高性能的web服務器,在並發和抗壓方面都比傳統的平台要好很多,因此這樣一包裝可以極大的減輕服務器的開發。
通過上面的兩點,可以總結出,node在web中要么從前端頁面到后端服務全包了,一個是只做其中的一點。
一言以蔽之,node就是一個javascript的運行環境(平台),他不是一門語言,也不是javascript的框架。可以用來開發服務端應用程序,web系統。其特點是體積小,快速,高性能。
二、nodejs中npm
1、npm是什么?
簡單的說,npm就是JavaScript的包管理工具。類似Java語法中的maven,gradle,python中的pip。
2、npm安裝/更新/初始化
在這里雖然node.js更新到了8.11.1的版本,還是使用6.10.3版本。

(1)安裝
使用mac電腦選擇node-v6.10.3.pkg 下載安裝。
npm是和Nodejs一起並存的,只要安裝了Nodejs,npm也安裝好了,安裝好Nodejs之后。打開終端,執行如下命令,檢查是否安裝成功。
MacBook-Pro:~ hqs$ node -v v6.10.3 MacBook-Pro:~ hqs$ npm -v 3.10.10
(2)npm更新
由於npm自身的更新頻率比Node.js高很多,所以通過上面安裝的npm可能不是最新版本,可以通過下面的命令單獨更新npm。在這里不建議更新。
$ sudo npm install npm@lastest -g
(3)npm初始化
在去下載包之前,首先去當前項目的包進行初始化操作,執行命令:npm init。
運行這個命令后,它會詢問一些關於包的基本信息,根據實際情況回答即可。
如果不喜歡這種方式,可以使用npm init --yes
命令直接使用默認的配置來創建package.json
文件,最后根據需要修改創建好的package.json
文件即可。
$ 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> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (ES6_demo) npm_study version: (1.0.0) 1.0.3 description: 學習npm entry point: (index.js) test command: git repository: keywords: 123 author: hqs license: (ISC) About to write to /Users/hqs/PycharmProjects/ES6_demo/package.json: { "name": "npm_study", "version": "1.0.3", "description": "學習npm", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "123" ], "author": "hqs", "license": "ISC" } Is this ok? (yes) yes
生成的package.json文件,主要字段的含義如下:
name: 模塊名, 模塊的名稱有如下要求: 全部小寫 只能是一個詞語,沒有空格 允許使用破折號和下划線作為單詞分隔符 version: 模塊版本信息 description:關於模塊功能的簡單描述,如果這個字段為空的話,默認會從當前目錄的READMD.md或README文件讀取第一行內容作為它的默認值。 main: 模塊被引入后,首先加載的文件,默認為index.js。 scripts: 定義一些常用命令入口 關於最后一個英文的意思,我們可以證明,當我執行npm init之后,會自動的生成package.json的文件。
三、使用npm安裝和卸載模塊
使用npm install
會讀取package.json
文件來安裝模塊。
安裝的模塊分為兩類dependencies
和devDependencies
,分別對應生產環境需要的安裝包和開發環境需要的安裝包。 同樣在安裝模塊的時候,可以通過指定參數來修改package.json文件,以jquery和webpack做例子。
$ npm install vue --save # --save:讓vue包下載到當前目錄下 npm_study@1.0.3 /Users/hqs/PycharmProjects/ES6_demo └── vue@2.6.10 $ npm install jquery --save $ npm install webpack --save-dev
執行后,會將新安裝的模塊信息記錄到package.json
文件(該文件主要負責項目包的管理):
{ "name": "npm_study", # 模塊名 "version": "1.0.3", # 項目版本號 "description": "學習npm", # 項目描述 "main": "index.js", # 項目入口文件 "scripts": { # 項目腳本 "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "123" ], "author": "hqs", # 項目作者 "license": "ISC", # 認證證書 "dependencies": { # 當前項目依賴 "jquery": "^3.3.1", "vue": "^2.6.10" } }
1、下載jquery包
hqs$ npm install jquery --save npm_study@1.0.3 /Users/hqs/PycharmProjects/ES6_demo `-- jquery@3.3.1 npm WARN npm_study@1.0.3 No repository field.
執行以上命令,便可以安裝對應的包到執行命令的當前目錄,並創建一個node_modules
的文件夾,然后把需要安裝的安裝包下載到里面。同時package.json文件的dependencies配置更新。
2、下載不同版本的模塊
在npm install安裝時,可以通過@來指定下載的模塊版本。
MacBook-Pro:ES6_demo hqs$ npm install bootstrap@3.1.1 --save npm_study@1.0.3 /Users/hqs/PycharmProjects/ES6_demo `-- bootstrap@3.1.1 npm WARN npm_study@1.0.3 No repository field.
node_modules和package.json變化如下:
3、卸載模塊
MacBook-Pro:ES6_demo hqs$ npm uninstall bootstrap --save - bootstrap@3.1.1 node_modules/bootstrap npm WARN npm_study@1.0.3 No repository field.
變化效果如下:
4、使用cnpm(淘寶鏡像)
使用npm下載依賴時,由於是從國外的網站上下載內容,所以可能經常會出現不穩定的情況,所以需要下載cnpm代替npm,cnpm是國內淘寶的做的,在國內使用穩定。
1.下載cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.使用cnpm
cnpm install jquery --save