React+Typescript搭建大屏项目的基本配置和使用

写这篇文的初衷是为了记录一下，用react+ts搭建一个大屏项目的过程，并且记录通过flexbile进行适配的一些基础配置。

React + Typescript搭建项目，并实现屏幕适配

安装

// npm 方式
npm install -g create-react-app
// 如果很久之前安装过，建议卸载重新安装 npm uninstall -g create-react-app

新建项目

npx create-react-app my-app --template typescript

flexible + rem实现适配

1. 安装插件

npm i lib-flexible --save

npm i postcss-px2rem --save

1.1 配置

1.1.1配置meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

1.1.2 导入flexible文件

在项目入口文件index.tsx中引入lib-flexible

import 'lib-flexible';

编辑器会报错"react无法找到模块“lib-flexible”的声明文件"。解决方案：在src目录下添加declaration.d.ts，对模块进行声明

declare module 'lib-flexible';

1.1.3 配置flexible文件

由于react未暴露webpack文件。有两种方法

1. 通过npm run eject命令可以将隐藏的wabpack文件暴露出来，但此方法不可逆
2. 通过 react-app-rewired 插件来覆盖配置文件

npm install react-app-rewired customize-cra -s

更改package.json文件

"scripts": {
    "s