webpack-ts-react-dva脚手架

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

参考

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

最后

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