React項目實戰：環境搭建

前言

前面提到前端大統一的概念，若是感興趣，歡迎說說本身的見解，點擊前往。Web前端框架層出不窮，不可能面面俱到，這裏給個小建議：

• 若是對Weex App感興趣，應該選擇vue框架；
• 若是對React Native App感興趣，應該選擇React.js框架；

本系列文章是React技術棧，Vue技術棧將會在本系列文章結束後陸續更新。

技術棧

因爲本系列的文章是項目實戰，須要有相關的技術基礎，能夠到下方給出的連接進行深刻學習。項目實戰用到的主要框架和插件有：

• webpack：預編譯模塊打包工具。 官方文檔 - 中文翻譯
• React：構建用戶界面的JavaScript庫。 官方文檔 - 中文翻譯
• Redux：管理整個應用的數據流。 官方文檔 - 中文翻譯
• react-router：React應用路由庫。 官方文檔
• styled-components：React中的CSS最佳實踐。 官方文檔
• isomorphic-fetch：fetch兼容庫。 官方文檔
• JRoll2：移動前端滑動插件。 官方文檔
• ECharts：基於html5 Canvas圖表庫。 官方文檔

建議學習時以官方文檔爲準，中文翻譯或者第三方做者的教程能夠幫助你理清思路；會用到的重要知識點我也會進行簡明的解釋，如遇到錯誤或者不理解的內容，歡迎實時指出。

環境搭建

環境搭建是最爲枯燥和最容易出錯的地方，不過做爲開發者，咱們仍是頗有必要了解配置的具體步驟，在後面一段時間會發佈一個簡易版環境搭建教程。

系統環境：Win10 + 關閉安全管家

Node.js安裝

到官方網站下載安裝包 點擊前往，選擇LTS版本（9.0之後的版本在安裝styled-components時會報錯）。

npm部署

npm更新並部署至全局

npm install npm  -g

#【可選】設置淘寶鏡像
npm config set registry https://registry.npm.taobao.org

npm經常使用命令：

npm init    #引導建立package.json文件
npm install ***    #本地安裝；會在當前目錄生成node_modules文件夾，並在此安裝node模塊
npm install *** -g    #全局安裝；會在C:\Users\***\AppData\Roaming\npm\node_modules安裝
npm install *** --save    #運行時依賴的模塊；自動把模塊和版本號添加到package.json文件dependencies部分
npm install *** --save-dev    #開發時依賴的模塊；自動把模塊和版本號添加到package.json文件devdependencies部分
npm update ***    #更新node模塊
npm uninstall ***    #卸載node模塊

建立package.json文件

項目根目錄：D:\web\react-webapp-demo，請根據本身實際狀況設置。

cd D:\web\react-webapp-demo    #在PowerSell中打開項目目錄
npm init -y    #跳過提問階段，直接生成一個新的 package.json 文件。

安裝模塊

npm install --save react react-dom redux react-redux redux-logger redux-thunk react-router react-router-redux@next history styled-components isomorphic-fetch jroll jroll-pulldown jroll-infinite echarts babel-polyfill
npm install --save-dev webpack webpack-dev-server webpack-merge clean-webpack-plugin babel-loader babel-core babel-preset-env babel-preset-react css-loader style-loader file-loader url-loader html-webpack-plugin uglifyjs-webpack-plugin

模塊簡要說明：

react react-dom：React依賴
redux react-redux redux-logger redux-thunk：Redux依賴
react-router react-router-redux history：react-router依賴
styled-components：React中的CSS的實現依賴
isomorphic-fetch：fetch兼容庫
jroll jroll-pulldown jroll-infinite：JRoll插件依賴
echarts：基於html5 Canvas圖表庫
babel-polyfill：用於實現瀏覽器不支持原生功能的代碼
webpack：預編譯模塊打包
webpack-dev-server：實時從新加載的Web服務器
webpack-merge：webpack配置分離插件
clean-webpack-plugin：在building以前刪除你之前build過的文件
babel-loader babel-core babel-preset-env babel-preset-react：轉碼器babel依賴
css-loader style-loader file-loader url-loader：各格式文件打包依賴
html-webpack-plugin：生成HTML5文件的插件
uglifyjs-webpack-plugin：代碼壓縮插件

配置模塊

在項目根目錄生成.babelrc文件（Windows系統下文件重命名爲.babelrc.），並寫入以下數據

{
    "presets": ["env","react"]
}

配置package.json：運行npm run build啓動編譯模式和npm run start熱更新模式;

"scripts": {
    "start": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
},

根目錄新建webpack配置文件：webpack.common.js、webpack.dev.js、webpack.prod.js;

webpack.common.js（共用配置）

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    entry: ['babel-polyfill','./src/index.js'],    //項目的起點入口
    output: {    //項目輸出配置
        path: path.resolve(__dirname, 'build'),    //文件的輸出目錄 
        filename: 'static/js/[name].[hash:5].js'
    },
    module: {    //模塊加載
        rules: [
            {
                test: /\.css$/,    //匹配規則
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },{
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8192,    //小於8192B的文件轉爲base64文件
                        name: 'static/images/[name].[hash:5].[ext]'
                    }
                }
            }
        ]
    },
    plugins: [    //插件配置
        new CleanWebpackPlugin(['build']),    //清空編譯輸出文件夾
        new HtmlWebpackPlugin({
            title: 'Cinglong\'s Demo',
            filename: 'index.html',
            template: path.resolve(__dirname, 'templates', 'index.html')
        }),    //生成Html5文件
        new webpack.optimize.CommonsChunkPlugin({
            name: 'commons'
        }),    //共用代碼打包
    ]
};

webpack.dev.js（開發配置）

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = merge(common, {
    devtool: 'inline-source-map',    //代碼關聯顯示方式
    devServer: {
        historyApiFallback:true,    //文件重定向，和react-router相關
        hot: true,    //開啓模塊熱替換
        port: 80,    //服務器端口
        host: "192.168.23.101",    //服務器域名
        open: true    //自動打開瀏覽器標籤
    },
    plugins: [
        new webpack.NamedModulesPlugin(),    //顯示模塊的相對路徑
        new webpack.HotModuleReplacementPlugin()    //加載熱替換插件
    ]
});

webpack.prod.js（預編譯配置）

const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    plugins: [
        new UglifyJSPlugin()    //代碼壓縮
    ]
});

項目目錄

react-webapp-demo
  |- /node_modules    //模塊安裝目錄
  |- /src    //代碼目錄
    |- /container    //容器組件
    |- /presentational    //展現組件
      |- /images    //圖片目錄
    |- /reducers    //reducers操做
    |- /utils    //其餘
    |- index.js    //項目入口
  |- /templates    //模板目錄
  |- .babelrc    //babel編譯配置
  |- package.json    //項目目錄配置
  |- package-lock.json    //模塊信息（自動生成）
  |- webpack.common.js    //webpack共用配置
  |- webpack.dev.js    //webpack開發配置
  |- webpack.prod.js    //webpack編譯配置

系列目錄

1. 前端大統一時代即未來臨？
2. React項目實戰：環境搭建
3. React項目實戰：react-redux-router基本原理