當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

React入门---react脚手架

發(fā)布時間：2025/6/16 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 React入门---react脚手架小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

主體核心的部分都在react/react-dom兩個框架中
如果想使用路由，我們需要安裝react-router
如果想使用redux進(jìn)行狀態(tài)統(tǒng)一管理，我們再安裝redux/react-redux
如果想實(shí)現(xiàn)其它的功能，我們還可以繼續(xù)安裝中間件/axious等 ...
根據(jù)用戶所需，再安裝不同的配套組件來完成，這就是"漸進(jìn)式"設(shè)計思想(vue也是這樣設(shè)計的)

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

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

generator-z-react-cli
create-react-app
... 通過這些腳手架，我們可以快速搭建一套完整的react項(xiàng)目結(jié)構(gòu)，避免人工手動一點(diǎn)點(diǎn)配置。

create-react-app

FaceBook官方發(fā)布了一個無需配置，用于快速構(gòu)建開發(fā)環(huán)境的腳手架工具:https://github.com/facebook/create-react-app

1.首先基于npm在全局安裝create-react-app

npm install -g create-react-app

2.在指定目錄中創(chuàng)建一個react項(xiàng)目工程

create-react-app my-app

my-app是自己設(shè)置的項(xiàng)目名稱（遵循npm模塊發(fā)布時的要求，例如，名字中布恩那個出現(xiàn)大寫字母或者漢字以及特殊字符等）

3.進(jìn)入到指定的項(xiàng)目文件，啟動項(xiàng)目

cd my-app

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

生產(chǎn)的結(jié)構(gòu)目錄

my-app|--build //構(gòu)建目錄，遵循發(fā)布系統(tǒng)規(guī)范| |-- index.html //靜態(tài)頁面| |-- static //資源文件||-- node_modules //項(xiàng)目組件文件夾：所有安裝的組件都在這||--src //源碼目錄| |--index.js //入口文件(還生成了其它的文件，但是沒啥用，我們可以直接的刪除掉)||--public //靜態(tài)頁面目錄| |--index.html //主頁面(還生成了其它的文件，但是沒啥用，我們可以直接的刪除掉)||-- .gitignore //git提交的忽略文件，我們一般還需要再手動增加.idea(通過webstorm編輯工具進(jìn)行開發(fā)，生成的文件)|--package.json //項(xiàng)目依賴項(xiàng)及項(xiàng)目基礎(chǔ)信息|--README.md //項(xiàng)目描述|-- ... 復(fù)制代碼

生成的package.json

{"name": "my-app","version": "0.1.0","private": true,"dependencies": { //=>生產(chǎn)依賴項(xiàng)"react": "^16.2.0","react-dom": "^16.2.0","react-scripts": "1.1.0"},"scripts": { //=>可執(zhí)行腳本"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"} }/** 可執(zhí)行腳本注釋:* $ npm run start 啟動服務(wù)，自動編譯項(xiàng)目，可以實(shí)現(xiàn)邊開發(fā)，邊自動編譯刷新，看到最新開發(fā)的效果* * $ npm run build 把項(xiàng)目整體進(jìn)行編譯，最后再bulid目錄中生成項(xiàng)目編譯后的文件，我們上傳服務(wù)器的就是這些文件* * $ npm run test 使用Jest作為測試運(yùn)行程序（不常用） * * $ npm run eject 下文具體介紹使用* * 當(dāng)然以上操作也可以基于yarn來完成*/ 復(fù)制代碼

通過分析，我們發(fā)現(xiàn)create-react-app有如下的一些特點(diǎn)：

僅僅是安裝了react中最常用的react/react-dom組件，其余的并沒有安裝，所以再項(xiàng)目開發(fā)中，我們根據(jù)需要，可能還會安裝:$ yarn add redux react-redux react-router-dom prop-types等等
生成項(xiàng)目后，腳手架為了"優(yōu)雅"，隱藏了所有的webpack相關(guān)的配置文件，此時查看myapp文件夾目錄，會發(fā)現(xiàn)找不到任何webpack配置文件;這也就導(dǎo)致了，如果我們需要在webpack中安裝一些自己的loader或者plugin變的很困難；
create-react-app自動生成的webpack中集成了:eslint(代碼檢測、url-loader(圖片BASE64[小于10000kb的圖片])、babel-loader(ES6和JSX語法解析)、style-loader、css-loader(CSS代碼解析)、HtmlWebpackPlugin(產(chǎn)出HTML插件)等內(nèi)容
...

npm run eject 上面提到，腳手架為了"優(yōu)雅",隱藏了所有的webpack相關(guān)配置文件，如果我們想要基于原來的基礎(chǔ)再次增加一些自己的東西，首先就要找到這些隱藏文件并且進(jìn)行修改。

有的開發(fā)者直接到node_modules中去搜索webpack.config...等文件，然后進(jìn)行修改，修改后發(fā)現(xiàn)生效了，但是當(dāng)修改后，我們又安裝了一些其它項(xiàng)目模塊，重新編譯的時候，又回到了原有的配置信息(很頭疼的問題，總不能每一次安裝新模塊后，都重新改一次需要修改的配置吧...)

基于create-react-app創(chuàng)建完成項(xiàng)目后，會提供一個eject命令($ yarn eject)，基于這個命令，可以把隱藏的webpack文件展示出來，方便我們二次進(jìn)行配置。

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

執(zhí)行完成后，我們可以看到原有的結(jié)構(gòu)目錄發(fā)生了一些變化(新增兩個文件夾,package.json中的內(nèi)容也跟著發(fā)生改變)

結(jié)構(gòu)更改

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即可，當(dāng)然其它的大家也可以去修改(前提是研究明運(yùn)行的原理) 復(fù)制代碼

package.json中的變更

{"name": "my-app2","version": "0.1.0","private": true,"dependencies": { //=>在依賴項(xiàng)中把之前隱藏的（已經(jīng)安裝的）模塊都顯示出來了，其中很多都是配置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命令（這個命令是不可逆轉(zhuǎn)的，執(zhí)行一次生效后，就去掉這命令了）"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"} } 復(fù)制代碼

如果你熟練掌握webpack的配置操作，那么接下來就可以自己去擴(kuò)充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.最后生成項(xiàng)目

yo z-react-cli

結(jié)構(gòu)目錄

my-app|-- index.html //啟動頁(主頁)|-- build //構(gòu)建目錄，遵循發(fā)布系統(tǒng)規(guī)范| |-- index.html //靜態(tài)頁面| |-- static //資源文件發(fā)布到cdn,或發(fā)布到服務(wù)器 ||-- src //源碼目錄| |--component // 組件| | |-- common //公共組件| | |-- temp //父組件| |--Config //工具方法| |--Image //圖片資源| |--Redux //react-redux數(shù)據(jù)狀態(tài)管理| | |-- action.jsx //派發(fā)數(shù)據(jù)的action| | |-- reducer.jsx //用于處理action的reducer| | |-- store.jsx //數(shù)據(jù)管理器| |-- Router //路由| |-- Style //樣式| |-- template //編譯html模板| |-- App.jsx //js入口文件||-- webpack.config.hot //本地?zé)峋幾g|-- webpack.config.buildt //編譯發(fā)布測試環(huán)境|-- webpack.config.online //編譯發(fā)布線上環(huán)境|-- server.js|-- server_hot.js //本地服務(wù)器啟動文件|-- .babelrc //ES6語言解析設(shè)置|-- package.json //項(xiàng)目依賴項(xiàng)|-- ... 復(fù)制代碼

可執(zhí)行命令

安裝依賴

npm install

在本地主機(jī)(8088端口)上提供熱重載:即輸入http://localhost:8088可訪問正在開發(fā)的項(xiàng)目

npm run hot

#項(xiàng)目整體編譯部署，用于測試環(huán)境 npm run buildt

#項(xiàng)目整體編譯部署，用于線上環(huán)境 npm run online

功能特色

可以解析JSX語法可以解析ES6語法新特性支持LESS、SCSS預(yù)處理器編譯完成自動打開瀏覽器單獨(dú)分離CSS樣式文件支持文件MD5戳，解決文件緩存問題支持圖片，圖標(biāo)字體等資源的編譯支持瀏覽器源碼調(diào)試實(shí)現(xiàn)組件級熱更新實(shí)現(xiàn)代碼的熱替換，瀏覽器實(shí)時刷新查看效果區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境分離業(yè)務(wù)功能代碼和公共依賴代碼 ...

package.json文件部分預(yù)覽

{"name": "my-app", //=>項(xiàng)目名稱"version": "1.0.0", //=>項(xiàng)目版本"description": "...", //=>項(xiàng)目描述"main": "index.js", //=>項(xiàng)目入口文件"scripts": { //=>可執(zhí)行的命令腳本"dev": "node server.js", //=>啟動服務(wù)"hot": "node server_hot.js", //=>項(xiàng)目本地預(yù)覽"buildt": "webpack --config webpack.config.buildt.js --progress --colors --watch -p", //=>項(xiàng)目編譯：用于測試"online": "webpack --config webpack.config.online.js --progress --colors --watch -p" //=>項(xiàng)目編譯：用于線上},..."dependencies": { //=>生產(chǎn)依賴模塊"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": { //=>開發(fā)依賴模塊"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"} } 復(fù)制代碼

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

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的React入门---react脚手架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。