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

我的博客地址 正式地址 测试地址 前端源码 后端源码 文章目录 项目及其技术栈介绍 前端: 项目初始化 前端: 使用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中使用如下代码定义类属性 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

本文章由javascript技术分享原创和收集