搭建Typescript+React项目模板(2) --- 提高开发体验

相关文章和阅读顺序

1.项目初始化

2.提高开发体验

3.整理项目和杂项

4.项目打包

5.团队规范

项目地址

前言

本章主要介绍的是创建在项目初始化的基础上如何优化开发体验 内容包含以下:

1. 支持sass
2. 支持css module
3. 配置公用的sass属性
4. 支持装饰器
5. 路径优化
6. 构建缓存
7. 构建加速

支持sass

• 什么是sass sass是一款css预处理语言，支持变量，嵌套，mixin和导入等功能，能够极大地方便和简化css写法。

• 支持sass 支持sass首先须要安装sass-loader和node-sass npm install -D node-sass sass-loader 另外还须要安装style-loader和css-loader npm install -D style-loader css-loader

• 配置webpack 在这里有一个点是须要注意的，由于将sass代码编译成可用的样式代码须要用到三个loader，因此就会产生顺序问题，首先sass-loader将sass代码编译为css(默认使用node-sass)，而后css-loader将编译出来的代码再次编译成为符合CommonJS的代码，最后style-loader将第二步编译出来的代码转为js代码，而后webpack进行loader编译的顺序是从下到上的: 知道上面的顺序后咱们在webpack中的配置就很是简单了，直接在module.rules下面加上.scss文件类型的编译配置便可:

  

• 查看效果 这时候咱们在src下面新建一个index.scss，而后在index.tsx里面引入这个文件查看效果

  

  

  

  效果如图:

  

支持css module

• 什么是css module css module是针对css类名做用域作出限定的一种规范，用以解决css类名冲突的问题，此外还能避免一些爬虫进行数据爬取(固然厉害的爬虫除外)，同等的还有BEM规范。

• 安装对应的包 由于在这里咱们用的是TypeScript，因此能够用typings-for-css-modules-loader这个包，这个包也能够替代css-loader的功能，此外这个包还能根据.scss文件里面的类名自动生成对应的.d.ts文件: npm install -D typings-for-css-modules-loader

• 配置webpack 这个配置接很是简单了，由于要用typings-for-css-modules-loader替代css-loader的功能，因此直接替换便可，将前面sass的配置修改成以下:

  

• 使用和问题 这个时候咱们将index.tsx文件修改成以下:

  

  修改成这样既可，可是同时咱们也发现一个问题:

  

  这个问题致使的缘由是由于.scss文件中并无相似export这样的关键词用于导出一个模块，因此也就致使报错找不到模块，这个问题能够经过ts的模块声明(declare module)来解决。

• 解决模块声明问题 这时候咱们在根目录下新建一个typings文件夹，用于存放.scss的模块声明，以及后续须要用到的全局校验接口，而后新建typed-css-modules.d.ts文件用于存放.scss模块声明，目录结构和声明内容以下:

  

• 效果 这个时候回到index.tsx文件中你会发现错误标红消失了，而后咱们在index.scss文件中新增以下代码

  

  保存后你会发现当前目录下新增了一个index.scss.d.ts文件，打开里面能够发现是针对每一个类名的类型校验，当之后新增类名的时候，typed-css-modules.d.ts都会自动在index.scss.d.ts里面新增对应的类型校验:

  

  这时候回到页面查看，你会发现类名变成了一个hash值，这样能够有效地避免类名全局污染问题:

  

配置公共sass属性

既然已经可使用sass进行更加简便的css代码编写，那么咱们也能够将经常使用的一些样式代码和sass变量写入公共文件中，当使用的时候就能够直接引入使用，这能够提升必定的效率节约时间:

• 新建公共样式目录 首先在src目录下新建styles文件夹，而后在styles文件夹下新建var.scss文件用于存放样式变量。 以后在var.scss文件里写入一个颜色变量和一个样式:

  

• 查看效果 而后在index.scss文件里面引入var.scss，接着就能够直接使用里面的变量了：

  

  效果:

  

• 优化 上面的效果其实已经达成，但仍是存在一个很差的问题，就是在引入var.scss的路径上要根据每一个文件夹的路径相对来引入很是麻烦，那么咱们可否作到只须要@import var.scss就行呢？答案是能够的，咱们可使用一个node-sass的属性includePaths进行路径优化:

  

  

支持装饰器

• 前置工做 在src目录下新建一个components文件夹，用于存放通用组件，而后在components文件及里面新建一个组件Test，而后在网页入口引入这个组件，以下图所示:

  

  

• 什么是装饰器，为何须要装饰器 装饰器本质上就是一个函数，这个函数对类(class)自己进行一些处理，也能够将装饰器的写法当作一种语法糖，若是不用装饰器的话，能够写成下图这样：

  

  可是若是装饰器多的话就会变成以下样子:

  

  这样会致使代码很是难以理解，因而装饰器就登上舞台了。这在从此使用了mobx(or redux)的时候也是很是有用的。

• 设置装饰器可用 根据装饰器的语法，咱们能够将上面的代码写成以下:

  

  可是你会发现这里报了一个错误，这是由于装饰器语法在es6标准中还只是一个提案，并未正式支持，可是在ts中，装饰器已经被正式支持了，不用ts的能够自行安装babel相关包进行支持。

  

  那么怎么解决这个错误呢？咱们根据错误提示进入到tsconfig文件中，将experimentalDecorators设置为true便可，而后回到页面查看log装饰器已经生效了:

  

优化路径

• 为何 在上面的例子中咱们新建了components文件夹，而后在入口处引入了其中的Test组件

  

  可是这时候须要考虑到一个问题，若是之后在一个层级比较深的文件中引入这个组件会不会产生以下这种状况呢?

import Test from '../../../../components/Test'
复制代码

这样不只书写起来麻烦还容易出错，所以这时候就须要进行一些路径上的优化，使得不管在哪一个地方引入这些组件都能用同一种写法，例如:

import Test from '@comonents/Test'
复制代码

• 路径优化 这里针对路径的优化有两种方案，第一种是直接在webpack.resolve.alias中进行路径配置:

  

  可是在这里咱们使用了ts，因此还须要在tsconfig中进行配置:

  

  这样也能用，不过咱们还能够用tsconfig-paths-webpack-plugin这个包将tsconfig中对路径的设置映射到webpack配置中去，这样就不须要在webpack中再进行一次路径的配置了，首先安装: npm install -D tsconfig-paths-webpack-plugin 而后就采用前面tsconfig里面对baseUrl和paths的配置。 以后进入webpack配置中，引入tsconfig-paths-webpack-plugin

  

  接着在webpack.resolve中新增配置项plugins(这里要注意的是新增的不是webpack.plugins，而是webpack.resolve.plugins)，配置以下代码:

  

  接着咱们就能够愉快地使用简化后的路径了：

  

构建缓存

• 什么是构建缓存 咱们通常会使用webpack-dev-server来进行项目开发，当咱们运行webpack-dev-server的时候它会在内存中进行项目的构建，可是当使用了babel之类的代码转换工具后，会对项目构建产生较大的性能影响，这是由于每一次的构建都会对代码进行从新转换。 而构建缓存就是将构建的公用代码缓存在磁盘上，这样作的效果就是第一次构建的时间花销会比不用缓存的构建大，可是在以后每次构建的时间花销都会大大减小。

• 对比 咱们拿一个较大的项目来看区别。 注: 左边是没有设置构建缓存，右边进行了构建缓存。 首先进行对比的是第一次构建时候的时间花销:

  

  而后是第二次构建的时间花销:

  

  能够看出在第二次构建的时候时间花销减小了百分之五十以上。

• 设置构建缓存 在设置构建缓存以前咱们首先要考虑的是那些地方须要进行设置，那么在前面的配置过程当中，能够看出花销较大的地方有对ts(x)的转换而且之后还会添加对应的babel进去，而后还有针对sass类型的转换，那么咱们就先对这两个地方的转换进行配置

1. 对ts(x)的转换 这里由于咱们使用的是awesome-typescript-loader，这个库自己自带了开启缓存的选项useCache，而后咱们须要指定一个保存缓存文件的地方cacheDirectory，因此配置改成以下:

   

2. 对sass类型的转换 这个地方咱们须要使用到一个库cache-loader npm install -D cache-loader, 而后在对.scss文件类型的转换配置中使用它，在这里咱们主要是针对转换出来的css进行缓存，因此须要写在typings-for-css-modules-loader配置的前面:

   

   这样就配置好当前的构建缓存了，当你npm run dev的时候会发现根目录下生成了缓存文件.cache-loader。

   

   打开它看会发现有对应的缓存代码:

   

   不过如今只是根据目前须要进行的缓存配置，当后面集成antd等相关库的时候由于须要使用到less类型，因此之后还须要根据须要进行添加。

此外，在构建这方面的知识在后面的项目打包部分也是很是有用的。