nodejs介紹以及npm的使用

1、什麼是nodejs

2、什麼是node

3、npm的簡單使用

4、webpack介紹

 

 

1、什麼是nodejs

 

打開Nodejs英文網：https://nodejs.org/en/

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

咱們會發現這樣一句話：

翻譯成中文以下：

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。

Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。

Node.js 的包管理器 npm，是全球最大的開源庫生態系統。

 

1.什麼是JavaScript？

javascript是一門運行在瀏覽器端的腳本語言，用來作客戶端頁面的交互。

 

2.JavaScript的運行環境呢？

故名思意他的運行環境就是瀏覽器，可是真的是這樣的嗎？其實否則，他的真正運行環境實際上是運行在瀏覽器內核中的js引擎。爲何是這樣的了？由於通俗來說瀏覽器得做用就是用來瀏覽網頁得，咱們在瀏覽器除了執行js外還能執行其餘得東西，好比咱們在瀏覽器輸入一個地址敲回車就能夠發送請求而且接收服務器得響應。因此說瀏覽器的第一功能是請求一個http地址，也就是能夠封裝一個請求報文出來，將一個url的地址封裝成一個請求報文，這個報文到服務端，而後給咱們一個響應報文，而後在將響應解析出來，這也是瀏覽器的最大的做用。固然服務器響應的內容有可能不同，好比說服務器返回一個html文件，css文件，img文件，用來渲染，咱們稱之爲渲染引擎，除此以外，還能夠執行js，由js引擎來完成，所以能夠說javascript的運行環境是瀏覽器中的js引擎，而不是瀏覽器。瀏覽器是一個大的概念。

瀏覽器的javascript能夠作什麼？

 

3.瀏覽器中的javascript能夠作什麼

以前由提到過，javascrip就是用來作交互的，可是籠統的說交互有點不明確，具體一點能夠分爲：「

    （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，那麼node究竟是什麼東西？

 

2、什麼是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的環境辦不到的事，如文件操做，網絡操做等等）。

知道了什麼是node,應該還要清楚node在web中有什麼用途？

    （1）node能夠接受客戶端用戶的全部請求，而且可以快速的給出響應，所以node能夠用來作網站。

    （2）node能夠做爲一箇中間層來來分發調用數據接口，好比有一個網站數據是有java提供的，咱們可讓node做爲一箇中間曾，來接受用戶的請求，而後經過node來調用java數據接口，獲取到數據後直接在node層面作html的瓶裝，而後將渲染好的頁面直接給用戶。爲何要這樣作，直接請求java接口不行嗎，這是由於node被稱之爲高性能的web服務器，在併發和抗壓方面都比傳統的平臺要好不少，所以這樣一包裝能夠極大的減輕服務器的開發。

    經過上面的兩點，能夠總結出，node在web中要麼從前端頁面到後端服務全包了，一個是隻作其中的一點。

    一言以蔽之，node就是一個javascript的運行環境（平臺），他不是一門語言，也不是javascript的框架。能夠用來開發服務端應用程序，web系統。其特色是體積小，快速，高性能。

 

3、npm的簡單使用

 

1.先安裝nodejs環境，這樣就可使用其中的npm了 https://nodejs.org/en/

2.安裝後檢測是否安裝成功

node -v

npm -v

3.因爲npm更新頻率比node.js高，所以npm版本可能不高，須要升級的話，用這個命令

npm install npm@latest -g

4.npm能夠用來下載jquery，bootstrap等等，可是要先建立項目

 

1.新建文件夾項目後，npm初始化 

npm init

 

2.npm安裝的模塊分爲兩類dependencies和devDependencies，分別對應生產環境須要的安裝包和開發環境須要的安裝包。

npm install jquery --save # 生產環境安裝jquery

npm install bootstrap --save-dev # 開發環境安裝bootstrap

npm install jquery@2.0.1 --save # 下載指定版本

npm uninstall jquery  # 卸載，會自動在package.json中刪除寫入的模塊

 

3.若是package.json中開發環境和生產環境中的模塊本身電腦上沒有，運行npm install能夠自動下載

npm install 

 

因爲npm是國外的服務器，所以可能出現網絡問題，可使用國內源cnpm，用法與npm同樣

npm install -g cnpm --registry= https://registry.npm.taobao.org

 

4、webpack介紹

 

中文連接地址：https://www.webpackjs.com/

 

1.爲何要使用webpack？

現今的不少網頁其實能夠看作是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出了不少好的實踐方法

* 模塊化，讓咱們能夠把複雜的程序細化爲小的文件;

* 相似於TypeScript這種在JavaScript基礎上拓展的開發語言：使咱們可以實現目前版本的JavaScript不能直接使用的特性，而且以後還能轉換爲JavaScript文件使瀏覽器能夠識別；

* Scss，less等CSS預處理器

* ...

這些改進確實大大的提升了咱們的開發效率，可是利用它們開發的文件每每須要進行額外的處理才能讓瀏覽器識別,而手動處理又是很是繁瑣的，這就爲WebPack類的工具的出現提供了需求。

 

2.什麼是webpack

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。

 

中間那個是webpack的圖標，能夠看做webpack這個工具。左邊是咱們項目生產環境下因此來的包，經過這個webpack工具咱們能夠打包全部的圖片，因此的腳本，全部的樣式等等，最後打包成了右邊的靜態資源文件。

注意了：每一個webpack的版本都有不一樣的功能，並且高版本的webpack可能會出現意想不到的bug，在這裏推薦你們使用2版本的webpack。

另外webpack還支持咱們的模塊化加載, 這讓咱們更加快速的開發。