從零開始react項目構(gòu)建

react項目構(gòu)建使用腳手架:create-react-app

配置:antd UI框架配置和less配置


一炕横、命令行依次輸入如下的命令

npm install -g create-react-app

create-react-app my-app

cd my-app

npm start

創(chuàng)建完成后文件的結(jié)構(gòu)如下:

二、public文件

public/favicon.ico? ? ? ? ?

html的ico 圖標(biāo)姿锭,在index.html中會有引入伯铣;

可以使用圖片,通過線上ico圖標(biāo)制作出腔寡,.ico圖標(biāo)來替換react默認(rèn)的


public/manifest.json? ? ?

app配置文件,設(shè)置icons忿磅,首頁路徑等凭语;


三、src文件夾

src/index.js 是入口文件

src/App.js是最大的組件App

src/registerserviceworker.js?

用來做資源離線的緩存似扔,

注意:registerServiceWorker注冊的service worker 只在生產(chǎn)環(huán)境(正式環(huán)境)中生效搓谆。


四豪墅、四個命令

① npm start 啟動項目,在 http://localhost:3000查看項目運行

② npm run build 項目打包斩萌,生成一個build文件夾屏轰,如下

③ npm run eject 彈出配置文件--不可逆操作--用于修改默認(rèn)的配置

當(dāng)對react-script配置好的構(gòu)建工具和配置項不滿意時使用這個命令,他將命令運行的腳本js分離出來亭枷,輸入命令時指向的是這些腳本搀崭,你可以根據(jù)情況調(diào)整這些代碼。

④ npm test --測試

五升敲、antd-mobile/antd 配置

1.安裝antd/antd-mobile

npm install antd --save

//或者

npm install antd-mobile --save

2.引入?react-app-rewired?并修改 package.json 里的啟動配置:

npm install react-app-rewired --save-dev

/* package.json */

"scripts": {

????????-"start":"react-scripts start",

????????+"start":"react-app-rewired start",

????????-"build":"react-scripts build",

????????+"build":"react-app-rewired build",

????????-"test":"react-scripts test --env=jsdom",

????????+"test":"react-app-rewired test --env=jsdom",

}

3.然后在項目根目錄創(chuàng)建一個 config-overrides.js 用于修改默認(rèn)配置轰传。

module.exports =function override(config, env){

????????return config;

};

4.安裝 babel-plugin-import

?babel-plugin-import?是一個用于按需加載組件代碼和樣式的 babel 插件(原理),現(xiàn)在我們嘗試安裝它并修改 config-overrides.js 文件港庄。

npm install babel-plugin-import --save-dev

+ const { injectBabelPlugin } =require('react-app-rewired');

module.exports =function override(config, env){

????????+config= injectBabelPlugin(['import', { libraryName:'antd-mobile', style:'css'}],config);

????????return config;

? };

5.組件內(nèi)引用

-import Button from 'antd-mobile/lib/button';

+import { Button } from 'antd-mobile';

六恕曲、less 配置

1.安裝所需less依賴

npm install less-loader less --save-dev

2.安裝react-app-rewire-less

npm install --save-dev react-app-rewire-less

3.根目錄下找到剛才的config-overrides.js 繼續(xù)修改配置

/* config-overrides.js */

const { injectBabelPlugin } = require('react-app-rewired');

+ const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {

????????config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);

????????+ config = rewireLess.withLoaderOptions({modifyVars: { "@primary-color": "#1DA57A" }})(config, env);

????????return config;

};



如果你想要彈出內(nèi)建配置,再配置antd和less把还,你可以繼續(xù)看接下來的部分:

七茸俭、antd-mobile/antd 配置(彈出內(nèi)建配置)

1、彈出配置文件

npm run eject

彈出的配置文件如下调鬓,彈出了config文件夾和scripts文件夾

config文件夾----中的配置文件可供修改

scripts文件夾----作為命令對應(yīng)要運行的文件


彈出后注意修改package.json 里啟動命令的配置

"scripts": {

????????"start": "node scripts/start.js",

????????"build": "node scripts/build.js",

????????"test": "node scripts/test.js --env=jsdom"

},

2.安裝antd/antd-mobile

npm install antd --save

//或者

npm install antd-mobile --save

3.安裝 babel-plugin-import

npm install babel-plugin-import --save-dev

4.修改package.json文件

"babel": {

????????"presets": [ "react-app" ],

? ? ? ? ?"plugins": [

? ? ? ? ? ? ? ? ?[ "import",{"libraryName": "antd", "style": "css"}]

? ? ? ? ? ],

},

或者根目錄下新建一個.babelrc腾窝,

寫入如下的代碼腺晾,這個文件將把package.json的babel的配置對象完全覆蓋掉

{ "presets": [ "react-app" ], "plugins": [

????????[ "import", { "libraryName": "antd", "style": “css”} ]

]}

八辜贵、less 配置(彈出內(nèi)建配置)

1、安裝所需less依賴

npm install less-loader less --save-dev

2托慨、修改配置文件

找到根目錄下的config文件夾下的webpack.config.dev.js?和?webpack.config-prod.js

① exclude的數(shù)組中/\.css$/?改為?/\.(css|less)$/

?② /\.(css|less)$/下的use數(shù)組中增加less-loader

use: [

????????????{

????????????????loader:require.resolve('css-loader'),

????????????????options: {importLoaders:1, minimize:true,sourceMap: shouldUseSourceMap,},

????????????},

????????????{

????????????????loader:require.resolve('postcss-loader'),

????????????????options: {

????????????????????????ident:'postcss',

????????????????????????plugins:()=>[

????????????????????????????require('postcss-flexbugs-fixes'),

? ? ? ? ? ? ? ? ? ? ? ? ????autoprefixer({

????????????????????????????????????browsers: ['>1%','last 4 versions','Firefox ESR','not ie < 9',],

????????????????????????????????????flexbox:'no-2009',

????????????????????????????}),

????????????????????????],

????????????????},

????????????},

+? ? ? ? ?{

+? ? ? ? ? ? ? loader:require.resolve('less-loader')// compiles Less to CSS

+? ? ? ? ? }

]

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末厚棵,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子婆硬,更是在濱河造成了極大的恐慌,老刑警劉巖向楼,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谐区,死亡現(xiàn)場離奇詭異,居然都是意外死亡宋列,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門灭返,熙熙樓的掌柜王于貴愁眉苦臉地迎上來坤邪,“玉大人,你說我怎么就攤上這事罩扇。” “怎么了喂饥?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵员帮,是天一觀的道長。 經(jīng)常有香客問我捞高,道長渣锦,這世上最難降的妖魔是什么氢哮? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮冗尤,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘皆看。我一直安慰自己,他們只是感情好腰吟,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布徙瓶。 她就那樣靜靜地躺著,像睡著了一般倍啥。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天氮趋,我揣著相機與錄音,去河邊找鬼剩胁。 笑死祥国,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的舌稀。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼觉至,長吁一口氣:“原來是場噩夢啊……” “哼睡腿!你這毒婦竟也來了语御?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤纤控,失蹤者是張志新(化名)和其女友劉穎碉纺,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體惜辑,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年碎节,在試婚紗的時候發(fā)現(xiàn)自己被綠了抵卫。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡殖氏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出雅采,到底是詐尸還是另有隱情慨亲,我是刑警寧澤婚瓜,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布巴刻,位于F島的核電站,受9級特大地震影響胡陪,放射性物質(zhì)發(fā)生泄漏碍舍。R本人自食惡果不足惜柠座,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一愚隧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧狂塘,春花似錦、人聲如沸荞胡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至露筒,卻和暖如春敌卓,著一層夾襖步出監(jiān)牢的瞬間慎式,已是汗流浹背趟径。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留掌眠,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓蓝丙,卻偏偏與公主長得像香嗓,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子靠娱,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容