1 E:/MyProjects/frame-work-cli/my-app/node_modules/@types/react-dom/node_modules/@types/react/index.d.ts
(3631,13): Subsequent property declarations must have the same type.
Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>',
but here has type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>'.
基于React的脚手架搭建
目的
为了能够在工作中更加快速的搭建起开发环境,所以在create-react-app的基础之上结合自身公司业务和个人习惯,搭建了个更加方便的脚手架。GitHub地址
技术栈
目录结构
搭建过程
1 配置typescript使用环境
首先我打算使用typescript作为开发语言,首先我们是用create-react-app来作为基础的脚手架工具,按照github上面的操作方法,进行如下操作:
这样当我们就可以通过
npm start
启动应用了配置scss 参考链接
npm install --save node-sass-chokidar
按照如上操作即可,然后再添加
src/**/*.css
在.gitignore
文件中。接下来我们希望项目能够监测scss的变化,从而自动去编译scss文件,显然我们要用到watch-css
和build-css
这两个任务,我们可以使用&&
操作符,但是这种跨平台性并不是很好,所以我们采用npm-run-all
这个工具。然后进行如下修改
ok,以上我们就搭建好了scss环境
安装anti-mobile
这里由于我们使用的是typescript,所以
"start-js": "react-app-rewired start --scripts-version react-scripts-ts",
和"build-js": "react-app-rewired build --scripts-version react-scripts-ts",
后面要加上react-scripts-ts
。接下来我们实现按需加载参考链接安装
npm install babel-plugin-import --save-dev
更改
config-overrides.js
文件这样我们就可以直接引入
import { Button } from 'antd-mobile';
不需要在前面引入import 'antd-mobile/dist/antd-mobile.css';
当我们引入antd-mobile后可能会出现下列错误
找到node_modules/antd-mobile/lib/picker/PropsType.d.ts把
format?: (values) => void;
改成format?: (values: any) => void;
即可当然为了直接省事,直接在tsconfig.json设置"noImplicitAny": false
。4 开发环境切换配置
现在公司一般都会有开发环境,预发布环境和正式环境,这些环境所对应的后端地址并不一样,所以我们要来进行一些配置方便切换。实现的思路就是读取命令行参数,根据参数把不同环境的配置文件的内容复制替换掉environment.js这个文件,这里我们用到了shelljs和cross-env(读取命令行参数)这两个js库。 创建
cp-environment.js
更改package.json
当然我们开发环境上传的代码应该是buildDev后的代码,但是有可能有时进行了误操作,把build后的代码上传上去,我们还可以写一个检测的脚本。 原理就是读取当前分支名,根据分知名和当前的环境变量进行对比。
Http
用到就是axios,至于怎么用直接看我的[GitHub地址]()就行,这里进行了一层封装,主要是对返回的结果进行统一的处理。
路由
我用到的是react-router-dom,至于用法还是推荐看github,
坑
当我们启动应用的时候可能会出现如上错误,这是由于我们安装的
@types/react
和@types/react-dom
版本并不怎么一致,参考链接, 例如下面的版本所以我们可以换成
在tsconfig.json设置
"noImplicitAny": false
设置 tsconfig.json "allowSyntheticDefaultImports": true,
在tslint.json设置typedef: false,这个属于tslint相关配置的问题,具体可以看文档
最后(欢迎大家关注我)
DJL箫氏个人博客 博客GitHub地址 简书 掘金