webpack-ts-react-dva脚手架
2019-01-31 本文已影响3人
TaoLandd
2019有太多的东西想尝试，ts,GraphQL,SSR,docker,python,electron,小程序云后台,vue3等等,一个个来吧,用两天了解了下typescript,大概做了个webpack-ts-react-dva的脚手架出来,因为接触TS的时间才几天，所以有些地方的代码自己都觉得写的很丑，老司机请多指教
image
- 是在半年前 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
