一、什麼是nodejs 二、什麼是node 三、npm的簡單使用 四、webpack介紹     一、什麼是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到底是什麼東西？   二、什麼是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系統。其特點是體積小，快速，高效能。   三、npm的簡單使用   1.先安裝nodejs環境，這樣就可以使用其中的npm了 https://nodejs.org/en/ 2.安裝後檢測是否安裝成功 node -v npm -v 3.由於npm更新頻率比node.js高，因此npm版本可能不高，需要升級的話，用這個命令 npm install [email protected] -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

[email protected] --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   四、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還支援我們的模組化載入, 這讓我們更加快速的開發。