學習React前的准備工作


  學習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 查看安裝的版本.


免責聲明!

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



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