React入門---react腳手架

喵愛吃魚發表於2018-03-09
React

React是Facebook研發的一款前端框架(MVC框架：側重於view層操作)，目前在行業內廣泛使用。為了讓框架的體積變得更輕量級，設計者們把其定義為“漸進式”框架,也就是:

  • 主體核心的部分都在react/react-dom兩個框架中
  • 如果想使用路由，我們需要安裝react-router
  • 如果想使用redux進行狀態統一管理，我們再安裝redux/react-redux
  • 如果想實現其它的功能，我們還可以繼續安裝 中介軟體/axious等 ...
  • 根據使用者所需，再安裝不同的配套元件來完成，這就是"漸進式"設計思想(vue也是這樣設計的)

這樣的操作有好處，也有弊端，麻煩的是，開發中我們需要不斷的安裝各種元件，而且react獨有的jsx語法是不能直接的被瀏覽器解析的，我們在編寫程式過程中使用的es6/less等待都需要進行編譯處理...

此時我們非常期待有一款自動化部署工具，可以幫助我們自動完成這些編譯的操作，webpack就是目前專案中非常常用的自動化部署平臺，我們在搭建專案之前，還需要自己配置webpack。 ... 類似於這樣的操作還有很多，所以複雜繁瑣的專案配置，模組安裝等成為開發者們一大痛苦，有人調侃，是不是以後會出現"前端配置工程師"; 為了解決這些問題，市面上有很多react專案開發的腳手架:

  • generator-z-react-cli
  • create-react-app
  • ... 通過這些腳手架，我們可以快速搭建一套完整的react專案結構，避免人工手動一點點配置。

create-react-app

FaceBook官方釋出了一個無需配置，用於快速構建開發環境的腳手架工具:https://github.com/facebook/create-react-app

1.首先基於npm在全域性安裝create-react-app

npm install -g create-react-app

2.在指定目錄中建立一個react專案工程

create-react-app my-app

my-app是自己設定的專案名稱（遵循npm模組釋出時的要求，例如，名字中布恩那個出現大寫字母或者漢字以及特殊字元等）

3.進入到指定的專案檔案，啟動專案

cd my-app

npm run start 或者 $ yarn start(前提是在全域性安裝了yarn)

生產的結構目錄

my-app
  |--build      //構建目錄，遵循釋出系統規範
  |   |-- index.html    //靜態頁面
  |   |-- static        //資原始檔
  |
  |-- node_modules      //專案元件資料夾：所有安裝的元件都在這
  |
  |--src                //原始碼目錄
  |   |--index.js       //入口檔案(還生成了其它的檔案，但是沒啥用，我們可以直接的刪除掉)
  |
  |--public             //靜態頁面目錄
  |   |--index.html     //主頁面(還生成了其它的檔案，但是沒啥用，我們可以直接的刪除掉)
  |
  |-- .gitignore        //git提交的忽略檔案，我們一般還需要再手動增加.idea(通過webstorm編輯工具進行開發，生成的檔案)
  |--package.json   //專案依賴項及專案基礎資訊
  |--README.md      //專案描述
  |-- ...
複製程式碼

生成的package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {  //=>生產依賴項
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.0"
  },
  "scripts": {   //=>可執行指令碼
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

/*
 * 可執行指令碼註釋:
 *   $ npm run start  啟動服務，自動編譯專案，可以實現邊開發，邊自動編譯重新整理，看到最新開發的效果
 *   
 *   $ npm run build  把專案整體進行編譯，最後再bulid目錄中生成專案編譯後的檔案，我們上傳伺服器的就是這些檔案
 *   
 *   $ npm run test   使用Jest作為測試執行程式（不常用） 
 *    
 *   $ npm run eject  下文具體介紹使用
 *   
 *   當然以上操作也可以基於yarn來完成
 */
複製程式碼

通過分析，我們發現create-react-app有如下的一些特點：

  • 僅僅是安裝了react中最常用的react/react-dom元件，其餘的並沒有安裝，所以再專案開發中，我們根據需要，可能還會安裝:$ yarn add redux react-redux react-router-dom prop-types等等
  • 生成專案後，腳手架為了"優雅"，隱藏了所有的webpack相關的配置檔案，此時檢視myapp資料夾目錄，會發現找不到任何webpack配置檔案;這也就導致了，如果我們需要在webpack中安裝一些自己的loader或者plugin變的很困難；
  • create-react-app自動生成的webpack中整合了:eslint(程式碼檢測、url-loader(圖片BASE64[小於10000kb的圖片])、babel-loader(ES6和JSX語法解析)、style-loader、css-loader(CSS程式碼解析)、HtmlWebpackPlugin(產出HTML外掛)等內容
  • ...

npm run eject 上面提到，腳手架為了"優雅",隱藏了所有的webpack相關配置檔案，如果我們想要基於原來的基礎再次增加一些自己的東西，首先就要找到這些隱藏檔案並且進行修改。

有的開發者直接到node_modules中去搜尋webpack.config...等檔案，然後進行修改，修改後發現生效了，但是當修改後，我們又安裝了一些其它專案模組，重新編譯的時候，又回到了原有的配置資訊(很頭疼的問題，總不能每一次安裝新模組後，都重新改一次需要修改的配置吧...)

基於create-react-app建立完成專案後，會提供一個eject命令($ yarn eject)，基於這個命令，可以把隱藏的webpack檔案展示出來，方便我們二次進行配置。

$yarn eject或者npm run eject 此命令執行完成不可逆轉(慎重使用)

執行完成後，我們可以看到原有的結構目錄發生了一些變化(新增兩個資料夾,package.json中的內容也跟著發生改變)

結構更改

my-app
  |-- config        //webpack的配置檔案都在這裡
  |     |--jest
  |     |  |--cssTransform.js
  |     |  |--fileTransform.js
  |     |--env.js
  |     |--paths.js
  |     |--polyfills.js
  |     |--webpack.config.dev.js
  |     |--webapck.config.prod.js
  |     |--webpackDevServer.config.js
  |
  |--scripts
  |   |-- build.js
  |   |-- start.js
  |   |-- test.js
  後期如果想修改配置資訊，修改webpack.config.dev.js、webpack.config.prod.js即可，當然其它的大家也可以去修改(前提是研究明執行的原理)
複製程式碼

package.json中的變更

{
  "name": "my-app2",
  "version": "0.1.0",
  "private": true,
  "dependencies": { //=>在依賴項中把之前隱藏的（已經安裝的）模組都顯示出來了，其中很多都是配置webpack需要安裝的 
    "autoprefixer": "7.1.6",
    "babel-core": "6.26.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
    "babel-preset-react-app": "^3.1.1",
    "babel-runtime": "6.26.0",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
    "css-loader": "0.28.7",
    "dotenv": "4.0.0",
    "dotenv-expand": "4.0.1",
    "eslint": "4.10.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.39.1",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.4.0",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.5",
    "fs-extra": "3.0.1",
    "html-webpack-plugin": "2.29.0",
    "jest": "20.0.4",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.8",
    "promise": "8.0.1",
    "raf": "3.4.0",
    "react": "^16.2.0",
    "react-dev-utils": "^5.0.0",
    "react-dom": "^16.2.0",
    "redux": "^3.7.2",
    "style-loader": "0.19.0",
    "sw-precache-webpack-plugin": "0.11.4",
    "url-loader": "0.6.2",
    "webpack": "3.8.1",
    "webpack-dev-server": "2.9.4",
    "webpack-manifest-plugin": "1.3.2",
    "whatwg-fetch": "2.0.3"
  },
  "scripts": { //=>去掉了eject命令（這個命令是不可逆轉的，執行一次生效後，就去掉這命令了）
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  },
  "jest": { 
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "mjs",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}
複製程式碼

如果你熟練掌握webpack的配置操作，那麼接下來就可以自己去擴充webpack了...

generator-z-react-cli

一款基於yeoman generator的腳手架：http://yeoman.io/ 1.首先基於npm在全域性安裝yeoman

npm install -g yo

2.其次在全域性下安裝腳手架

npm install -g generator-z-react-cli

3.最後生成專案

yo z-react-cli

結構目錄

my-app
  |-- index.html //啟動頁(主頁)
  |-- build //構建目錄，遵循釋出系統規範
  |    |-- index.html   //靜態頁面
  |    |-- static       //資原始檔釋出到cdn,或釋出到伺服器  
  |
  |-- src                     //原始碼目錄
  |    |--component           // 元件
  |    |      |-- common      //公共元件
  |    |      |-- temp        //父元件
  |    |--Config              //工具方法
  |    |--Image               //圖片資源
  |    |--Redux               //react-redux資料狀態管理
  |    |      |-- action.jsx  //派發資料的action
  |    |      |-- reducer.jsx //用於處理action的reducer
  |    |      |-- store.jsx   //資料管理器
  |    |-- Router           //路由
  |    |-- Style            //樣式
  |    |-- template         //編譯html模板
  |    |-- App.jsx          //js入口檔案
  |
  |-- webpack.config.hot       //本地熱編譯
  |-- webpack.config.buildt    //編譯釋出測試環境
  |-- webpack.config.online    //編譯釋出線上環境
  |-- server.js
  |-- server_hot.js    //本地伺服器啟動檔案
  |-- .babelrc  //ES6語言解析設定
  |-- package.json  //專案依賴項
  |-- ...
複製程式碼

可執行命令

安裝依賴

npm install

在本地主機(8088埠)上提供熱過載:即輸入http://localhost:8088可訪問正在開發的專案

npm run hot

#專案整體編譯部署，用於測試環境 npm run buildt

#專案整體編譯部署，用於線上環境 npm run online

功能特色

可以解析JSX語法 可以解析ES6語法新特性 支援LESS、SCSS前處理器 編譯完成自動開啟瀏覽器 單獨分離CSS樣式檔案 支援檔案MD5戳，解決檔案快取問題 支援圖片，圖示字型等資源的編譯 支援瀏覽器原始碼除錯 實現元件級熱更新 實現程式碼的熱替換，瀏覽器實時重新整理檢視效果 區分開發環境和生產環境分離業務功能程式碼和公共依賴程式碼 ...

package.json檔案部分預覽

{
  "name": "my-app",  //=>專案名稱
  "version": "1.0.0",  //=>專案版本
  "description": "...", //=>專案描述
  "main": "index.js", //=>專案入口檔案
  "scripts": {  //=>可執行的命令指令碼
    "dev": "node server.js",  //=>啟動服務
    "hot": "node server_hot.js", //=>專案本地預覽
    "buildt": "webpack --config webpack.config.buildt.js --progress --colors --watch -p", //=>專案編譯：用於測試
    "online": "webpack --config webpack.config.online.js --progress --colors --watch -p"  //=>專案編譯：用於線上
  },
  ...
  "dependencies": {  //=>生產依賴模組
    "babel-polyfill": "^6.23.0",
    "body-parser": "^1.17.1",
    "deep-extend": "^0.4.1",
    "github-markdown-css": "^2.4.0",
    "immutable": "^3.8.1",
    "isomorphic-fetch": "^2.2.1",
    "normalize.css": "^4.1.1",
    "pure-render-decorator": "^1.2.1",
    "react": "^15.5.4",
    "react-dom": "^15.3.2",
    "react-redux": "^4.4.5",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "redux": "^3.6.0",
    "redux-immutablejs": "^0.0.8",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.1.0",
    "sass-loader": "^4.1.1"
  },
  "devDependencies": {  //=>開發依賴模組
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.2.8",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.16.0",
    "body-parser": "^1.15.1",
    "browser-sync": "^2.18.8",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.23.1",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.22.0",
    "http-proxy-middleware": "^0.17.3",
    "jsx-loader": "^0.13.2",
    "less": "^2.6.1",
    "less-loader": "^2.2.3",
    "node-sass": "^3.11.3",
    "react-hot-loader": "^1.3.1",
    "react-transform-catch-errors": "^1.0.2",
    "react-transform-hmr": "^1.0.4",
    "redbox-react": "^1.3.3",
    "sass": "^0.5.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.0",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-dev-server": "1.14.1",
    "webpack-hot-middleware": "^2.13.2"
  }
}
複製程式碼

這個腳手架要比create-react-app提供更為豐富的功能，大家可根據自己的喜好選擇。

相關文章