webpack-ts-react-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的“痛点”：弱类型。弱类型的好处是十分灵活，可以写出非常简洁的代码。但是，对于大型项目来说，强类型更有利，可以降低系统的复杂度，在编译时就发现类型错误，减轻程序员的负担。

参考

• TS官网
• TypeScript 在 React 中使用总结

最后

大家好，这里是「 TaoLand 」，这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客，希望和大家多多交流，一起成长！文章将会在下列地址同步更新……

个人博客：www.yangyuetao.cn

小程序：TaoLand