…
module.exports = override(
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: {
‘@primary-color’: ‘#1890ff’,
},
}
}),
)
- 别名配置(
typescript
项目这里有坑)
// config-overrides.js
const path = require(‘path’)
…
module.exports = override(
addWebpackAlias({
‘@’: path.resolve(__dirname, ‘src’),
}),
)
- 去除注释、多进程打包压缩
// config-overrides.js
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)
const HardSourceWebpackPlugin = require(‘hard-source-webpack-plugin’)
…
module.exports = override(/* … */, config => {
config.plugins = […config.plugins, {
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
compress: {
drop_debugger: true,
drop_console: true,
},
},
}),
new HardSourceWebpackPlugin()
}]
return config
})
- 解决埋下的两个坑
- 修改打包出的文件夹名为
dist
// 修改打包路径除了output,这里也要修改
const paths = require(‘react-scripts/config/paths’)
paths.appBuild = path.join(path.dirname(paths.appBuild), ‘dist’)
module.exports = override(/* … */, config => {
config.output.path = path.resolve(__dirname, ‘dist’)
return config
})
-
解决
typescript
别名配置 -
- 查阅相关资料,需要在
tsconfig.json
中添加一项配置
- 查阅相关资料,需要在
{
…
“extends”: “./paths.json”
}
- 新建文件
paths.json
{
“compilerOptions”: {
“baseUrl”: “src”,
“paths”: {
“@/“: [””]
}
}
}
- 配置装饰器写法
{
“compilerOptions”: {
“experimentalDecorators”: true,
…
}
}
- 配置开发代理
- 在
src
目录新建setupProxy.js
// src/setupProxy.js
const proxy = require(‘http-proxy-middleware’).createProxyMiddleware
module.exports = function(app) {
// app 为 Express 实例,此处可以写 Mock 数据
app.use(
proxy(‘/api’,
{
“target”: “https://qpj-test.fapiaoer.cn”,
“changeOrigin”: true,
“secure”: false,
// “pathRewrite”: {
// “^/api”: “”
// }
})
)
}
- 加入
polyfill
和antd
组件国际化处理
// src/index.tsx
import React from ‘react’
import ReactDOM from ‘react-dom’
// 注入 store
import { Provider } from ‘react-redux’
import store from ‘@/store/store’
import { ConfigProvider, Empty } from ‘antd’
import App from ‘./App’
import zhCN from ‘antd/es/locale/zh_CN’
import ‘moment/locale/zh-cn’
// polyfill
import ‘core-js/stable’
import ‘regenerator-runtime/runtime’
ReactDOM.render(
,
document.getElementById(‘root’)
)
- CSS Modules
create-react-app
自带支持以xxx.module.(c|le|sa)ss
的样式表文件,使用上typescript
项目中要注意:
const styles = require(‘./index.module.less’)
retrun (
columns={columns}
className={${styles['border-setting']}
}
dataSource={props.store.check.items}
rowKey={record => record.id}
pagination={false}
/>
)
// index.module.less
.container {
padding: 24px;
background-color: #fff;
height: 100%;
overflow: auto;
.border-setting {
tr {
td:nth-child(3) {
border-left: 1px solid #F0F0F0;
border-right: 1px solid #F0F0F0;
}
}
td {
text-align: left !important;
}
}
:global { // 这个标识之后,其子代元素可以不需要使用 styles['type-check-box']
的方式,直接写 className
.type-check-box {
.ant-checkbox-wrapper + .ant-checkbox-wrapper{
margin-left: 0;
}
}
}
}
- 【新】配置
React jsx
指令式属性r-if
、r-for
、r-model
、r-show
,提升开发效率:
- 安装依赖
$ yarn add babel-react-rif babel-react-rfor babel-react-rmodel babel-react-rshow -D
- 配置
.babelrc
:
// .babelrc
{
…,
“plugins”: [
“babel-react-rif”,
“babel-react-rfor”,
“babel-react-rmodel”,
“babel-react-rshow”,
]
}
-
使用示例:
-
r-if
180}>best
other
r-for
{/* eslint-disable-next-line no-undef */}
内容 {item + ‘-’ + index}
r-model
r-show
四、项目配置二(优化配置)
- 实现组件懒加载
react-loadable
import Loadable from ‘react-loadable’
const Loading = (props: any) => {
if (props.error) {
console.error(props.error)
return
} else if (props.timedOut) {
return
} else if (props.pastDelay) {
return
} else {
return null
}
}
const loadable = (path: any) => {
return Loadable({
loader: () => import(@/pages${path}
),
loading: Loading,
delay: 200,
timeout: 10000,
})
}
const Home = loadable(‘/homePage/Home’)
- 处理
axios
拦截响应
const service = axios.create({
baseURL: ‘/’,
timeout: 15000,
})
service.interceptors.request.use(function (config) {
return config
})
service.interceptors.response.use(function (config) {
return config
})
- 处理
React router
的嵌套配置
我们知道
React
中不支持类似Vue Router
路由配置方式,React
中一切皆组件,路由也是组件,需要用到路由要临时加上路由组件,写起来就很繁琐,但我们可以自己实现路由配置表方式。
// router/router.config.ts
const routes = [
{
path: ‘/home’,
component: loadable(‘components/Index’),
exact: true,
},
{
path: ‘/new’,
component: loadable(‘components/New’),
redirect: ‘/new/list’,
// exact: true,
routes: [
{
path: ‘/new/list’,
component: loadable(‘components/NewList’),
exact: true,
},
{
path: ‘/new/content’,
component: loadable(‘components/NewContent’),
exact: true,
},
],
},
]
export default routes
// router/router.ts
import React from ‘react’
import { Switch, BrowserRouter as Router, Route } from ‘react-router-dom’
import routes from ‘./index’
function mapRoutes(routes: any[], store: object): any {
return routes.map((item: any, index: number) => {
return (
<Route exact={item.exact || false} path={item.path} key={index} render={props => {
const NewComp = item.component
Object.assign(props, {
redirect: item.redirect || null,
permission: item.permission || [],
…store
})
if (item.routes) {
return <NewComp {…props}>{ mapRoutes(item.routes, store) }
} else {
return <NewComp {…props} />
}
}} />
)
})
}
const Routes = (props: any) => {
return (
{ mapRoutes(routes, props.store) }
<Route component={() => (
)
}
export default Routes
子路由承载页面需要加上如下代码:
import { Redirect, Route, Switch } from ‘react-router-dom’
{props.children}
<Route component={() => (
{props.redirect && }
- 处理
React store
// store/store.ts
import { createStore, applyMiddleware } from ‘redux’
import thunk from ‘redux-thunk’
import logger from ‘redux-logger’
import reducers from ‘./reducer’
const store = process.env.NODE_ENV === ‘development’
? createStore(reducers, applyMiddleware(thunk, logger))
: createStore(reducers, applyMiddleware(thunk))
export default store
为了方便使用,避免每个组件都需要
connect
,这边实现了redux store
的全局注入,但是如果项目庞大的话就会损耗些性能。
// App.tsx
import { dispatchActions } from ‘@/store/reducer’
export default connect((state: any) => ({ store: state }), dispatchActions)(App)
五、总结
自此项目搭建就全部完成了,剩下的就是业务代码了。相信你可以得到如下收获:
① 项目构建在宏观上有个极大的能力提升;
② 项目整体功能了解清晰;
③ 排查问题不慌乱;
④ 封装能力有加强;
⑤ 业务功能很清楚。
六、题外话
基于
create-react-app
创建的React
项目,本人实现了一个脚手架,以上配置默认已经全部加入实现,欢迎Github
试用并star
。链接:https://github.com/zhuyuanmin/zym-cli
关于本文
作者:前端小猿_zym
============
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/7f2ce567e30d610ba3ad27b1585b35d4.jpeg)
最后
分享一套阿里大牛整理的前端资料给大家,点击前端校招面试题精编解析大全即可免费下载
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。
基于
create-react-app
创建的React
项目,本人实现了一个脚手架,以上配置默认已经全部加入实现,欢迎Github
试用并star
。链接:https://github.com/zhuyuanmin/zym-cli
关于本文
作者:前端小猿_zym
============
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-7l8IG0qw-1712301645097)]
[外链图片转存中…(img-Fr4J0sOD-1712301645098)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-HCBAxabf-1712301645098)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/7f2ce567e30d610ba3ad27b1585b35d4.jpeg)
最后
分享一套阿里大牛整理的前端资料给大家,点击前端校招面试题精编解析大全即可免费下载
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。