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

本文的源碼在這里下載 https://github.com/tianxiangbing/webpack-study   或者使用這個種子項目 https://github.com/tianxiangbing/react-seed

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

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

然后就是安裝webpack和一些依賴組件，便於打包，比如，在你的項目文件夾里執行

npm init

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

  "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是否安裝成功：

webpack -v

如果報錯了，可以嘗試把webpack安裝成全局的

npm install -g webpack

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

var path = require("path");
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
console.log("+++++++++++" + process.env.NODE_ENV + "***********")
var TEST = process.env.NODE_ENV == "test" || process.env.NODE_ENV == "dev";
console.log(TEST)
var filename = TEST ? "[name]" : "[chunkhash:8].[name]";
console.log(filename)
var extractCSS = new ExtractTextPlugin('' + filename + '.css');
//var ignoreFiles = new webpack.IgnorePlugin(new RegExp("^(jquery|react|react-dom)$"));

//動態創建html
var HtmlWebpackPlugin = require('html-webpack-plugin');
var htmlPlugin = new HtmlWebpackPlugin({
    title: "簽到",
    filename: '../index.html',
    template: "template.html"
});
var modulesDirectories = ["web_modules", "node_modules", "bower_components", "app/devconfig", "app/cyconfig"];
if (process.env.NODE_ENV == "test") {
    modulesDirectories = ["web_modules", "node_modules", "bower_components", "app/config", "app/cyconfig"];
}
var config = {
    entry: {
        app: ["./app/app.jsx"],
        vendor: ["react", "react-dom", 'whatwg-fetch', 'react-router']
    },
    output: {
        path: path.resolve(__dirname, "caiyun/build"),
        //publicPath: "/data/assets/build/",
        publicPath: "",
        filename: filename + ".js"
    },
    resolve: {
        modulesDirectories: modulesDirectories,
        extensions: ['', '.js', '.jsx', 'css']
    },
    module: {
        loaders: [{
            jsx: /\.(js|jsx)$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }, {
            test: /\.(eot|woff|ttf|svg)/,
            loader: 'file-loader?name=[name].[ext]'
        }, {
            test: /\.scss$/,
            exclude: /(node_modules|bower_components)/,
            loader: extractCSS.extract('style-loader', 'css?!sass?includePaths[]=' + path.resolve(__dirname, 'app/scss'))
        }, {
            test: /\.css$/,
            loader: extractCSS.extract('style-loader', 'css?includePaths[]=' + path.resolve(__dirname, 'app/scss'))
        }, {
            test: /\.html$/,
            loader: "html-loader"
        }, {
            test: /\.png$/,
            loader: "file-loader?name=[hash:8].[name].[ext]"
        }]
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        }),
        extractCSS,
        //ignoreFiles
        new webpack.optimize.CommonsChunkPlugin("vendor", "base.js"), htmlPlugin
    ]
};
if (process.env.NODE_ENV == "test" || process.env.NODE_ENV == "dev") {
    config.devtool = "source-map";
    config.output.publicPath = "/";
}
if (process.env.NODE_ENV == "production") {
    config.resolve.modulesDirectories = ["web_modules", "node_modules", "bower_components", "app/devconfig", "app/msconfig"];
    config.output.path = path.resolve(__dirname, "masheng/build")
}
console.log(config)
module.exports = config

代碼有點多，但我們可以嘗試的去理解他，因為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里的代碼，瀏覽器就會自動刷新為最新結果。而且本地沒有生成打包文件，很方便。

 

參考資料：react中國 http://www.react-cn.com/index.html