搭建Typescript+React项目模板(1) --- 项目初始化

相关文章和阅读顺序

1.项目初始化

2.提高开发体验

3.整理项目和杂项

4.项目打包

5.团队规范

项目地址

目前集成

• 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配置

  1. 在项目根目录新建一个build文件夹，而后在里面新建webpack.config.js文件: mkdir build && cd build && touch webpack.config.js

  2. 根目录下新建src文件夹，而后在src里新建index.tsx文件做为项目入口: mkdir src && cd src && touch index.tsx

  3. 编写简单的webpack配置，只包含entry和output:

     

  4. 编写awesome-typescript-loader配置项: 在webpack中的module是专门用来决定如何处理各类模块的配置项，例如本例中的typescript，这里主要用的配置项就是module.rules，而当前只须要简单配置解析.tsx文件类型便可

     

  5. 在src/index.tsx中写入口文件

     

     可是这时候你会发现有一个错误没有处理

     

     这是由于在tsconfig里面没有指定JSX的版本，这时候在tsconfig的compilerOptions中添加"jsx": "react"配置项便可消除错误 此外还须要注意一点，之后须要import xxx from 'xxx'这样的文件的话须要在webpack中的resolve项中配置extensions，这样之后引入文件就不须要带扩展名

     

  6. 添加页面模板: 在build文件夹下新建文件夹tpl，而后在tpl中新建一个index.html，以下:

     

     这时候有了页面模板仍是不够的，还须要将页面模板和打包出来的js文件关联起来，由于考虑到之后打包出来的js的文件不会是一个固定的名称，因此这里须要使用一个webpack的插件html-webpack-plugin

  7. 配置html-webpack-plugin: 首先咱们安装一下npm install -D html-webpack-plugin，而后在webpack的plugins配置项下进行一些简单配置:

     

     配置完成后就能够启动项目了

  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便可

  

总结

其实这个时候项目其实就已经跑起来了，彻底能够不用往下看，可是实际上的工做并无作完，下一章就开始讲解如何提升开发体验