chapter2.一、react 項目構建

React項目

項目依賴安裝

將項目開發基礎文件 react-mobx-starter-master.zip 解壓縮，並用這個目錄做爲項目根目錄。

在項目根目錄中，執行下面的命令，就會自動按照package.json的配置安裝依賴模塊。

$ npm install

或者

$ npm i

警告能夠先不理會，錯誤要注意

安裝完成後，會生成一個目錄 node_modules ，裏面是安裝的全部依賴的模塊

項目總體說明

項目目錄結構
.
├── .babelrc 　　babel的運行環境
├── .gitignore 　　github文件
├── index.html 　　網站主界面
├── jsconfig.json 　　VS code 配置
├── LICENSE　　許可
├── .npmrc　　 npm運行環境文件
├── package.json 　　十分重要，記錄項目信息，全部項目的依賴
├── README.md　　 文檔說明
├── src　　 源文件
│ ├── App.js
│ ├── AppState.js
│ ├── index.html
│ └── index.js
├── node_modules 　　運行依賴包，按照package.json能夠安裝
│ ├── ...
├── webpack.config.dev.js
└── webpack.config.prod.js

配置文件詳解

package.json

$ npm init  產生的文件，裏面記錄項目信息，全部項目依賴。

版本管理

"repository": {
"type": "git",
"url": "https://127.16.0.1/react-mobx/react-mobx-starter.git"
}

項目管理

"scripts": {
    "test": "jest",
    "start": "webpack-dev-server --config webpack.config.dev.js --hot --inline",
    "build": "webpack -p --config webpack.config.prod.js" /*生產環境用*/
}

test JS測試用

start 指定啓動webpack的dev server開發用WEB Server，主要提供2個功能：靜態文件支持、自動刷新和熱替換HMR(Hot Module replacement)。

• --hot 啓動HMR
  • HRM能夠在應用程序運行中替換、添加、刪除模塊，而無需重載頁面，只把變化部分替換掉。不使用HMR則自動刷新會致使這個頁面刷新。
• --inline 默認模式，使用HMR的時候建議開啓inline模式。熱替換時會有消息顯示在控制檯。

build 使用webpack構建打包。對應 $ npm run build

項目依賴

devDependencies 開發時依賴，不會打包到目標文件中。對應 npm install xxx --save-dev 。例如babel的一些依賴，只是爲了幫咱們轉譯代碼，沒有必要發佈到生產環境中。

dependencies 運行時依賴，會打包到項目中。對應 npm install xxx --save

開發時依賴

"devDependencies": {
    "babel-core": "^6.24.1",
    "babel-jest": "^19.0.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.4.0", // 是一個集成
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1", // 以上都是babel的依賴，
    "css-loader": "^0.28.0", // 加載器
    "html-webpack-plugin": "^2.28.0", //加載器
    "jest": "^19.0.2", // 測試
    "less": "^2.7.2", // less加載器
    "less-loader": "^4.0.3",
    "react-hot-loader": "^3.0.0-beta.6", // 熱裝載器
    "source-map": "^0.5.6", // 調試
    "source-map-loader": "^0.2.1",
    "style-loader": "^0.16.1", // 樣式表的加載
    "uglify-js": "^2.8.22",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.2" //測試用的服務器
}

版本號指定：
版本號 ，只安裝指定版本號的
~版本號 ，例如 ~1.2.3 表示安裝1.2.x中最新版本，不低於1.2.3，但不能安裝1.3.x
^版本號 ，例如 ^2.4.1 表示安裝2.x.x最新版本不低於2.4.1
latest ，安裝最新版本

babel 轉譯，由於開發用了不少ES6語法。從6.x開始babel拆分紅不少插件，須要什麼引入什麼。

babel-core 核心。

babel-loader webpack的loader，webpack是基於loader的。

babel-preset-xxx 預設的轉換插件

babel-plugin-transform-decorators-legacy 插件，轉換裝飾器用的。

css樣式相關的包括：
css-loader、less、less-loader、style-loader

react-hot-loader react熱加載插件，但願改動保存後，直接在頁面上直接反饋出來，不須要手動刷新。

source-map 文件打包，js會合並或者壓縮，無法調試，用它來看js原文件是什麼。source-map-loader也須要webpack的 loader

webpack 打包工具，2.4.1 發佈於2017年4月，當前2.7.0發佈於2017年7月

webpack-dev-server 啓動一個開發的server

運行時依賴

  "dependencies": {
    "antd": "^2.9.1",
    "axios": "^0.16.1",
    "babel-polyfill": "^6.23.0",
    "babel-runtime": "^6.23.0",
    "mobx": "^3.1.9",
    "mobx-react": "^4.1.8",
    "mobx-react-devtools": "^4.2.11",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1"
  }

antd ant design，基於react實現，螞蟻金服開源的react的UI庫。作中後臺管理很是方便

axios 異步請求支持

polyfill 解決瀏覽器api不支持的問題。寫好polyfill就讓你的瀏覽器支持，幫你抹平差別化。解決瀏覽器兼容性問題。

react 開發的主框架

react-dom 支持DOM

react-router 支持路由

react-router-dom DOM綁定路由

mobx 狀態管理庫，透明化。

mobx-react、mobx-react-devtools mobx和react結合的模塊

react和mobx是一個強強聯合

babel配置

.babelrc babel轉譯的配置文件

{
  "presets": [
    "react",
    "env",
    "stage-0"
  ],
  "plugins": ["transform-decorators-legacy", "transform-runtime"]
}

webpack配置

webpack.config.dev.js

這是一個符合Commonjs的模塊。

module.exports 導出

devtool：'source-map'

生成及如何生成source-map文件。

source-map適合生成環境使用，會生成完成Sourcemap獨立文件。

因爲在Bundle中添加了引用註釋，因此開發工具知道如何找到Sourcemap。

entry入口

描述入口。webpack會從入口開始，找出直接或間接的模塊和庫，最後輸出爲bundles文件中

entry若是是一個字符串，定義就是入口文件。

若是是一個數組，數組中每一項都會執行，裏面包含入口文件，另外一個參數能夠用來配置一個服務器，咱們這裏配置的是熱加載插件，能夠自動刷新。

output輸出

告訴webpack輸出bundles到哪裏去，如何命名。

filename定義輸出的bundle的名稱

path 輸出目錄是 __dirname+'dist' ，名字叫作 bundle.js 。 __dirname 是nodejs中獲取當前js文件所在的目錄名。

publicPath 能夠是絕對路徑或者相對路徑，通常會以/結尾。/assets/表示網站根目錄下assets目錄下

resolve解析

設置模塊如何被解析。

extensions 自動解析擴展名。'.js'的意思是，若是用戶導入模塊的時候不帶擴展名，它嘗試補全。

module 模塊

module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    { loader: 'react-hot-loader/webpack' },
                    { loader: 'babel-loader' }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ]
            }
        ]
    }

 

如何處理不一樣的模塊

rules 匹配請求的規則，以應用不一樣的加載器、解析器等。

test 匹配條件的

exclude 排除的， /node_modules/打包排除目錄。這一句必定要有，不然，編譯就把這個目錄下全部文件也拿進來了，巨大無比。

use 使用模塊的UseEntries列表中的loader。

rules中對.js結尾的但不在node_modules目錄的文件使用轉譯babel-loader和熱加載loader。

加載器：

style-loader經過 <style> 標籤把css添加到DOM中

css-loader 加載css

less-loader 對less的支持

LESS 預編譯樣式表

CSS好處簡單易學，可是壞處是沒有模塊化、複用的概念，由於它不是語言。

LESS是一門CSS的預處理語言，擴展了CSS，增長了變量、Mixin、函數等開發語言的特性，從而講了CSS的編寫。

LESS自己是一套語法規則及解析器，將寫好的LESS解析成CSS。LESS可使用在瀏覽器端和服務器端。

@color : rgb(91, 162, 224); //rgb三原色表達式，也能夠十六進制表達

#header{
    color: @color
}
h1 {
    color: @color;
}

可使用CSS解析成以下的CSS

h1 {
  color: #5ba2e0;
}
p {
  color: #5ba2e0;
}

LESS在服務器端使用，須要使用LESS編譯器， $ npm install less ，本項目目錄已經安裝過了。

編譯輸出到控制檯
$ node_modules/.bin/lessc test.less
編譯輸出到文件
$ node_modules/.bin/lessc test.less test.css

管理CSS使用的強大的工具，能夠放函數等

plugins：webpack的插件

HotModuleReplacementPlugin 開啓HMR

DefinePlugin 全局常量配置

devServer，開發用server

devServer: {
        compress: true,
        port: 3000,
        publicPath: '/assets/',
        hot: true,
        inline: true,
        historyApiFallback: true,
        stats: {
            chunks: false
        },
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8080',
                changeOrigin: true
            }
        }
    }

compress 啓動gzip

port 啓動端口3000

hot 啓用HMR

proxy指定訪問 /api 開頭URL都代理到 http://127.0.0.1:8080 去，動靜分離，將須要處理的東西轉到8080端口去

vscode配置

jsconfig.json是vscode的配置文件，覆蓋當前配置。

以上是全部配置文件的解釋。拿到這個文件夾後，須要修改name、version、description，須要修改repository倉庫地址，須要修改author、license信息。這些信息修改好以後，就能夠開始開發了。

啓動項目

在項目根目錄，使用 $ npm start