Node.js安裝、webpack 安裝步驟Windows


注意:CMD要以管理員身份打開,否則在安裝webpack那一步一直報錯

默認 : C:\Windows\System32 --cmd.exe

 

 

 

 

什么是Node.js?

簡單的說 Node.js 就是運行在服務端的 JavaScript。 Node.js是一個基於 Chrome V8 引擎的 JavaScript 運行環境; Node.js使用一個事件驅動、非阻塞式 I/O 的模型,使其輕量且高效; Node.js的軟件包生態系統npm是全球最大的開源庫生態系統。

安裝教程

本機環境:Windows 10  64bit操作系統

1.下載安裝包

Node.js 官方網站下載:https://nodejs.org/en/download/

 下載完成,安裝包如下:

 

2.安裝

雙擊打開安裝,下一步下一步即可:

 

  安裝成功,測試安裝是否成功,運行CMD,分別輸入node -v 和 npm -v 分別查看node和npm的版本號,如下圖所示:

 

安裝完成后系統目錄如圖所示(其中,npm隨安裝程序自動安裝,作用就是對Node.js依賴的包進行管理):

 

 

3.配置npm在安裝全局模塊時的路徑和緩存cache的路徑

因為在執行例如npm install webpack -g等命令全局安裝的時候,默認會將模塊安裝在C:\Users\用戶名\AppData\Roaming路徑下的npm和npm_cache中,不方便管理且占用C盤空間,

所以這里配置自定義的全局模塊安裝目錄,在node.js安裝目錄下新建兩個文件夾 node_global和node_cache,如圖所示:

 

 然后在cmd命令下執行如下兩個命令,配置路徑:

npm config set prefix "D:\Install\nodejs\node_global" npm config set cache "D:\Install\nodejs\node_cache"

執行命令,如下圖所示:

(輸入指令后,命令行閃一下,不會有任何提示)

 執行完后,配置環境變量,分別新建用戶變量PATH和系統變量NODE_PATH,如下:

"此電腦"->“屬性”->"高級系統設置"->“環境變量” -> “系統變量”:新建一個變量名為 “NODE_PATH”, 值為“D:\Install\nodejs\node_global”,如下圖:

 

這是最重要的一點;在安裝webpack后出現'webpack' 不是內部或外部命令的問題 就是因為路徑不對

PATH和NODE_PATH全部設置為:D\Install\nodejs\node_global。

看到網上的設置方法為  :NODE_PATH屬性指向D:\Install\nodejs\node_global\node_modules,這樣設置並不對,就會導致報不是內部命令

“環境變量” -> “用戶變量”:編輯用戶變量里的Path,將相應npm的路徑(“C:\Users\用戶名\AppData\Roaming\npm”)改為:“D:\Install\nodejs\node_global”,如下:

 配置完成。 

4.安裝webpack及webpack-cli

  在cmd命令下執行 npm i -g webpack webpack-cli 安裝webpack如下圖所示:

 前端包管理工具npm, bower and grunt

 

也可以切換到本地目錄在安裝一遍,當然全局安裝就可以了,

 

 可以忽略本地安裝:因為我在D:\vue-exe\blue\es6\module 下練習項目,所以定為本地位置,命令:npm i webpack webpack-cli

 

 

 

安裝成功,自動生成文件夾如下所示:

 

 

 

 

在cmd命令下執行 webpack -v 查看webpack版本,如提示:

 注意:安裝webpack 過程中報錯是因為沒在管理員下安裝

----------------------------------------------------------------------

wepack安裝命令

webpack和webpack-cli這兩個都需要裝上

這兩個是互相配合的,一開始就是兩個都需要裝

-g  全局安裝, i 是install 的簡寫

npm i -g webpack webpack-cli       全局安裝(可要任何位置安裝)

npm i webpack webpack-cli      本地安裝(在本地目錄下)

兩個本地,兩個全局,正常使用webpack時,這四個庫都要裝,當然全局的裝一遍就行了

web

 --save 寫入到 dependencies 對象   -S就是--save

 --save-dev 寫入到 devDependencies 對象

----------------------------------------------------------------------

安裝完成后可進行第一個webpack項目-demo

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM