reactjs學習一（環境搭配react+es6+webpack熱部署）

reactjs學習一（環境搭配react+es6+webpack熱部署）

 

reactjs學習一（環境搭配react+es6+webpack熱部署）

reactjs今年在前端圈裏很火，用了三四個月，感受確實很適合前端開發人員使用，值得深刻一下，因此這裏記錄一下我簡單的學習過程，首先是react的環境，因爲如今react的新版本已經很穩定了，因此推薦使用es6+webpack來搭建開發環境。

首先，安裝nodejs，略過，安裝gitbrach，略過，直接搜索到相對應軟件的官網，下載最新正式版本的軟件，而後就下一步下一步完成安裝就能夠了，很簡單的過程，可是不容忽略，若有問題，能夠問我。

而後就是安裝webpack和一些依賴組件，便於打包，好比，在你的項目文件夾裏執行

1

npm init

而後就是一直回車，新建一個 package.json 的文件，而後添加以下的代碼進去：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

"devDependencies" : {    "babel-core" :  "^6.7.7" ,    "babel-loader" :  "^6.2.4" ,    "babel-preset-es2015" :  "^6.6.0" ,    "babel-preset-react" :  "^6.5.0" ,    "component-ajax" :  "forbeslindesay/ajax" ,    "css-loader" :  "^0.23.1" ,    "extract-text-webpack-plugin" :  "^1.0.1" ,    "file-loader" :  "^0.8.5" ,    "html-loader" :  "^0.4.3" ,    "html-webpack-plugin" :  "^2.16.1" ,    "moment" :  "^2.13.0" ,    "node-sass" :  "^3.5.3" ,    "react" :  "^15.0.1" ,    "react-cookie" :  "^0.4.6" ,    "react-dom" :  "^15.0.1" ,    "react-helmet" :  "^3.1.0" ,    "react-router" :  "^2.4.0" ,    "sass-loader" :  "^3.2.0" ,    "style-loader" :  "^0.13.1" ,    "url-loader" :  "^0.5.7" ,    "webpack" :  "^1.13.0" ,    "webpack-dev-server" :  "^1.14.1" }

有些不是必須的，但建議都加上，以防後面仍是會用到，再執行 npm install  安裝這些依賴到本地，控制檯測試下webpack是否安裝成功：

1	webpack -v

若是報錯了，能夠嘗試把webpack安裝成全局的

1	npm install -g webpack

接下來，就是新建一個  webpack.config.js  的配置文件了，而後粘貼以下的代碼進去.

  View Code

代碼有點多，但咱們能夠嘗試的去理解他，由於webpack跟gruntjs有點相似，就是全是配置項，因此更多的須要去參考webpack的api來配置。反正我是看暈了，因此我不建議初學者一直糾結於這個配置，仍是來看個人配置吧，這裏使用到了 process.env.NODE_ENV  這個環境變量來做爲webpack的參數，方便我打出不一樣項目的包，再根據這個特色和  modulesDirectories 的做用，我能夠打包的時候指定不一樣的js文件夾，這有什麼用呢，就是說，個人參數（也就是NODE_ENV  ）是production的時候，js默認的目錄是

 ["web_modules", "node_modules", "bower_components", "app/devconfig", "app/msconfig"];

就是我在代碼裏import的時候，能夠省略掉../../../這種 ，他會先去這幾個文件裏去查找有沒有這個js。其實跟個人這個項目有關，你正常的項目能夠忽略掉這一塊的配置。

而後我把公用的幾個文件打到了一個 base.js 裏，

vendor:  ["react", "react-dom", 'whatwg-fetch', 'react-router']

new webpack.optimize.CommonsChunkPlugin("vendor", "base.js"), htmlPlugin

這裏還用到了一個 template.html ,這個是基於這個html模板新建一個打包後的html引用，爲何不直接用index.html這個呢，主要是要把Index.html這個留熱部署，template會加入js的hash文件引用，防止緩存致使的一些問題。

到這裏webpack就算配置完成了，能夠使用以下方法：

webpack -w //監聽打包
webpack -p //壓縮打包

既然有了監聽打包，爲何還要熱部署呢，由於監聽打包是會生成文件的，並且速度上也會有影響，接着，咱們建立server.js文件

config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
}
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {

});
    server.listen(8080);

代碼比較少，就是它會建立一個端口號爲8080的http服務，並且是自動刷新頁面，自帶reload裝逼技能。打開 http://localhost:8080/  查看是否可以打開！若是沒有打開多是由於你尚未啓動服務。

而後在index.html里加入以下代碼

<div id="app"></div>
    <script src="http://localhost:8080/webpack-dev-server.js"></script>
    <script src="base.js"></script>
    <script src="app.js"></script>

這樣基本上一個環境就算搭完了，而後使用 npm start 啓動熱部署。修改App.jsx裏的代碼，瀏覽器就會自動刷新爲最新結果。並且本地沒有生成打包文件，很方便。