typescript-dva脚手架
2019有太多的东西想尝试,ts,GraphQL,SSR,docker,python,electron,小程序云后台,vue3等等,一个个来吧,用两天了解了下typescript,大概做了个webpack-ts-react-dva的脚手架出来,因为接触TS的时间才几天,所以有些地方的代码自己都觉得写的很丑,老司机请多指教
- 是在半年前 webpack4构建react脚手架 基础上修改的,这样自己熟悉一点
- 基于:
ts3.2
+react16.7全家桶
+dva2.4
+webpack4
+antd3.13
+immutable
+fetch
+scss
- 源码
过程
- 增加一个ts的配置文件
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"lib": [
"es2015",
"es2016"
]
},
"include": [ //包含的编译目录
"./src/**/*"
],
"exclude": [ //排出不编译的目录
"node_modules",
"**/*.spec.ts"
]
}
- 修改
webpack.config.base.js
,增加ts的识别,修改scss中的css-load为typings-for-css-modules-loader
{
test: /\.ts$/,
loader: 'ts-loader'
},
{
test: /\.tsx$/,
loader: 'ts-loader'
},
...
{
loader: 'typings-for-css-modules-loader',
options: {
modules: true,
namedExport: true,
camelCase: true,
minimize: true,
localIdentName: "[path][name]__[local]--[hash:base64:5]"
}
},
- 修改原来的js文件为ts,包含JSX的js文件变成tsx,对于使用dva来说就是以前的model都变成了ts,routers里面的都变成了tsx.
- 引入写法变化:之前类似
import React from 'react'
,import styles from './company.scss'
变成了import * as React from "react"
,import * as styles from './Main.scss'
- 其他的见 源码 吧
- 因为接触TS的时间才几天,所以有些地方的代码自己都觉得写的很丑,老司机请多指教
TS的优势
最直观的感受就是配合vscode写ts代码非常爽,智能提示太到位了。然后就是TypeScript解决JavaScript的“痛点”:弱类型。弱类型的好处是十分灵活,可以写出非常简洁的代码。但是,对于大型项目来说,强类型更有利,可以降低系统的复杂度,在编译时就发现类型错误,减轻程序员的负担。
参考
最后
大家好,这里是「 TaoLand 」,这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客,希望和大家多多交流,一起成长!文章将会在下列地址同步更新……
个人博客:www.yangyuetao.cn
小程序:TaoLand
typescript-dva脚手架的更多相关文章
- taro.js & dva 脚手架搭建及常见问题
## taro.js & dva 脚手架 ### 启动 npm install -g @tarojs/cli // 全局安装taro-cli npm i npm run dev:weapp / ...
- 【React】启动dva脚手架
开始前: 确保node版本为6.5以上. // 安装脚手架 npm i dva-cli -g // 自动安装新工程 dva new newProjectName // 导入antd包 npm i an ...
- dva脚手架 dva-cli 配置roadhogrc,antd-mobile样式按需加载 不生效的问题
1.新安装dva-cli脚手架版本0.9.2,dva版本是2.4.1,roadhogrc版本是2.4.9 roadhogrc2 与1 的区别把roadhogrc 改成了webpackrc 所以配置an ...
- 使用dva脚手架(dva-cli)快速构建React项目
安装 dva-cli 你应该会更希望关注逻辑本身,而不是手动敲入一行行代码来构建初始的项目结构,以及配置开发环境. 那么,首先需要安装的是 dva-cli .dva-cli 是 dva 的命令行工具, ...
- react的dva框架初试
使用背景:迫不得已!!(自己入职是以vue技术入职的,说是马上vue项目就来了,让我负责这个项目的前端.但是入职后就让我下了现在这个项目看下,然后就顺理成章的帮忙进行开发了,其实自己一直想要做reac ...
- dva使用及项目搭建
一.简介 本文将简单分析dva脚手架的使用及项目搭建过程. 首先,dva是一个基于redux和redux-saga的数据流方案,然后为了简化开发体验,dva还额外内置了react-router和fet ...
- 在React旧项目中安装并使用TypeScript的实践
前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...
- 解决基于TypeScript 的 RN项目相对路径引入组件的问题
一.前言 在开发RN项目时,经常会要使用这样的方式(../../../)来引入组件,感觉非常繁琐,如果项目结构层级比较多,引入的头部更加分不清. 那有没有一种方案和vue项目一样,经过配置后简写路径, ...
- React+DvaJS 之 hook 路由权限控制
博客 学院 下载 GitChat TinyMind 论坛 APP 问答 商城 VIP 活动 招聘 ITeye 写博客 发Chat 登录注册 原 React+DvaJS 之 hook 路由权限控制 20 ...
- 从0到1发布一个Vue Collapse组件
需求背景 最近在项目中遇到了一个类似Collapse的交互需求,因此到github上找了一圈关于Vue Collapse的相关轮子,但是多少都有些问题.有的是实现问题,例如vue2-collapse, ...
随机推荐
- visual Studio里面的代码前面多出好多小点应该怎么设置
如果是vs中前面绿色的点的话你试试 ctrl + R 然后 ctrl + W 试试看能不能去掉
- Entity Framework之犹豫不决
记得去年初就开始关注Entity Framework,那时只是简单测试了一下,发现较之Nhibernate不太成熟.当时的EF主要表驱动方式开发,过度依赖edm文件,并且数据层耦合了模型层,让一些MV ...
- C++ primer 第四版 练习3.13,3.14
读一组整数到 vector 对象,计算并输出每对相邻元素的 和.如果读入元素个数为奇数,则提示用户后一个元素 没有求和,并输出其值. vector<int> ivec; int ival; ...
- Linux:SSH服务配置文件详解
SSH服务配置文件详解 SSH客户端配置文件 /etc/ssh/ssh——config 配置文件概要 Host * #选项“Host”只对能够匹配后面字串的计算机有效.“*”表示所有的计算机. For ...
- 接下来将介绍C#如何设置子窗体在主窗体中居中显示,本文提供详细的操作步骤,需要的朋友可以参考下
接下来将介绍C#如何设置子窗体在主窗体中居中显示,本文提供详细的操作步骤,需要的朋友可以参考下 其实表面上看是很简单的 开始吧,现在有两个窗体Form1主窗体,Form2子窗体 而且我相信大部分人都会 ...
- JavaWeb中监听器+过滤器+拦截器区别、配置和实际应用
JavaWeb中监听器+过滤器+拦截器区别.配置和实际应用 1.前沿上一篇文章提到在web.xml中各个元素的执行顺序是这样的,context-param-->listener-->fil ...
- OK335xS GPMC nand device register hacking
/********************************************************************************* * OK335xS GPMC na ...
- 【linux基础】生成目录下所有图片的路径
command ls *.jpg > list.txt result .png .png .png .png .png command ls /home/xxx/input/*.png > ...
- VS2013、VS2015中,新建项目没有看到解决方案的问题(已解决)
问题描述:装好VS2013 专业版 for Update5不知怎么弄的,突然新建项目没有了解决方案,于是各种折腾,最后终于解决了! ================================== ...
- day2-Iptables笔记
1. iptables防火墙简介 Iptables也叫netfilter是Linux下自带的一款免费且优秀的基于包过滤的防火墙工具,它的功能十分强大,使用非常灵活,可以对流入.流出.流经服务器的数 ...