相关文章和阅读顺序
搭建Typescript+React项目模板(1) --- 项目初始化
搭建 Typescript+React 项目模板 (2) --- 提升开发体验
搭建 Typescript+React 项目模板 (3) --- 整理项目和杂项
搭建 Typescript+React 项目模板 (4) --- 项目打包
搭建 Typescript+React 项目模板 (5) --- 团队规范
文章已同步更新到掘金专栏(https://juejin.im/user/5a77c815f265da4e9518bebc/posts)
项目地址
目前集成
- react - 16.4.x
- react-router-dom - 4+
-
mobx - 5+
- 状态管理库
- typescript - 3.0.x
- webpack - 4.16.x
- ant design
- axios
-
react-loadable
- 异步组件加载
-
@svgr/webpack
- 使 svg 可以以组件的方式引入
-
typings-for-css-modules-loader
- 用于替代
css-loader的 css module 功能，并动态生成.scss的.d.ts文件
- 用于替代
- husky
- pre-commit
需求分析
因为模板是为以后项目开发所准备的前奏工作，所以在搭建之前我觉得首先需要先考虑以下几个方面:
- 开发体验
- 项目打包
- 团队规范
那么这一篇就先做个起手式，先搭建一个简单的可以跑起来的架子
起手安装
前置安装
首先需要全局安装typescript，这里默认大家都已经安装了node以及npm
npm install -g typescript首先新建文件夹并进入
mkdir ts-react && cd ts-react然后进行初始化，生成
package.json和tsconfig.json
npm init -y && tsc --init安装开发工具
这里包含有webpack4, webpack-cli, webpack-dev-server
npm install-D webpack webpack-cli webpack-dev-server安装react相关
因为需要整合ts，而react原本的包是不包含验证包的，所以这里也需要安装相关ts验证宝
npm install -S react react-dom
npm install -D @types/react @types/react-dom安装
ts-loader(或者awesome-typescript-loader)
这两款loader用于将ts代码编译成js代码，用法上差异较小，这里选择的是awesome-typescript-loader
npm install -D awesome-typescript-loader
这个时候基本的安装步骤就完成了，以后需要什么再陆续添加进去，现在开始创建项目
项目启动
- webpack配置
- 在项目根目录新建一个
build文件夹，然后在里面新建webpack.config.js文件:
mkdir build && cd build && touch webpack.config.js - 根目录下新建src文件夹，然后在src里新建
index.tsx文件作为项目入口:
mkdir src && cd src && touch index.tsx - 编写简单的webpack配置，只包含
entry和output:
image.png - 编写
awesome-typescript-loader配置项:
在webpack中的module是专门用来决定如何处理各种模块的配置项，例如本例中的typescript，这里主要用的配置项就是module.rules，而当前只需要简单配置解析.tsx文件类型即可
image.png - 在
src/index.tsx中写入口文件
image.png
但是这时候你会发现有一个错误没有处理
image.png
这是因为在tsconfig里面没有指定JSX的版本，这时候在tsconfig的compilerOptions中添加"jsx": "react"配置项即可消除错误
此外还需要注意一点，以后需要import xxx from 'xxx'这样的文件的话需要在webpack中的resolve项中配置extensions，这样以后引入文件就不需要带扩展名
image.png
- 在项目根目录新建一个
-
添加页面模板:
在build文件夹下新建文件夹tpl，然后在tpl中新建一个index.html，如下:
image.png
这时候有了页面模板还是不够的，还需要将页面模板和打包出来的js文件关联起来，因为考虑到以后打包出来的js的文件不会是一个固定的名称，所以这里需要使用一个webpack的插件html-webpack-plugin -
配置
html-webpack-plugin:
首先我们安装一下npm install -D html-webpack-plugin，然后在webpack的plugins配置项下进行一些简单配置:
image.png
配置完成后就可以启动项目了
8 . 配置tsconfig
- 编译目标
这时候我们切回tsconfig配置中，会发现在compilerOptions配置项的target是es5，也就是说把ts代码编译成es5规范的代码，如果不做兼容的话，我们可以将它设置为es6，使其编译成es6的代码
- 模块处理
在module项中，会发现生成的是commonjs的模块系统，因为不考虑兼容，所以这里我也将其设定为最新的esnext，并且将模块处理方式改为用node来处理，设置moduleResolution项为node，不做模块处理方式设置的话可能会有报错
9 . 项目启动
这时候我们可以在package.json中添加启动命令
"dev": "webpack-dev-server --config build/webpack.config.js --mode development",
其中--mode development用于指定开发模式，否则在webpack4+版本下会有警告
然后直接npm run dev即可
总结
其实这个时候项目其实就已经跑起来了，完全可以不用往下看，但是实际上的工作并没有做完，下一章就开始讲解如何提高开发体验
