React 項目
1、項目依賴安裝
（模板就是一套，基礎框架，打個包即可）
項目依賴安裝
將項目開發基礎文件 react-mobx-starter-master.zip 解壓縮，並用這個目錄作為項目根目錄
在項目根目錄中，執行下面的命令，就會自動按照package.json的配置安裝依賴模塊
npm install 或 npm i
安裝 完成後，會生成一個目錄 node_modules，裏面是安裝的所有依賴的模塊
項目整體說明：（外面的index.html 是主頁，src裏的是模板）
初始化最關鍵的是 package.json： 項目的基本信息，--save-dev --save 的所有依賴都在這裏
配置文件詳解 （node_modules 是package.json 生成的，所以不需要吧這個傳到 git上）
package.json （有了它，npm才能用）
$ npm init 產生的文件，裏邊記錄項目信息，所有項目的依賴
版本管理：
項目管理：webpack 代替了babel，修改配置後，會自動刷新
start 指定啟動webpack 的dev server 開發用 WEB Server， 主要提供2個 功能，靜態文件支持，自動刷新 和 熱替換 HMR（Hot Module Replacement）
=== --hot 啟動HMR
------： HMR可以在應用程序運行中替換，添加，刪除模塊，而無需重載頁面，只把變化部分替換掉，不使用HMR則自動刷新會導致這個頁面刷新.
=== --inline 默認模式，使用HMR 的時候建議開啟inline 模式，熱替換時 會有消息顯示在控制臺
build 使用webpack構建打包，對應npm run build
start：用於開發
build：用於生產
項目依賴：
devDependencies 開發時依賴，不會打包到目標文件中，對應 npm install xxx --save-dev
例如babel的一些依賴，只是為了轉義代碼，沒必要發布到生產環境
dependencies ：運行時依賴， 會打包到項目中 對應 npm install xxx --save
開發時依賴：
版本號指定：
版本號，只安裝指定版本號的
~版本號： 如~1.2.3 表示 安裝1.2.x中 最新版本，不低於1.2.3，但不能安裝1.2.x
^版本號：如^2.4.1 表示安裝2.x.x最新版本，不低於2.4.1
latest：最新版本
babel轉譯，因為開發用了很多ES6 語法，從6.x 開始的babel 拆分成很多插件，需要什麽引入什麽
css 樣式相關的：
css-loader less less-loader, stule-loader
react-hot-loader react 熱加載插件，希望改動保存後，直接在頁面上直接反饋出來，不用手動刷新
source-map 文件打包，JS 會合並或者壓縮，沒法調試，用它來看js 原文件 是什麽，source-map-loader也需要webpack的loader
webpack 打包工具，2.4.1 發布於17-4，當前2.7.0 發布17-7
webpack-dev-server 啟動一個開發的server
運行時依賴：
antd ant design ，基於react實現,例如一些按鈕等，螞蟻金服開源的react 的UI 庫，做中後臺管理非常方便
axios 異步請求支持 （promise實現）
polyfill 解決瀏覽器api 不支持的問題，寫好polyfill就讓你的瀏覽器支持，幫你抹平差異化
react 開發的主框架
react-dom 支持 DOM
react-router 支持路由
react-router-dm DOM綁定路由
mobx 狀態管理庫，透明化
mobx-react mobx-react-devtools ,開發使用的是Mobx 和 Redux （Mobx小巧，好用）
babel 配置
webpack 配置（兩個文件 ）
webpack.config.dev.js
這是一個符合 Common.js 的模塊
module.exports導出
devtool: ‘source-map‘, 生成及如何生成source-map 文件 source-map 適合生成環境使用，會生成完成Sourcemap獨立文件 由於在Bundle 中添加了引入註釋，所以開發工具知道如何找到Sourcemapentry 程序入口
描述入口，webpack 會從入口開始，找出直接或間接地模塊和庫，最後輸出為bundles文件中
entry 如果是一個字符串，定義就是入口文件
如果是一個數組，數組中每一項都會執行，裏面包含入口文件，另一個參數可以用來配置一個服務，我們致力配置的是熱加載插件，可以自動刷新
output 輸出（客戶端在哪個位置 可以看到 打包好的js文件）
告訴webpack輸出bundles到哪裏，如何命名
filename定義輸出的bundle的名稱
path 輸出目錄是__dirname + ‘dist‘， 名字叫做bundle.js __dirname 是nodejs 中獲取當前js 文件所在的目錄名
publicPath 可以是絕對路徑或相對路徑，一般會以 / 結尾， /assets/ 表示網站跟目錄下assets 目錄下
resolve解析
設置模塊如何被解析
extensions 自動解析擴展名， ‘.js’ 的意思是，如果用戶導入模塊的時候不帶擴展名，它會試補全。
nodule模塊
如何處理不同的模塊
rules 匹配請求的規則，以應用不同的加載器，解析器等
test 匹配條件的
exclude 排除的，/node_nodules/ 打包排除目錄 ， 這一句一定要有，否則，編譯就把這個目錄下所有文件也拿進來，巨大無比。
use 使用模塊的UseEntries 列表中lodar
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可以使用在瀏覽器端和服務器端
服務器不認less：
1、官方提供js ，將less 轉為 css
2、或者直接轉為css，直接發布css
安裝：
npm install less --save-dev
根目錄創建z.less
轉換：（根目錄下就多了一個css文件）
z.css文件
plugins：webpack 的插件
devServer， 開發用server
compress啟動gizp
port 啟動端口
hot 啟用HMR
proxy 指定訪問 /api 開頭 url 都代理到 http:// 127.0.0.1:8080 去
vscode 配置：
jsconfig.json 是vscode 的配置文件，覆蓋當前配置
啟動項目：
目錄結構：
1
React 項目