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

須要安裝的軟件

　　node.js

　　npm

推薦使用使用node@6.3.0以上的版本，由於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: 8081
33     },
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的添加過程。