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

因为模板是为以后项目开发所准备的前奏工作，所以在搭建之前我觉得首先需要先考虑以下几个方面:

• 开发体验
• 项目打包
• 团队规范 那么这一篇就先做个起手式，先搭建一个简单的可以跑起来的架子

起手安装

• 前置安装 首先需要全局安装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 即可

  

总结

其实这个时候项目其实就已经跑起来了，完全可以不用往下看，但是实际上的工作并没有做完，下一章就开始讲解如何提高开发体验