前言
本篇文章主要讲解如何从一个空目录开始,建立起一个基于webpack + react + typescript的标准化前端应用。
- 技术栈: webpack5 + React18 + TS
- 工程化: eslint + prettier + husky + git hooks
- 支持图片、less、sass、fonts、数据资源(JSON、csv、tsv等)、Antd按需加载以及主题
- 支持热更新、资源压缩、代码分离(动态导入、懒加载等)、缓存、devServer
背景
在项目开发中,我们可以使用create-react-app或者飞冰等脚手架工具,那么,为什么我们要自己来搭建一个标准化项目?
原因
- 当我们使用优秀的脚手架工具开发项目时,当然会提升很多便利,他们的功能更全面、性能更强大,但是在这些值得学习的榜样面前,我们需要从零开始,动手去实现每一个细节和功能,看的再多都不如自己动手实现一个demo更有效果。并且动手实践也可以帮助我们理解项目打包和编译的原理,进而提升自己的技术熟练度,扩展我们的知识面。Webpack 实现工程化方方面面的功能,自然不是 all in one code实现的。从 Webpack 的设计理念和实现原理中,我们能接触到工程化方面的知识:架构扩展、插件化、缓存机制。学习Webpack也代表着学习前端的发展趋势:例如在webpack的竟对Vite上,我们可以学到bundleless的理念,跳过了传统的打包这个概念,并且其他先进理念都是我们需要去学习的地方。
- 开发中,我们发现使用def、aone等生成一个成熟的前端项目模版,不难会发现,项目中的babel、weback、prettier、loader等配置文件缺失,而且难以修改现成的脚手架配置,可扩展能力较弱。导致在性能优化方面能做的工作有限,使得开发受到限制。
项目结构
目录
├── dist // 默认的 build 输出目录
├── .husky // pre-commit hook
├── webpack.config.js // 全局配置文件及webpack配置文件
├── test // 测试目录
└── src // 源码目录
├── assets // 公共的文件(如image、css、font等)
├── components // 项目组件
├── constants // 常量/接口地址等
├── routes // 路由
├── utils // 工具库
├── pages // 页面模块
├── Home // Home模块,建议组件统一大写开头
├── ...
├── App.tsx // react顶层文件
├── typing // ts类型文件
├── .editorconfig // IDE格式规范
├── .eslintignore // eslint忽略
├── .eslintrc // eslint配置文件
├── .gitignore // git忽略
├── .prettierrc // prettierc配置文件
├── .babelrc // babel配置文件
├── LICENSE.md // LICENSE
├── package.json // package
├── README.md // README
├── tsconfig.json // typescript配置文件
依赖
"dependencies": {
"antd": "^4.22.4", // 懂得都懂
"react": "^18.2.0", // 懂得都懂
"react-dom": "^18.2.0" // 懂得都懂
},
"devDependencies": {
// babel全家桶
"@babel/core": "^7.18.10",
"@babel/plugin-proposal-class-properties": "^7.18.6", // React class支持
"@babel/plugin-transform-runtime": "^7.18.10", // 抽离提取 Babel的注入代码,防止重复加载,减小体积
"@babel/preset-env": "^7.18.10", // 提供的预设,允许我们使用最新的JavaScript
"@babel/preset-react": "^7.18.6", // react支持
// ts类型检查
"@types/node": "^18.6.4",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
// @types 开头的是对应包的 TypeScript 类型声明
"@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
// webpack loader:解析对应文件
"csv-loader": "^3.0.5",
"sass-loader": "^13.0.2",
"xml-loader": "^1.2.1",
"ts-loader": "^9.3.1",
"less-loader": "^11.0.0",
// eslint全家桶
"eslint": "^8.21.0",
"eslint-config-ali": "^14.0.1", // ali前端规约
"eslint-config-prettier": "^8.5.0", // 关闭所有不必要或可能与[Prettier]冲突的规则
"eslint-import-resolver-typescript": "^3.4.0", // 添加 ts 语法支持 eslint-plugin-import
"eslint-plugin-import": "^2.26.0", // ES6+ import/export 语法支持
"eslint-plugin-prettier": "^4.2.1", // prettier语法支持
"eslint-plugin-react": "^7.30.1", // react语法支持
"eslint-plugin-react-hooks": "^4.6.0", // hooks语法支持
"eslint-webpack-plugin": "^3.2.0",
// webpack plugin
"fork-ts-checker-webpack-plugin": "^7.2.13", // 避免webpack中检测ts类型
"html-webpack-plugin": "^5.5.0", // 简化HTML文件的创建 ,配合webpack包含hash的bundle使用
"mini-css-extract-plugin": "^2.6.1", // css拆分
"optimize-css-assets-webpack-plugin": "^6.0.1", // css压缩
"terser-webpack-plugin": "^5.3.3", // 使用 terser 压缩 js (terser 是一个管理和压缩 ES6+ 的工具)
"webpack-bundle-analyzer": "^4.5.0", // webpack打包体积可视化分析
"webpack-cli": "^4.10.0", // 提供脚手架命令
"webpack": "^5.74.0", // webpack引擎
"webpack-dev-server": "^4.9.3", // 开发环境的live server
// 工具
"husky": "^8.0.1", // 自动配置 Git hooks 钩子
"less": "^4.1.3", // css类型
"sass": "^1.54.3", // css类型
"typescript": "^4.7.4", // ts
"lint-staged": "^13.0.3", // 对暂存的git文件运行linter
// prettier 格式化
"prettier": "^2.7.1",
"pretty-quick": "^3.1.3", // 在更改的文件上运行 prettier
}
实现过程
项目初始化
首先从一个空目录开始,对项目初始化:
mkdir demo
cd demo
git init
npm init
React和Babel引入
对于一个React项目,我们首先要安装React,写一个Hello World!
安装我们主要的项目依赖:
tnpm i -S react react-dom
由于我们的浏览器不支持最新的ECMAScript语法,所以我们需要Babel来转义为ES5或者ES6。
安装我们的Babel来提高兼容性:
tnpm i -D @babel/core babel-preset-env babel-preset-react @babel/plugin-proposal-class-properties
- @babel/core: babel转码的核心引擎
- babel-preset-env: 添加对ES5、ES6的支持
- babel-preset-react: 添加对JSX的支持
- @babel/plugin-proposal-class-properties: 对React中class的支持
Webpack引入
tnpm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
- webpack: weback插件的核心依赖
- webpack-cli: 为插件提供命令行工具
- webpack-dev-server: 帮助启动live server
- html-webpack-plugin: 帮助创建HTML模版
Babel配置
.babelrc中添加基本配置:
{
"presets": ["@babel/react", "@babel/env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
Babel Plugin
Babel是代码转换器,借助Babel,我们可以使用最流行的js写法,而plugin就是实现Babel功能的核心。