TypeScript+react 脚手架+ant-mobile UI 框架踩坑记录

TypeScript+react 脚手架+ant-mobile UI 框架踩坑记录

安装依赖

前提---->npm i create-react-app -g

安装 react+typescript 脚手架

npx create-react-app react-typescript-demo --typescript

进入目录
------自带装好 react/react-dom

cd react-typescript-demo

首先先运行一下项目

npm run start

没啥毛病，接下来我们先安装一下路由 react-router
【这边我们运用最新版本的 router】

npm install --save react-router

npm install --save react-router-dom

这边遇到了一个大坑

1. 项目生成的时候脚手架会默认装@types/react 与@types/react-dom 的 TypeScript 的声明文件
2. 当我装其他包的时候(例如 react-router)他会删掉声明文件，所以当项目生成的时候我们需要自己手动安装声明文件
3. 安装 typescript 的文件依赖

npm install --D @types/react

npm install --D @types/react-dom

---

安装 router 之后也需要安装声明文件

npm install -D @types/react-router

npm install -D @types/react-router-dom

安装 react-redux 状态管理

npm install -s react-redux

安装中间件 redux-thunk

tips:完成了 store.dispatch()的功能增强。即可以在 reducer 中进行一些异步的操作。

npm install -s redux-thunk

安装中间件 redux-logger

npm install -s redux-logger

最后别忘了 redux 的声明

npm install -D @types/react-redux

除了 UI 框架 ant-mobile 没安装，到现在为止基础都差不多

npm run start   成功跑起来

不能建立空文件而不暴露

–isolatedModules 会提示报错

建立项目目录

├─api               api接口
├─assets            资源目录
│  ├─css            scss样式
│  └─svg            svg
│      ├─noselect   tabbar未选中svg
│      └─select     tabbar选中svg
├─components
├─redux             state 储存目录
│  ├─actions        行为层(方法)
│  ├─containers     容器层(方法/属性)
│  └─reducers       (数据中心)
├─routers           路由目录
└─views             视图目录
    ├─cart
    ├─home
    ├─news
    ├─product
    ├─search
    └─user

安装 ant-mobile 框架

npm install antd-mobile --save

为了自定义配置 react-typescript

此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 [email protected] 版本的关系，你还需要安装 customize-cra。
高级配置

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

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

项目根目录创建一个 config-overrides.js 用于修改默认配置

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

按需加载组件

使用 babel-plugin-import

npm install -D babel-plugin-import

+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd-mobile',
+     style: 'css',
+   }),
+ );

然后按需加载组件就可以快乐玩耍了(在什么页面用什么组件，就引入什么组件，无需引入 css 样式)

设置别名

根目录新建 paths.json

{
    "compilerOptions": {
      "baseUrl": "src",
      "paths": {
        "@components/*": ["components/*"],
        "@containers/*": ["redux/containers/*"],
        "@views/*": ["views/*"]
      }
    }
}

tsconfig.json

{
  "extends": "./paths.json"
}

别名弄完新路径玩耍起来,有需要再次添加

Typescript 给 React 带来很多好处：

1.在组件头部定义 interface，让每个人在拿到组件的第一时间就可以很明确知道该组件需要使用的 props 和 state； 2.在编译中发现问题，减少运行时的报错； 3.可以在编辑器中实现实时类型校验、引用查询； 4.约束类型，在混合多语言环境中降低风险，等

安装 Sass 模块

npm i node-sass -D

—不需要配置，直接使用

使用 sass 使用混入写法,类似于函数式写法

$icon-width: 22px;
$icon-height: 22px;

@mixin makeIcon($url) {
    width: $icon-width;
    height: $icon-height;
    background: url($url) center center /  21px 21px no-repeat;
}

统一格式

下载 vscode 插件 prettier -Code formatter

在根目录建立 prettier.config.js

module.exports = {
  printWidth: 80,// 每行代码长度（默认80）
  tabWidth: 2,// 每个tab相当于多少个空格（默认2）
  useTabs: false,// 是否使用tab进行缩进（默认false）
  eslintIntegration: true,
  singleQuote: true,// 使用单引号（默认false）
  semi: false// 声明结尾使用分号(默认true)
}

vscode 设置–搜索 formatonsave,打上勾

…持续更新中