写给前端新人：从 0到1 搭建一个前端项目，都需要做什么？

1. 添加 .gitignore

$ echo -e " yarn.lock \n package-lock.json \n /dist \n .idea" >> .gitignore

1. 添加 eslint 代码及提交评论校验

$ yarn add husky lint-staged @commitlint/cli @commitlint/config-conventional -D

$ npx husky install

$ npx husky add .husky/pre-commit “npx lint-staged”

$ npx husky add .husky/prepare-commit-msg “npx commitlint -e”

• 项目根目录新建 commitlint.config.js

// commitlint.config.js

module.exports = {

extends: [‘@commitlint/config-conventional’],

rules: {

‘type-enum’: [

2,

‘always’,

[‘feat’, ‘fix’, ‘docs’, ‘style’, ‘refactor’, ‘test’, ‘chore’, ‘revert’],

],

‘subject-full-stop’: [0, ‘never’],

‘subject-case’: [0, ‘never’],

},

}

• vscode 扩展中搜索 ESLint 并安装，项目根目录新建 .eslintrc.js，内容可参考文章配置：zhuanlan.zhihu.com/p/84329603 看第五点

• Commit message 格式说明

<type>: <subject>

• type 值枚举如下：

• • feat: 添加新特性

• fix: 修复 bug

• docs: 仅仅修改了文档

• style: 仅仅修改了空格、格式缩进、都好等等，不改变代码逻辑

• refactor: 代码重构，没有加新功能或者修复 bug

• perf: 增加代码进行性能测试

• test: 增加测试用例

• chore: 改变构建流程、或者增加依赖库、工具等

• revert: 当前 commit 用于撤销以前的 commit

• subject 是 commit 目的的简短描述，不超过 50 个字符，且结尾不加句号（.）

• package.json 新加入如下配置：

{

…,

“lint-staged”: {

“src/**/*.{jsx,txs,ts,js,json,css,md}”: [

“eslint --quiet”

]

},

}

• 可执行 npx eslint [filePath] \--fix 进行格式修复，无法修复的需手动解决

三、项目配置一（功能配置）

---

1. 安装项目常用依赖库

$ yarn add antd axios dayjs qs -S # UI 库 及工具库

$ yarn add react-router-dom redux react-redux redux-logger redux-thunk -S # 路由及状态管理

1. webpack 配置拓展很有必要

• 根目录新建 config-overrides.js，详细使用可访问：简书：React 之 config-overrides文件配置

• 安装

• $ yarn add react-app-rewired customize-cra -D

• 修改 package.json 中启动项

// package.json

“scripts”: {

“start”: “react-app-rewired start”,

“build”: “react-app-rewired build”,

}

• 使用

// config-overrides.js

const {

override, // 主函数

fixBabelImports, // 配置按需加载

addWebpackExternals, // 不做打包处理配置

addWebpackAlias, // 配置别名

addLessLoader // lessLoader 配置，可更改主题色等

} = require(‘customize-cra’)

module.exports = override(/* … */, config => config)

1. 配置按需加载

// config-overrides.js

…

module.exports = override(

fixBabelImports(‘import’, {

libraryName: ‘antd’,

libraryDirectory: ‘es’, // library 目录

style: true, // 自动打包相关的样式

}),

)

1. 更改主题色

// config-overrides.js

…

module.exports = override(

addLessLoader({

lessOptions: {

javascriptEnabled: true,

modifyVars: {

‘@primary-color’: ‘#1890ff’,

},

}

}),

)

1. 别名配置（typescript 项目这里有坑）

// config-overrides.js

const path = require(‘path’)

…

module.exports = override(

addWebpackAlias({

‘@’: path.resolve(__dirname, ‘src’),

}),

)

1. 去除注释、多进程打包压缩

// 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

})

1. 解决埋下的两个坑

• 修改打包出的文件夹名为 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”: {

“@/“: [””]

}

}

}

1. 配置装饰器写法

{

“compilerOptions”: {

“experimentalDecorators”: true,

…

}

}

1. 配置开发代理

• 在 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”: “”

// }

})

)

}

1. 加入 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’)

)

1. 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;

}

}

}

}

1. 【新】配置 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

内容

 # 注意：这是 `r-if` 的效果，不会渲染节点

四、项目配置二（优化配置）

---

1. 实现组件懒加载 react-loadable

import Loadable from ‘react-loadable’

const Loading = (props: any) => {

if (props.error) {

console.error(props.error)

return 

Error! Retry

} else if (props.timedOut) {

return 

Timeout! Retry

} else if (props.pastDelay) {

return 

Loading…

} else {

return null

}

}

const loadable = (path: any) => {

return Loadable({

loader: () => import(@/pages${path}),

loading: Loading,

delay: 200,

timeout: 10000,

})

}

const Home = loadable(‘/homePage/Home’)

1. 处理 axios 拦截响应

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
iv>

} else {

return null

}

}

const loadable = (path: any) => {

return Loadable({

loader: () => import(@/pages${path}),

loading: Loading,

delay: 200,

timeout: 10000,

})

}

const Home = loadable(‘/homePage/Home’)

1. 处理 axios 拦截响应

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-T2agQxtD-1715833791961)]

[外链图片转存中…(img-AD7PsOIL-1715833791961)]

[外链图片转存中…(img-ZIPsI83W-1715833791962)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！