react+webpack+redux+router+ant 構架react開發環境（1）

標籤：開啟   更換   new   type   web伺服器   特色   5.5   install   erro   

需要安裝的軟體

　　node.js

　　npm

推薦使用使用[email protected]以上的版本，因為6.3.0版本之後會內建npm的包管理所以不需要單獨的安裝npm，因為偉大的牆，所以介意大家更換鏡像，

安裝完畢之後，開啟終端（mac）window電腦因該是cmd,輸入命令 node -v 會看到當前的node版本號碼，

就說明安裝成功了，可以下面的步驟了。

構建項目

• 建立一個檔案夾
• 使用webstorm編輯該檔案夾，之後開啟控制台，輸入  npm init 來產生一個 package.json 的檔案夾（一路斷行符號就OK了，最後輸入 yes ，不過介意在斷行符號之前去官網看看基本的流程）

　

 

現在就可以看到我們的項目大概情況了，裡面多了一個 package.json ，這就是剛才  npm init  產生的，將來團隊內部的成員只需要這一個檔案在install就ok了。

安裝webpack

• 全域安裝                    npm install webpack -g 
• 局部安裝到開發環境     npm install webpack --save-dev
• 局部安裝到生產環境     npm install webpack --save

這三個環境的具體定義，可以自行查詢。

接下來需要安裝 babel（轉碼）、react、react-dom、eslint （文法檢測），這裡我就不一一說安裝的方法了，直接將配置貼出來，大家直接  install 

"devDependencies": {    "babel-core": "^6.25.0",    "babel-loader": "^7.1.1",    "babel-preset-es2015": "^6.24.1",    "babel-preset-react": "^6.24.1",    "babel-preset-react-hmre": "^1.1.1",    "eslint": "^4.4.0",    "eslint-config-airbnb": "^15.1.0",    "eslint-loader": "^1.9.0",    "eslint-plugin-import": "^2.7.0",    "html-webpack-plugin": "^2.30.1",    "prop-types": "^15.5.10",    "react-router": "^3.0.0",    "webpack": "^2.7.0",    "webpack-dev-server": "^2.6.1"  },  "dependencies": {    "key-mirror": "^1.0.1",    "react": "^15.6.1",    "react-dom": "^15.6.1",    "redux": "^3.2.1"  }

webpack配置

• 在目前的目錄下建立一個webpack.config.js

具體解釋一下 webpack 配置的一些基本思路，我會直接寫好一份配置粘貼出來，不懂webpack的同學可以看看下面的注釋

 1 var path = require(‘path‘);  //引用node的path模組 2 var webpack = require(‘webpack‘); //載入webpack 3 var HtmlwebpackPlugin = require(‘html-webpack-plugin‘); //載入html-webpack-plugin 功能是產生一個html檔案，（我用來做我程式的入口檔案） 4  5  6 /** 7  *  __dirname      node全域變數  儲存的是檔案所在的檔案目錄 8  *  __filename     node全域變數  儲存的是檔案名稱 9  *  path.resolve   將一個字串解析到一個絕對路徑裡。10  */11 12 //常用路徑13 var ROOT_PATH = path.resolve(__dirname); //擷取當前檔案路徑14 var APP_PATH = path.resolve(ROOT_PATH, ‘entry‘); //擷取檔案入口指令碼的路徑15 var BUILD_PATH = path.resolve(ROOT_PATH, ‘build‘); //擷取打包檔案的輸入位置16 17 18 module.exports = {19     entry: {20         app: path.resolve(APP_PATH, ‘index.js‘)  //規定webpack在 APP_PATH 的idnex.js 檔案開始打包21     },22     output: {23         path: BUILD_PATH,  //輸出到那個檔案夾24         filename: "bundle.js" //輸出到該檔案夾的某個檔案25     },26     devtool: ‘eval-source-map‘,  //用來調試 因為你線上上跑的是壓縮過的代碼，看不到具體錯誤，這個方法是讓原始碼和壓縮代碼產生映射，方便快速的定位到指定你的檔案，27 28     devServer: {  //可以開啟一個本地web伺服器29         historyApiFallback: true,30         hot: true,31         inline: true,32         port: 808133     },34 35     module: {36         loaders: [ //webpack的特色載入器37             {38                 test: /\.jsx?$/,39                 loaders: [‘babel-loader‘],40                 include: [APP_PATH,STORE_PATH,SRC_PATH]41             }42         ]43     },44     plugins: [  //webpack的特色外掛程式45         new HtmlwebpackPlugin({46             title: ‘my First React‘47         })48     ],49     resolve: {  // 配置一些規則，提升解析速度50         extensions: [‘.js‘, ‘.jsx‘]51     }52 53 };

編寫react入口檔案

·建立檔案夾和檔案（要和你webpack的配置保持一致）

        

·index.js 裡面寫入

 1 import React, {Component} from ‘react‘; 2 import ReactDom from ‘react-dom‘; 3  4  5 class App extends Component { 6     constructor(props) { 7         super(props); 8     } 9 10     render() {11 12         return (13             <div className="container">14                 <h1>Hello React</h1>15 16             </div>17         )18     }19 }20 21 console.log("你好，hello");22 const app = document.createElement(‘div‘);23 document.body.appendChild(app);24 ReactDom.render(<App/>, app);

之後在  package.json 的script 裡配置 

1 "scripts": {2     "test": "echo \"Error: no test specified\" && exit 1",3     "build": "webpack",4     "dev": "webpack-dev-server --hot"5   },

開啟控制台 輸入  npm run dev 

說明編譯成功了，

開啟瀏覽器輸入  localhost:8081 可以看到

就說明搭建成功了，今天先講到這裡，後面會給大家詳細解釋 router的添加過程。

 

　

react+webpack+redux+router+ant 構架react開發環境（1）