前端nodejs編譯

① 為什麼前端要會使用Nodejs

你熟悉JavaScript
假設你正在使用一個功能強大的客戶端框架(Angular，Ember,
Backbone)以及REST-ful伺服器端的API，使用JSON這種數據格式來傳輸和接受數據。即使你沒有使用其中的任一種框架，你也用jQuery寫過自己的框架。因此如果你不在伺服器端使用Node.js，那麼你就不斷地做轉譯吧。你在轉譯兩件事：
來自你腦中JavaScript的邏輯轉換為伺服器端框架的邏輯。
來自JSON的HTTP數據轉換為你的伺服器端的對象。
JavaScript貫穿著你的應用，你不但智力上漲，你也獲得了實踐經驗。通過模型和模板的復用，你可以減少應用的大小，同時減少了復雜度和出現bug的可能性。
它很快
Node.js是JavaScript運行環境，使用了Google用在Chrome中的V8引擎。V8以閃電般的速度編譯和執行JavaScript是因為V8將JavaScript編譯成本地機器代碼。包括網路連接的讀寫，文件系統的讀寫，以及資料庫的讀寫——所有的在網頁應用中的日常任務——在Node中執行地非常非常快。Node能讓你創建快速，大規模的網路應用，能夠處理高吞吐量的大量的實時連接。
工具
npm是Node.js的包管理器並且它棒呆了。這確實很棒，當然，這類似於其他生態系統的包管理器，但是npm很快很穩很一致。他在尋找和安裝項目依賴做的非常好。他讓包和其他的項目隔離開來，防止版本混淆。
實時變得簡單
如果Node.js很擅長多並發連接，那麼他也擅長多用戶的，實時的網頁程序，例如聊天室和游戲。Node的
event loop
能夠滿足多用戶需求。實時能力使用websocket協議。Websocket是在客戶端和伺服器端的簡單的雙向溝通渠道。因此伺服器能夠推送數據到客戶端就像客戶端推送一樣。websocket運行在TCP，避免了HTTP的消耗。
流數據
傳統意義上來說，web框架將HTTP請求和響應當做一個整體的數據對象。實際上，他們是I/O流，你可以想像，如果你把文件從文件系統中以流的形式取出。既然Node.js非常擅長處理I/O，我們能夠利用這個特點創建一些很酷的東西。比如，它能夠當視頻或音頻文件上傳的時候，就轉碼音頻或視頻文件，減少了整體處理的時間。
一個代碼庫和免費的實時
Meteor是下一代基於Node的web框架。他可以在客戶端和伺服器端運行相同的代碼庫。然後，數據自動保存在伺服器。其他的方式也奏效！任何伺服器上的數據都自動傳到客戶端。

② 如何系統地學習Node.js

對於剛接觸Node.js的新手來說，第一步無非是打好基礎，你需要弄明白以下事情：

JavaScript 的特性和語法。假如你對 JavaScript 還不熟悉的話，推薦書籍及鏈接：

JavaScript 推薦書籍列表

深入理解JavaScript系列

Node.js 是什麼？Node.js與JavaScript的區別是什麼？

Node.js的優點？Node.js的缺點？

Node.js適用場景？Node.js不適用的場景？

Node.js的基本語法。Node.js的特性：

單線程

非同步 IO

事件驅動

npm 是什麼？npm的基本使用

REPL

等等

其實上面的內容，大部分Node.js的書籍都有介紹。基本了解了Node.js後，我們可以寫一些 hello world 的程序：

搭建一個 HTTP 伺服器，返回 hello, world 。(使用 HTTP 模塊)

讀取一個 txt 文件，將內容顯示到命令行中。（使用 fs 模塊）

等等

第二步

你也許想，Node.js 只有那些少得可憐的核心模塊能做什麼呢？別擔心，npm 上目前有近 7W 的第三方模塊，月下載量高達 2.1億 （2014—4—20 數據）… 這才是 Node.js 的活力所在。當你對Node.js已經了解的差不多了，並且按耐不住躍躍欲試了。這個時候，我們不妨用 Node.js 的第三方模塊做些好玩的事情：

搭建一個微博網站

搭建一個博客網站

搭建一個在線聊天室

寫一個簡單的爬蟲

調用一些網站的API做一些好玩的東西

等等

但是，並不是說 Node.js 只能做以上事情，幾乎其他語言能做的事情 Node.js 都能做，而且有些情況下能做的更好。

第三步

當然，就像學 js 也不能只會用框架一樣，學習 Node.js 也不能只會用外部模塊。這個時候，我們需要回頭深入了解下 Node.js 核心模塊的用法。說白了，就是好好看 Node.js 官方 API 文檔。看文檔是碼農必備技能，英語不好的童鞋瀏覽器裝個劃詞翻譯的插件。

第四步

多實踐。不管是用核心模塊還是外部模塊，嘗試用 Node.js 解決某個問題或者替換掉以前用其他語言寫過的代碼。

讀源碼。這里說的讀源碼並不是說上來就去讀 Node 或者其他較大的框架的源碼。這個時候，挑一些簡單的只實現某個特定功能的工具模塊的源碼讀，這種模塊的代碼通常在幾百行，閱讀起來並不是很困難，但是卻能漲不少的姿勢。比如：

underscore （學習 JavaScript 的語法和技巧）

等等

第五步

堅持第四步。在使用 Node.js 時發現沒有合適的模塊選擇或者選擇的模塊功能不盡人意，這個時候你可以嘗試去創建一個模塊或者修改現有的模塊，並且使用 npm 發布自己的模塊或者去該模塊的 GitHub 上提 PR 。

第六步

多實踐。這個就不用解釋了

讀 Node 源碼及較大的框架的源碼。提高必備

多關注下 GitHub 上的牛人

重復第1-6步

③ 手把手教你使用nodejs編寫cli(命令行)

前端日常開發中，會遇見各種各樣的cli，比如一行命令幫你打包的webpack，一行命令幫你生成vue項目模板的vue-cli，還有創建react項目的create-react-app等等等等。這些工具極大地方便了我們的日常工作，讓計算機自己去干繁瑣的工作，而我們，就可以節省出大量的時間用於學習、交流、開發、 逛steam 。

但是有時候一些十分特別的需求，我們是找不到適合的cli工具去做的。比如說，你的項目十分龐大，你給項目添加一個新的路由，要經過 創建目錄 -> 創建.vue文件 -> 更新vue-router的路由列表 這一趟流程，就算快捷鍵創建目錄文件用得再熟悉，也比不過你一行命令來得快，特別是路由目錄嵌套深，.vue文件初始化模板復雜的時候。

所以呢，何不為自己項目寫一個cli？就專門做這些繁瑣的活？

nodejs的cli，本質就是跑node腳本嘛，基本上每位前端er都會：

然後命令行調用

可以做得更逼真一點，我們在package.json裡面的scripts欄位上添加一下腳本名：

然後命令行調用：

但是，看到這里你肯定會說，人家webpack還有vue-cli都是「有名字」的！什麼 vue-cli init app 、 webpack -p 的，多漂亮，看看這個命令行， node index.js ，還 npm run hello ，誰不會啊，丑不拉幾的，怕又不是來水文章的哦？差評！！

別急啊各位大人，接下來就說說，如何給這個node腳本起個名字。

姑且，先把這個cli的名字命名為 hello-cli ，就是我們能夠在命令行裡面，輸入 hello-cli ，然後它就列印一句 hello world ，沒有 node 也沒有 npm ，就是：

這樣，你的第一個cli腳本就成功安裝了，可以在命令行裡面，直接敲你的cli名字，看看結果輸出吧。

另外，如果你僅希望你的cli腳本僅在項目里執行，則需要在你項目裡面新建一個目錄，重復上述的操作，只是在第三步的時候，不要llink到全局裡面去，而是使用 npm i -D file:<你的腳本cli目錄路徑> ，把它當成項目的依賴安裝到node_moles裡面去，如果安裝成功，那麼在項目的package.json你會看到多了一條依賴，這條依賴的值不是版本號，而是你腳本的路徑。然後在node_moles裡面會有一個.bin目錄，裡面就存放著你的可執行文件。

當然，這樣安裝的cli腳本，必須在項目的package.json的scripts欄位上聲明腳本命令，然後通過 npm run 的方式執行。

哦？這樣子使用的話不就回到最最最開始的時候那種原始的 npm run hello 一樣么。

是的，但是有質的區別。使用 node index.js 這種方式調用的話固然簡單靈活，但是嚴重依賴腳本路徑，一旦目錄結構發生變動，寫在scripts的命令就要更改一次；但是使用npm安裝之後，本地的cli腳本就被拉到node_moles裡面，目錄結構變動對其影響不大。其次是不利於分享與發布，如果你想把你的cli腳本發布出去，那麼有一個好聽響亮的名字，比起在說明文檔裡面告訴使用者如何找到你的腳本路徑再用node執行它，簡直好上那麼一萬倍不是么？

這里也給我們提供了一個cli開發流程思路：

名字有了，輸出也有了，看看我們跟那些大名鼎鼎的cli工具，在形式上還差點啥？對了，人家可以支持不同參數選項的，還可以根據輸入的不同，產生不同的結果。

這樣吧，我們給這個cli加一個功能，既然叫 hello-cli ，那不能只會 hello world 吧，必須要見誰就說 hello 才行：

雖然這個功能很簡單，但是至少也是實現了「根據輸入的不同，產生不同結果」的效果。

命令行上的參數，可以通過 process 這個變數獲取， process 是一個全局對象而不是一個包，不需要通過 require 引入。通過 process 這個對象我們可以拿到當前腳本執行環境等一系列信息，其中就包括命令行的輸入情況，這個信息，保存在 process.argv 這個屬性里。我們可以列印一下：

列印結果：

可以看出，argv是個數組，前兩位是固定的，分別是node程序的路徑和腳本存放的位置，從第三位開始才是額外輸入的內容。那麼實現上面的功能就很簡單了，只要讀取argv數組的第三位，然後輸出出來就可以了。

npm社區中也有一些優秀的命令行參數解析包，比如 yargs ,tj的 commander.js 等等

如果你想使用比較復雜的參數或者命令，建議還是用第三方包比較好，手寫解析太耗精力了。

現在，你可以自由自在的寫你自己的cli腳本了。
如果你希望寫一個項目打完包自動推上git的cli，或者自動從git倉庫裡面拉取項目啟動模板，那麼，你需要通過node的 child_process 模塊開啟子進程，在子進程內調用git命令：

不僅是git命令，包括系統命令、其他cli命令都可以在這里執行。特別是系統命令，使用系統命令對文件目錄進行操作，效率比fs高到不知道哪裡去了。

社區上也有一些不錯的包，比如阮一峰老師推薦的 shelljs

如果你不那麼希望你的cli用起來那麼「硬核」，希望更人性化一點，比如提供一些友好的輸入、提示啊，給你的輸出加點顏色區分重點啊，寫個簡單的進度條啊等等，那麼你就需要美化一下你的輸出了。

除了顏色這部分，不使用第三方包實現起來非常繁瑣復雜，其他的功能，都可以試試自己寫。
顏色部分使用了第三方包 colors ，這里就不演示了。
其他都是由nodejs自帶的 readline 模塊實現的。

繪制的思路跟canvas繪制動畫一樣，只不過canvas是清除畫布，而命令行這里是通過 readline.clearScreenDown 清除輸出。

這樣，一個簡易的，人性化的，帶點點進度條動畫的命令行cli工具就寫好了，你也可以發揮你的想像力，去寫一些更有趣的效果出來。

畢竟我們前端，有瀏覽器我們可以寫動畫，沒了瀏覽器我們一樣可以寫動畫。

④ 前端用nodejs能做什麼

Node.js到底是什麼？

Node.js是一個JavaScript的編譯環境，當前端語言JavaScript在寫完之後可以交給Node.js進行編譯和解釋，它的存在對於JavaScript有了質的飛躍。

下面就是一個簡單的Node.js命令

#node hello.js

目前，Node.js在大部分領域都佔有一席之地，尤其是I/O密集型的。

比如Web開發，微服務，前端構建等。不少大型網站都是使用 Node.js 作為後台開發語言的，用的最多的就是使用Node.js做前端渲染和架構優化，比如 淘寶 雙十一、去哪兒網 的 PC 端核心業務等。另外，有不少知名的前端庫也是使用 Node.js 開發的，如Webpack是一個強大的打包器，React/Vue 是成熟的前端組件化框架。

Node.js通常被用來開發低延遲的網路應用，也就是那些需要在伺服器端環境和前端實時收集和交換數據的應用（API、即時聊天、微服務）。阿里巴巴、騰訊、Qunar、網路、PayPal、道瓊斯、沃爾瑪和 LinkedIn 都採用了 Node.js 框架搭建應用。

另外， Node.js 編寫的包管理器npm已成為開源包管理了領域最好的生態，直接到2017年10月份，有模塊超過47萬，每周下載量超過32億次，每個月有超過700萬開發者使用npm。

Node.js是一個對於前端工作者不可或缺的工具。尤其是對於JavaScript有著巨大的提升，現階段Node.js的應用已經有了非常蓬勃的發展。對於Node.js的學習和熟練運用，必不可少！