我的博客地址
正式地址
测试地址
前端源码
后端源码
文章目录
- 项目及其技术栈介绍
- 前端: 项目初始化
- 前端: 使用Sass和Antd
- 前端: 开发体验优化
- 前端: 搭建路由和状态管理
- 前端: 支持Axios
- 前端: 打包与环境变量设置
- 前端: 团队代码规范
- 后端: 项目初始化和使用Koa相关
- 后端: 使用TypeORM和MySQL
- 部署: 使用nginx部署前端项目
- 部署: 后端部署
- 部署: 使用jenkins自动化部署
前言
该篇博客介绍前端项目的初始化,将会使用到TypeScript,WebPack,React和React Router,目的是使得项目能够跑起来。
安装依赖
TypeScript
npm i -D typescript
WebPack
注意WebPack4.0之后需要安装webpack-cli
npm install-D webpack webpack-cli webpack-dev-server
React
使用ts进行编写的话需要安装相应的types包
npm install -S react react-dom react-router-dom
npm i -D @types/react-router-dom @types/react-dom @types/react
-
Babel
ts的编译没有使用ts-loader
和awesome-typescript-loader
,原因是用这两个的话在后续的转换js一些语法的时候还是需要安装一些Babel插件,并且Babel比这两个的编译速度还快,所以这里直接使用Babel。
npm i -D @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-syntax-dynamic-import @babel/preset-react @babel/preset-typescript babel-loader babel-plugin-import
-
babel/core
: babel核心 -
babel/plugin-proposal-class-properties
支持在class
中使用如下代码定义类属性
-
babel/plugin-proposal-decorators
: 支持使用装饰器 -
babel/plugin-syntax-dynamic-import
: 异步加载import(xxx)
-
babel/preset-react babel/preset-typescript
: 编译react和ts代码变为js代码 -
babel-plugin-import
: 后续antd的按需加载需要使用
-
html-webpack-plugin
处理html模板,把编译后的相关script插入到html模板中
npm i -D html-webpack-plugin
搭建
-
首先我们编写webpack的配置文件,在项目根目录新建
build
文件夹作为webpack配置存放位置,然后在下面新建webpack.config.js
-
在
webpack.config.js
中编写项目入口和编译后的出口
注意这个地方上面的@type {import('webpack').Configuration}
,这个配置可以使得你在编写webpack的时候有配置项提醒:
-
为了方便路径处理,我们在
build
文件夹下新建一个utils.js
文件,内容如下:
然后在webpack.config.js
中因为resolve
方法,并修改对应的路径:
-
然后在
build
中再新建tpl
文件夹,里面存放html模板index.html
-
在
build
中新建文件夹rules
,用来存放各种rule,我们先新建一个jsRules.js
文件,并在其中到处一个数组:
然后在webpack.config.js
中导入这个文件中的数组,并在module
配置中进行引用:
-
做完后,从上面webpack的配置可以看出,入口将会在
src
文件夹中,所以我们在根目录中新建src
文件夹,然后在里面新建index.tsx
,并编写入口文件:
-
这时候我们开始使用到ts进行代码的编写,所以需要使用
tsc --init
初始化一个tsconfig.json
文件出来:
-
我们会发现之前的
index.tsx
中报了一个错误,原因是未在tsconfig
中开启jsx
配置:
只需要在tsconfig
中将jsx
选项设置为react
即可解决:
-
现在回到
build/rules/jsRules.js
文件中,编写babel对.tsx
文件编译的配置
-
在
build
下新建plugins.js
文件用以存放webpack的插件,引入html-webpack-plugin
并编写相关配置
在webpack.config.json
中导入并使用:
- 最后在
package.json
中添加项目启动命令
"dev": "webpack-dev-server --config build/webpack.config.js --mode development"
运行npm run dev
,项目就成功跑起来了: