React入門---react腳手架
React是Facebook研發的一款前端框架(MVC框架：側重於view層操做)，目前在行業內普遍使用。爲了讓框架的體積變得更輕量級，設計者們把其定義爲「漸進式」框架,也就是:css
- 主體核心的部分都在react/react-dom兩個框架中
- 若是想使用路由，咱們須要安裝react-router
- 若是想使用redux進行狀態統一管理，咱們再安裝redux/react-redux
- 若是想實現其它的功能，咱們還能夠繼續安裝 中間件/axious等 ...
- 根據用戶所需，再安裝不一樣的配套組件來完成，這就是"漸進式"設計思想(vue也是這樣設計的)
這樣的操做有好處，也有弊端，麻煩的是，開發中咱們須要不斷的安裝各類組件，並且react獨有的jsx語法是不能直接的被瀏覽器解析的，咱們在編寫程序過程當中使用的es6/less等待都須要進行編譯處理...html
此時咱們很是期待有一款自動化部署工具，能夠幫助咱們自動完成這些編譯的操做，webpack就是目前項目中很是經常使用的自動化部署平臺，咱們在搭建項目以前，還須要本身配置webpack。 ... 相似於這樣的操做還有不少，因此複雜繁瑣的項目配置，模塊安裝等成爲開發者們一大痛苦，有人調侃，是否是之後會出現"前端配置工程師"; 爲了解決這些問題，市面上有不少react項目開發的腳手架:前端
- generator-z-react-cli
- create-react-app
- ... 經過這些腳手架，咱們能夠快速搭建一套完整的react項目結構，避免人工手動一點點配置。
create-react-app
FaceBook官方發佈了一個無需配置，用於快速構建開發環境的腳手架工具:https://github.com/facebook/create-react-appvue
1.首先基於npm在全局安裝create-react-appnode
npm install -g create-react-appreact
2.在指定目錄中建立一個react項目工程webpack
create-react-app my-appgit
my-app是本身設置的項目名稱（遵循npm模塊發佈時的要求，例如，名字中布恩那個出現大寫字母或者漢字以及特殊字符等）es6
3.進入到指定的項目文件，啓動項目github
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提供更爲豐富的功能，你們可根據本身的喜愛選擇。
相關文章
- 1. React入門----腳手架搭建
- 2. React入門2-腳手架搭建
- 3. React腳手架
- 4. react腳手架
- 5. React 腳手架
- 6. react 腳手架--create-react-app
- 7. React -- 腳手架書寫react
- 8. React腳手架create-react-app
- 9. react-todoMVC腳手架
- 10. React腳手架create-react-app+elementUI使用
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Neo4j數據庫入門教程 - NoSQL教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
