从零搭建项目(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-loaderawesome-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

推荐阅读更多精彩内容