JavaScript之gulp項目構建（react）

 

Node.js : 用於編寫Web服務端程序，實質是對Chrome V8引擎進行了封裝

express : 基於Node.js的Web應用開發框架

npm ：Node.js的包管理器

gulp ：基於流的代碼自動化構建工具，把流程工具化來提升效率。

babel ：轉換編譯器，將ES6轉換成能夠在瀏覽器中運行的代碼

 

全局安裝：將一個模塊安裝到系統目錄中，各個項目均可以調用。

本地安裝：將一個模塊下載到當前項目的node_modules子目錄，而後只有在項目目錄之中，才能調用這個模塊。

 

首先全局安裝Node.js

 

一、建立路徑和文件

二、在server目錄下建立ejs模板引擎express –e .

三、在根目錄下安裝npm依賴包npm install

四、在根目錄下使用npm init建立package.json文件

五、在根目錄下建立.babelrc和gulpfile.babel.js配置文件。

至此，項目基本建立完成。

 

還須要安裝腳本中用到的node包，切換到當前項目路徑，根據須要完成本地安裝。

npm install gulp gulp-if …… --save-dev

 

安裝轉換編譯器

npm install babel-loader babel-core babel-cli babel-preset-es2015

 

配置.babelrc文件，該文件用來設置轉碼規則和插件。

{"presets":["es2015"]}

 

cmd中使用gulp --watch 編譯

 

done!

 

實現熱更新，即更新頁面內容但不須要刷新頁面。在app.js文件中加上熱更新模塊。

瀏覽器中地址localhost:3000

 

 

React框架

一、在項目根目錄下安裝須要的組件

npm install babel-preset-react react react-dom --save-dev

二、配置.babelrc文件