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的“痛點”:弱類型。弱類型的好處是十分靈活,可以寫出非常簡潔的代碼。但是,對于大型項目來說,強類型更有利,可以降低系統的復雜度,在編譯時就發現類型錯誤,減輕程序員的負擔。

參考

最后

大家好,這里是「 TaoLand 」,這個博客主要用于記錄一個菜鳥程序猿的Growth之路。這也是自己第一次做博客,希望和大家多多交流,一起成長!文章將會在下列地址同步更新……
個人博客:www.yangyuetao.cn
小程序:TaoLand

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容