内容简介：确保安装了但是这时候你会发现有一个错误没有处理
确保安装了 npm install -g typescript
# -S 是--save简写 # -D 是--save-dev简写 # 创建目录 mkdir ts-react && cd ts-react # 生成package.json、tsconfig.json npm init -y && tsc --init # 安装开发工具 npm install-D webpack webpack-cli webpack-dev-server # 安装react相关 npm install -S react react-dom # 安装react相关的ts验证包 npm install -D @types/react @types/react-dom # 安装ts-loader(或者awesome-typescript-loader) 这两款loader用于将ts代码编译成js代码 npm install -D babel-loader
1.2 webpack配置
- 在项目根目录新建一个
build文件夹
mkdir build && cd build && touch webpack.config.js
- 根目录下新建src文件夹，然后在src里新建index.tsx文件作为项目入口
mkdir src && cd src && touch index.tsx
- 编写简单的
webpack配置，只包含entry和output
const path = require('path')
module.export = {
entry: {
app: path.join(__dirname, '../', 'src/index.tsx)
},
output: {
path.join(__dirname, '../', 'dist),
filename: '[name].js
}
}
-
编写
awesome-typescript-loader配置项:在
webpack中的module是专门用来决定如何处理各种模块的配置项，例如本例中的typescript，这里主要用的配置项就是module.rules，而当前只需要简单配置解析.tsx文件类型即可
- 在
src/index.tsx中写入口文件
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import Test from '@components/Test'
const render = () => {
ReactDOM.render(
<div>1234</div>,
document.querySelector('#app')
)
}
render()
但是这时候你会发现有一个错误没有处理
这是因为在 tsconfig 里面没有指定 JSX 的版本，这时候在 tsconfig 的 compilerOptions 中添加 "jsx": "react" 配置项即可消除错误
- 此外还需要注意一点，以后需要
import xxx from 'xxx'这样的文件的话需要在webpack中的resolve项中配置extensions，这样以后引入文件就不需要带扩展名
module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
}
}
- 添加页面模板
在 public 文件夹下新建文件夹 tpl ，然后在 tpl 中新建一个 index.html ，如下
mkdir public && cd public && touch index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
这时候有了页面模板还是不够的，还需要将页面模板和打包出来的 js 文件关联起来，因为考虑到以后打包出来的 js 的文件不会是一个固定的名称，所以这里需要使用一个 webpack 的插件 html-webpack-plugin
- 配置
html-webpack-plugin
module.exports = {
plugins: [
new HtmlwebpackPlugin({
template: 'public/index.html'
})
]
}
配置完成后就可以启动项目了
- 配置
tsconfig
- 编译目标 这时候我们切回
tsconfig配置中，会发现在compilerOptions配置项的target是es5，也就是说把ts代码编译成es5规范的代码，如果不做兼容的话，我们可以将它设置为es6，使其编译成es6的代码 - 模块处理 在
module项中，会发现生成的是commonjs的模块系统，因为不考虑兼容，所以这里我也将其设定为最新的esnext，并且将模块处理方式改为用node来处理，设置moduleResolution项为node，不做模块处理方式设置的话可能会有报错
- 项目启动
这时候我们可以在 package.json 中添加启动命令
"dev": "webpack-dev-server --config build/webpack.config.js --mode development"
其中 --mode development 用于指定开发模式，否则在 webpack4+ 版本下会有警告
然后直接 npm run dev 即可
总结
其实这个时候项目其实就已经跑起来了，完全可以不用往下看，但是实际上的工作并没有做完，下一章就开始讲解如何提高开发体验
二、提升开发体验
本章主要介绍的是建立在项目初始化的基础上如何优化开发体验 内容包含如下:
sass css module sass
2.1 支持sass
# 安装相应包 npm install -D node-sass sass-loader style-loader css-loader
webpack 进行 loader 编译的顺序是从下到上的:知道上面的顺序后我们在 webpack 中的配置就非常简单了，直接在 module.rules 下面加上 .scss 文件类型的编译配置即可
查看效果,这时候我们在 src 下面新建一个 index.scss ，然后在 index.tsx 里面引入这个文件查看
2.2 支持css module
css module 是针对 css 类名作用域做出限定的一种规范，用以解决 css 类名冲突的问题
- 安装对应的包 因为在这里我们用的是
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 的配置修改为如下:
修改为这样既可，但是同时我们也发现一个问题:
- 这个问题导致的原因是因为
.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 值，这样可以有效地避免类名全局污染问题
2.3 配置公共sass属性
既然已经可以使用 sass 进行更加简便的 css 代码编写，那么我们也可以将常用的一些样式代码和 sass 变量写入公共文件中，当使用的时候就可以直接引入使用，这可以提高一定的效率节约时间
- 新建公共样式目录
首先在 src 目录下新建 styles 文件夹，然后在 styles 文件夹下新建 var.scss 文件用于存放样式变量。 之后在 var.scss 文件里写入一个颜色变量和一个样式:
- 查看效果
然后在 index.scss 文件里面引入 var.scss ，接着就可以直接使用里面的变量了
- 优化
上面的效果其实已经达成，但还是存在一个不好的问题，就是在引入 var.scss 的路径上要根据每个文件夹的路径相对来引入非常麻烦，那么我们能否做到只需要 @import var.scss 就行呢？答案是可以的，我们可以使用一个 node-sass 的属性 includePaths 进行路径优化:
2.4 支持装饰器
前置工作 在 src 目录下新建一个 components 文件夹，用于存放通用组件，然后在 components 文件及里面新建一个组件 Test ，然后在网页入口引入这个组件，如下图所示:
什么是装饰器，为什么需要装饰器 装饰器本质上就是一个函数，这个函数对类( class )本身进行一些处理，也可以将装饰器的写法当做一种语法糖，如果不用装饰器的话，可以写成下图这样
设置装饰器可用 根据装饰器的语法，我们可以将上面的代码写成如下:
但是你会发现这里报了一个错误，这是因为装饰器语法在 es6 标准中还只是一个提案，并未正式支持，但是在 ts 中，装饰器已经被正式支持了，不用 ts 的可以自行安装 babel 相关包进行支持
那么怎么解决这个错误呢？我们根据错误提示进入到 tsconfig 文件中，将 experimentalDecorators 设置为 true 即可，然后回到页面查看 log 装饰器已经生效了
2.5 优化路径
在上面的例子中我们新建了 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
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
接着在 webpack.resolve 中新增配置项 plugins (这里要注意的是新增的不是 webpack.plugins ，而是 webpack.resolve.plugins )，配置如下代码
接着我们就可以愉快地使用简化后的路径了：
2.6 构建缓存
我们一般会使用 webpack-dev-server 来进行项目开发，当我们运行 webpack-dev-server 的时候它会在内存中进行项目的构建，但是当使用了 babel 之类的代码转换 工具 后，会对项目构建产生较大的性能影响，这是因为每一次的构建都会对代码进行重新转换。而构建缓存就是将构建的公用代码缓存在磁盘上，这样做的效果就是第一次构建的时间花销会比不用缓存的构建大，但是在之后每次构建的时间花销都会大大减少
- 对比 我们拿一个较大的项目来看区别。 注: 左边是没有设置构建缓存，右边进行了构建缓存。 首先进行对比的是第一次构建时候的时间花销:
- 然后是第二次构建的时间花销
可以看出在第二次构建的时候时间花销减少了百分之五十以上。
设置构建缓存
在设置构建缓存之前我们首先要考虑的是那些地方需要进行设置，那么在前面的配置过程中，可以看出花销较大的地方有对 ts(x) 的转换并且以后还会添加对应的 babel 进去，然后还有针对 sass 类型的转换，那么我们就先对这两个地方的转换进行配置
- 对
ts(x)的转换
这里因为我们使用的是 awesome-typescript-loader ，这个库本身自带了开启缓存的选项 useCache ，然后我们需要指定一个保存缓存文件的地方 cacheDirectory ，所以配置改为如下:
- 对
sass类型的转换
这个地方我们需要使用到一个库 cache-loader
npm install -D cache-loader
然后在对 .scss 文件类型的转换配置中使用它，在这里我们主要是针对转换出来的 css 进行缓存，所以需要写在 typings-for-css-modules-loader 配置的前面:
这样就配置好当前的构建缓存了，当你 npm run dev 的时候会发现根目录下生成了缓存文件 .cache-loader
打开它看会发现有对应的缓存代码:
三、整理杂项
在上一篇提升开发体验中，我们一下子集成了一堆插件和功能进去，导致项目结构比教混乱，重点问题就在 webpack 的相关配置项目录 build 文件夹中，所以今天的工作较为轻松，重点就是进行项目结构整理，然后再进行一些杂项的添加
Ant Design mobx react-hot-loader svg-component
3.1 整理项目结构
在做这一步的时候首先我们来看看现在的项目结构是怎么样的
那么当前最先需要做的工作就是进行build文件夹下 webapck 的配置项整理
针对 webpack 配置项的整理。做这一步的时候首先需要确定一点就是，我们根据什么来整理 webpack 配置项目录呢？要确定这一点只需要查看一下 webpack 中有些什么配置，然后就可以根据每个配置项进行模块划分
在这份配置项中，因为 entry 、 output 、 resolve 内容相对较少，往后也不会有太多内容的添加，所以可以忽略
首先将plugins相关内容移出来
- 首先在
build中新建文件plugins.js，然后将原先的plugin里面的代码拷贝过去
- 在
webpack.config.js中将plugins.js的内容引入进来即可
整合路径选择在 webpack.config.js 中你会看到许多使用 path.join 的地方，这一块也可以抽取出来作为一个工具模块。新建 build/utils.js 文件，然后写入如下代码，将路径的目标指向根目录，详细路径则通过参数的形式传入
之后在任何需要使用的地方引入这个函数使用即可
将module相关内容移出来
因为在 module 项中相关的配置相对较多，涵盖了对 ts(x) 和 scss 等相关文件的 loader ，以后还需要添加针对图片等文件类型的 loader ，所以这一块需要分的更加细一些:
- 在
build中新建rules目录，里面新建jsRules和styleRules文件
- 将之前
module中的loader配置一如对应文件中并导出，然后在webpack.config.js中引入: 首先是jsRules内容
然后是 styleRules 内容
最后是引入 rules 后的 webpack.config.js
至此我们就将 webpack 的配置项分离了出来，接下来我们集成 Ant DesignUI 库(简称 antd )，并且修改其主题色。
3.2 集成antd
集成 antd 要集成 antd 非常简单，只需要 npm install -S antd 即可，然后我们在 components/Test 组件中引入其中一个组件
修改 antd 的主题配色
通常在开发中，我们采用的配色不是 antd 原本的配色，如果大面积引用 antd 组件的话，一个个去修改配色确实是非常麻烦的事情，于是这个时候就需要一次性对 antd 的主题色进行修改
-
antd的样式使用less进行编写，对其主题的修改也就是对其中的less变量进行修改，所以想要修改主题需要安装less和less-loader: npm install -D less less-loader - 然后我们在根目录下添加一个
theme.js文件，里面是需要修改的主题样式代码，具体有什么主题可以进行修改可以点击 这里查看 :
- 然后编写在
build/rules/styleRules中添加针对less文件的loader，如下图: 引入上一步的主题文件
const theme = require('../../../theme')
- 最后我们在
components/Test组件中引入Button组件的样式less文件
此时可以查看效果，发现已经主题已经修改成功
- 存在的问题
这个时候进行 antd 组件的引入和主题修改的步骤中还是存在一些问题的，比如在引入某个组件的同时还需要手动引入其对应的 less 文件，这是非常麻烦的一件事，那么找我们需要解决的就是在引入 antd 组件的同时也自动引入其对应的 less 文件。
另外，使用 import {Button } from 'antd' 这样的引入方式存在一个很大的弊端，就是在引入其中某个组件的同时会把整个 antd 文件都引入进来，影响构建速度，而且打包后体积会变大，这样的话我们还需要做 antd 的按需加载。所以接下来我们需要解决掉这两个问题，而这两个问题也是可以同时解决的
antd按需加载
- 在
antd官网中推荐使用babel-plugin-import来做按需加载，但是我们的项目用的是typescript，走的是awesome-typescript-loader编译，所以在我们的项目中babel-plugin-import是不生效的，这时候需要就需要一个叫做ts-import-plugin的插件
npm install -D ts-import-plugin - 第二步我们需要在
build/rules/jsRules.js中进行配置，根据ts-import-plugin的教程直接配置即可
- 回到
Test组件中 将import 'antd/lib/button/style/index.less'这句话删掉，然后重新运行查看效果
3.3 整合常用函数
在上一步中，我们集成了 antdUI 库，在这个库中有许多东西是非常常用的，例如消息组件 message 和通知组件 notification ，但是要用到这两个组件的话就得引入，当使用次数较多的时候，我们可以考虑将其整合在一个 react 组件中，然后所有的组件都继承这个组件即可，这样做的好处是当以后添加了例如 axios 这样的常用库的时候也可以整合到这个 react 组件中，使继承这个 react 组件的组件都可以用到
整合常用函数
- 我们先在
src下新建utils目录，然后在utils中新建reactExt.tsx文件
- 然后在
tsconfig.json中设置好utils的路径，方便以后的路径引用
- 在
reactExt.tsx中引入antd常用组件，然后导出这个整合了antd组件的组件，当然你也可以把它叫做类，其中需要注意的是，因为以后的每个react组件使用的都是componentExt，然后在这里我们需要使用typescript的interface来对react组件的state和props进行数据类型上的限制，但与此同时并不能知道每个react组件针对state和props的interface是怎么样的，所以在componentExt中需要用到泛型来灵活化interface
- 最后在
components/Test组件中引入comonentExt进行测试:
以后如果有常用的功能性函数也可以往 components/reactExt 中进行添加。
3.4 集成mobx
mobx 是 react 技术栈中一款优秀的状态管理工具，它具有数据监测的功能，并且比 redux 用起来更加方便，也能脱离 react 进行单独使用，安装 mobx 只需要 npm install -S mobx 即可，同时也要安装他和 react 连接的工具 npm install -S mobx-react 。接下来就以一个经典的计算器组件来测试 mobx 。
准备工作 在进行测试之前，我们还需要整理一下组件存放的目录。首先区分一下组件目录的作用
components src/containers/views src/containers/shared tsconfig.json
这一步在该博客中作用体现不大，但是对真实项目的条理性是存在较好作用的。 如下图
创建store
- 新建
src/store目录用于存放store文件，然后在该目录下新建globalStore目录和其中的index.tsx文件
- 然后在这个
index.tsx文件中有如下代码:其中的observable和action的功能请自行查看mobx文档
- 然后新建
src/store/index.tsx文件用于导出这些store
连接 store 创建了 store 之后我们还需要将其和 react 进行连接，这个时候就需要用到 mobx-react 这个库，我们去到 src/index.tsx 中进行修改
这里面的 configure({enforceActions: 'observed'}) 用于限制被 observable (也就是 store 中添加了 @observable )的数据的修改方式，让其只能添加了 @action 的函数中进行修改
编写Counter组件进行测试
- 我们去到
src/containers/views目录中，新增Counter/index.tsx，并写入如下代码:
- 然后将这个组件用
mobx-react变为可观测对象，并使用@inject注入globalStore
- 最后我们在
src/index.tsx中引入Counter组件，顺便看看它的props中是否带有数据
- 最后回到
Counter组件中编写方法检验功能是否正常
给 store 添加全局 typescript 校验
在上面的例子中虽然我们在功能上已经可以正常的使用了，但是显而易见的是有报错，这个错误是因为没有填写针对组件 props 的验证接口导致 typescript 认为 globalStore 不存在而导致的。我们可以写成如下代码解决问题
但是每个引入了 globalStore 的组件都需要写一次显得非常麻烦，那么我们可以将 IGlobalStore 这个校验接口写成全局的校验接口，直接以如下图形式验证即可:
- 我们在
src/store/globalStore下新建type.d.ts
- 去到
globalStore/index.tsx中，将GlobalStore类导出，我们将会利用这个类作为typescript校验接口来使用( 这种用法可以点这里查看详情 ):
- 在
type.d.ts中引入这个类，然后定义并导出一个全局命名空间(该用法详解点这里)，接着在这个命名空间中把接口导出:
- 回到
Counter组件中，将接口改写为如下
这里注意需要添加 ? ，因为这个属性是从 store 中拿过来的，不填写的话，父组件会报错说没有传这个值。 但是因为添加了 ? ，所以这个 globalStore 验证为不一定有，从而在组件中会有如下报错:
这个时候我们可以去 tsconfig.json 中将 strictNullChecks 项置为 false ，去掉 null 和 undefined 的检测即可
- 到了这一步我们集成
Mobx就成功了，并且也针对store添加了对应的typescript验证:
3.5 使用react-hot-loader进行热加载
这一步主要针对的是 webpack-dev-server 的页面自动刷新功能不能保持数据一直都在，有时候在更新组件代码后需要保持数据不变的场景就会很不方便，所以这个时候就需要用到 react-hot-loader 来进行页面代码变更检测并找到变更部分进行更新，同时保证数据不变
- 首先我们安装它
npm install -D react-hot-loader - 然后我们还要用到它里面的
react-hot-loader/babel，但是因为我们使用了awesome-typescript-loader，所以不需要在根目录添加.babelrc文件了，直接进到build/rules/jsRules.js中进行配置即可
- 接着我们去到
Counter组件中引入react-hot-loader中的hot方法，直接以装饰器的形式包裹组件
- 最后再去
package.json中，在dev命令后面加上--hot即可
- 回到
Counter组件中做个检测，先增加一些数字，然后在增加字样后面加上几个字符，可以看到页面更新的同时保留了数据
实际上我们在控制台看到输出这个字样就已经成功了
3.6 集成svg-component
在前端开发中， svg 格式的图片使用的是非常频繁的，而集成了 svg-component 后，我们可以将 svg 图片以组件的形式引入并使用
- 要集成
svg-component我们首先要安装@svgr/webpack: npm install -D @svgr/webpack，这是一个loader； - 然后我们在
build/rules中新建fileRules.js文件，将svg格式文件用这个loader进行编译
然后在 webpack.config.json 中导入并重启项目
- 接着我们随便找一个
svg格式图片在Counter中引入并测试，虽然可以使用了，但是也导致了一个typescript的报错说找不到模块
导致这个错误的原因是 svg 图片本身并不具备模块化的功能，也不提供模块导出，所以在导入的时候是不能识别的，要解决这个问题可以模仿我们之前使用 css moudles 的方式，给它声明一个模块:我们在 typings 目录下新建 svg.d.ts 文件，并写入如下代码
这个时候还可以为 svg-component 的使用提供代码提示和传入属性校验的支持: 我们声明一个接口，然后在声明的模块中用这个接口作为内容
这个接口使用的是 react 的无状态组件声明，传入属性则为 svg 文件自带的属性比如 col or width 之类的，然后我们就可以愉快地使用 svg-comonent 了
四、项目打包
本章节内容
- 添加打包命令
- 进行
css和js分离 - 修改
html-webpack-plugin配置项 - 添加
react-loadable和react-router,进行代码分离和按需加载 - 添加
optimization,进行第三方库代码分离 - 进行代码压缩
- 关于
externals
4.1 添加打包命令
4.2 进行 css 和 js 分离
4.3 修改 html-webpack-plugin 配置项
4.4 代码分离和按需加载
4.5 添加 optimization
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 搭建Typescript+React项目模板(5) --- 团队规范
- 搭建Typescript+React项目模板(4) --- 项目打包
- 使用 React 和 Tailwind CSS 搭建项目模板
- 搭建Typescript+React项目模板(2) --- 提升开发体验
- 搭建Typescript+React项目模板(3) --- 整理项目和杂项
- 搭建Typescript+React项目模板(1) --- 项目初始化
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Masterminds of Programming
Federico Biancuzzi、Chromatic / O'Reilly Media / 2009-03-27 / USD 39.99
Description Masterminds of Programming features exclusive interviews with the creators of several historic and highly influential programming languages. Think along with Adin D. Falkoff (APL), Jame......一起来看看 《Masterminds of Programming》 这本书的介绍吧!
