create-react-app 是 React 官方爲咱們提供的一個單頁應用腳手架，基於 webpack 配置了相關功能，babel、 圖片處理、熱加載、css 模塊化、css 預處理器轉換、代碼分隔、生產構建、測試等。文檔在這 create-react-app。強烈建議去看一看。css
建議使用 npx create-react-app myapp 本地安裝，而不是全局安裝，以便更好的管理項目。html
前端部分
在必定程度上來講，官方提供的腳手架已經接近完美了，接下來，擴展讓它更完美。前端
腳手架默認把 webpack 等繁瑣複雜的配置給隱藏起來了，目的是讓開發者專一於項目。但也提供了一個命令npm run eject來暴露相關配置，但這個行爲是不可逆的。java
咱們要作的是錦上添花，在不暴露相關配置的狀況下進行。node
修改默認啓動端口號：3000
在實際中，好比有多個應用，那麼端口號衝突是很常見的，那麼如何修改默認端口號呢？react
- 安裝
npm install --save-dev cross-env，保證兼容性，由於 window 不支持直接PORT=5000 node scripts/start.js - package.json 文件中啓動命令前加入
cross-env PORT=設置的端口號
"scripts": {
"start": "cross-env PORT=5000 node scripts/start.js"
},
安裝庫
- axios
- react-router-dom
- redux、react-redux
- antd
- ...
修改打包後的資源路徑爲相對路徑
在實際應用中，打包後的資源須要使用相對路徑，只需在 package.json 中進行以下配置：webpack
{
"scripts": {
...
},
"homepage": "."
}
擴展 webpack 配置
使用 react-app-rewired，安裝這個工具後，在項目根目錄中新建文件 config-overrides.js 文件。此時咱們即可以在其中進行各類 webpack 的配置了~ios
可是！react-app-rewired2.x 之後，再也不支持 injectBabelPlugin 的方式，須要安裝 customize-cra。git
具體的，ant design 官方文檔已經給出了最新的解決方案。請前往詳覽。https://ant.design/docs/react/use-with-create-react-app-cn
這種方式就是咱們推薦的方式。由於無需生成更多額外的文件，同時配置又趨於更簡單可控的方式。
具體的操做步驟：
首先，安裝 react-app-rewired：
npm install react-app-rewired --save-dev
而後修改package.json文件以下：
/* 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",
+ "test": "react-app-rewired test",
}
接着，安裝 customize-cra：
npm install customize-cra --save-dev
而後在根目錄下添加 config-overrides.js文件，並進行配置，配置可參考customize-cra 文檔：
- react 項目中咱們最經常使用的組件庫 antd，咱們須要配置按需加載：
使用 babel-plugin-import，它是一個用於按需加載組件代碼和樣式的 babel 插件。
npm install babel-plugin-import --save-dev
配置 webpack：
/* config-overrides.js */
+ const { override, fixBabelImports } = require('customize-cra');
+ module.exports = override(
+ fixBabelImports('import', {
+ libraryName: 'antd',
+ libraryDirectory: 'es',
+ style: 'css',
+ }),
+ );
- antd 自定義主題
按照配置主題的要求，自定義主題須要用到 less 變量覆蓋功能。
安裝less和less-loader
npm install less less-loader --save-dev
配置 webpack：
/* config-overrides.js */
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
- style: 'css',
+ style: true,
}),
+ addLessLoader({
+ javascriptEnabled: true,
+ modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);
這裏利用了less-loader的modifyVars來進行主題配置。固然這裏的modifyVars的值也能夠是一個theme文件。
- 打包後咱們會發現靜態文件夾中會有不少的 css 和 js 的 map 文件，那麼該怎麼關閉sourcemap呢？
/* config-overrides.js */
const { override, fixBabelImports, addLessLoader } = require("customize-cra");
+ process.env.GENERATE_SOURCEMAP = "false";
module.exports = override(
fixBabelImports("import", {
libraryName: 'antd',
libraryDirectory: "es",
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
})
);
- 其餘配置
const { override, fixBabelImports, addLessLoader, addWebpackAlias, useBabelRc, addDecoratorsLegacy } = require('customize-cra');
const path = require('path')
// 關閉 sourcemap
process.env.GENERATE_SOURCEMAP = "false";
module.exports = override(
// 按需加載
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
// style: 'css' // 按需加載
style: true // antd 自定義主題 less
}),
// antd 自定義主題 less 變量覆蓋全局 依賴 less、less-loader
addLessLoader({
javascriptEnabled: true,
modifyVars: {
'@primary-color': '#814a96'
}
}),
// 配置別名
addWebpackAlias({
'@': path.resolve(__dirname, 'src'),
'components': path.resolve(__dirname, 'src/components'),
'pages': path.resolve(__dirname, 'src/pages')
}),
// 容許使用.babelrc文件進行Babel配置。
useBabelRc(),
// 裝飾器 依賴 @babel/plugin-proposal-decorators
addDecoratorsLegacy()
)
npm install @babel/plugin-proposal-decorators --save-dev
proxy 代理
前端跨域處理。
在 src 目錄下新建文件 setupProxy.js
安裝 http-proxy-middleware：
npm install http-proxy-middleware --save-dev
配置 setupProxy.js
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
proxy('/api', {
target: 'http://xx.xx.xx.xx:8000/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
})
)
}
後端部分
在實際工做中，需求肯定後，先後端每每是同步開發的，對於接口的提供，後端沒那麼及時，但此時前端怎麼在沒有後端接口的狀況下，還能正常開發呢，保證功能的正常。
答案是：mock 數據。
那麼如何 mock 數據呢，方式不少，好比利用 easymock 在線模擬接口數據，固然最好的方式是本身搭建 node 服務，模擬接口及數據，更靈活，也能提高技術，瞭解後端的一些知識，更好的溝通與交流。
在 src 目錄下新建文件夾 server-node，而後在下面再建一個 index.js 做爲入口文件。
安裝庫
- koa
- koa-router
- koa-body
- ...
koa 相關知識，請自行學習。
重啓，熱加載
和前端同樣，改了文件，會自動重啓。
安裝 nodemon：
npm install nodemon --save-dev
配置 package.json
scripts: {
server: 'nodemon server-node/index.js'
}
大概就這些了，有更好的建議或配置的，也請多多指教~~