學習React前提必須擁有Javascript和DOM知識。這個門檻已經很低了。但是很多的教程里面都提到npm,nodejs.要先安裝nodejs。在零基礎的情況,我一度以為學習React的運行必須依靠nodejs環境。其實不是這樣子的。
一、常用工具介紹
1.nodejs: Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. how to understand?首先node.js是一個JavaScript運行環境。一般我們了解的JavaScript是運行在瀏覽器中的。所以就能理解它是基於Chrome's V8 JavaScript engine的原因了。有了nodejs,就可以抽象javascript公共組件單獨部署到nodejs上提供公共服務了。前端的可能性,從此更加具有想象力。
2.npm:(node package manager)node包管理器,主要管理node包安裝,卸載、更新、查看、搜索和發布。將開發者從繁瑣的包管理工作(版本、依賴)中解放出來。nodejs已經集成了npm,所以安裝nodejs的時候npm也一並安裝好了。
3.nvm:node version manager,用它可以方便的在機器上安裝並維護多個Node的版本.那么為什么需要多個版本呢?場景有很多,比方說:你可能同時進行兩個項目,而不同項目所使用的node版本是不一樣的;又或者你要用更新的版本是做一些實驗。這種情況下,如果沒有NVM自己去安裝和維護多個版本的node也是一件比較麻煩的事情。這就是nvm的價值。
4.webpack:webpack is a module bundler(webpack就是一個模塊打包機)。它就是分析你當前項目的結構把項目中用的瀏覽器不能理解的東西(SCSS , jade, Typescript等),按照合適的方式打包並把它翻譯成瀏覽器可以理解的 css和js。在webpack中一切都是模塊(圖片、CSS也是)。
注意:學習React要安裝nodejs,主要的原因不是React依賴nodejs,而是webpack依賴nodejs.下面主要講講具體在Windows環境下安裝nvm、nodejs(npm)和webpack的方法。
二、nodejs在windows下的安裝
1.下載、安裝、使用 nvm和nodejs
下載nvm包地址: https://github.com/coreybutler/nvm-windows/releases
選擇nvm-setup.zip進行下載,安裝。如圖:
程序安裝過程中,在 Set Node.js Symlink 這一步目錄設置,是待會 nvm use 存放你的 nodejs 程序的目錄 [C:\\DevTools\\nodejs]。
nvm v // 查看版本 => 1.1.1 nvm install latest // 下載最新的 node 版本 v7.2.1 nvm install 4.4.4 // 安裝不同版本 nvm install 6.2.0 32 // 默認是64位,32位需指定 nvm uninstall 6.2.0 #卸載對應的版本
下載完成后,會在 \nvm 文件夾下多個 v7.2.1 文件夾。
nvm use 4.4.4 // 引入使用 nvm list // 查看已安裝的 node 版本
2.配置npm全局安裝路徑
執行下面的命令:
npm config set prefix "E:\nodejs\npm-global"
C:\\Users\\XXX\\ 會生成個 .npmrc 文件,內容如下:prefix=E:\nodejs\npm-global
去裝些全局的東西:
npm install webpack -g npm install webpack-dev-server -g
全局的所有包都在這:E:\nodejs\npm-global\node_modules。以后我們只要用npm安裝包的時候加上 -g 就可以把包安裝在我們剛剛配置的全局路徑下了。
修改環境變量:變量名為:NPM_HOME,變量值為 :E:\nodejs\npm-global。在Path的最前面添加;%NPM_HOME%
最后,可以通過npm -v 查看安裝的版本.