从零搭建项目(2) --- 前端: 项目初始化

我的博客地址

正式地址
测试地址
前端源码
后端源码

文章目录

1. 项目及其技术栈介绍
2. 前端: 项目初始化
3. 前端: 使用Sass和Antd
4. 前端: 开发体验优化
5. 前端: 搭建路由和状态管理
6. 前端: 支持Axios
7. 前端: 打包与环境变量设置
8. 前端: 团队代码规范
9. 后端: 项目初始化和使用Koa相关
10. 后端: 使用TypeORM和MySQL
11. 部署: 使用nginx部署前端项目
12. 部署: 后端部署
13. 部署: 使用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中使用如下代码定义类属性
    image.png
  • 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
  

  image.png

• 在webpack.config.js中编写项目入口和编译后的出口
  

  image.png
  注意这个地方上面的@type {import('webpack').Configuration}，这个配置可以使得你在编写webpack的时候有配置项提醒:
  image.png

• 为了方便路径处理，我们在build文件夹下新建一个utils.js文件，内容如下:
  

  image.png
  然后在webpack.config.js中因为resolve方法，并修改对应的路径:
  image.png

• 然后在build中再新建tpl文件夹，里面存放html模板index.html
  

  image.png

• 在build中新建文件夹rules，用来存放各种rule，我们先新建一个jsRules.js文件，并在其中到处一个数组:
  

  image.png
  然后在webpack.config.js中导入这个文件中的数组，并在module配置中进行引用:
  image.png

• 做完后，从上面webpack的配置可以看出，入口将会在src文件夹中，所以我们在根目录中新建src文件夹，然后在里面新建index.tsx，并编写入口文件:
  

  image.png

• 这时候我们开始使用到ts进行代码的编写，所以需要使用tsc --init初始化一个tsconfig.json文件出来:
  

  image.png

• 我们会发现之前的index.tsx中报了一个错误，原因是未在tsconfig中开启jsx配置:
  

  image.png
  只需要在tsconfig中将jsx选项设置为react即可解决:
  image.png

• 现在回到build/rules/jsRules.js文件中，编写babel对.tsx文件编译的配置
  

  image.png

• 在build下新建plugins.js文件用以存放webpack的插件，引入html-webpack-plugin并编写相关配置
  

  image.png
  在webpack.config.json中导入并使用:
  image.png

• 最后在package.json中添加项目启动命令
  "dev": "webpack-dev-server --config build/webpack.config.js --mode development"
  image.png
  运行npm run dev，项目就成功跑起来了:
  image.png