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
+? ? ? ? ? }
]
