webpack-ts-react-dva腳手架

2019有太多的東西想嘗試湘换,ts,GraphQL,SSR,docker,python,electron,小程序云后臺,vue3等等,一個個來吧,用兩天了解了下typescript,大概做了個webpack-ts-react-dva的腳手架出來,因為接觸TS的時間才幾天,所以有些地方的代碼自己都覺得寫的很丑炫狱,老司機(jī)請多指教

image

過程

  • 增加一個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的時間才幾天,所以有些地方的代碼自己都覺得寫的很丑躬审,老司機(jī)請多指教

TS的優(yōu)勢

最直觀的感受就是配合vscode寫ts代碼非常爽,智能提示太到位了蟆盐。然后就是TypeScript解決JavaScript的“痛點”:弱類型承边。弱類型的好處是十分靈活,可以寫出非常簡潔的代碼石挂。但是博助,對于大型項目來說,強(qiáng)類型更有利痹愚,可以降低系統(tǒng)的復(fù)雜度富岳,在編譯時就發(fā)現(xiàn)類型錯誤蛔糯,減輕程序員的負(fù)擔(dān)。

參考

最后

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末阁簸,一起剝皮案震驚了整個濱河市爬早,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌启妹,老刑警劉巖筛严,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異饶米,居然都是意外死亡颅围,警方通過查閱死者的電腦和手機(jī)盒延,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來眯勾,“玉大人吨拍,你說我怎么就攤上這事褪猛。” “怎么了羹饰?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵伊滋,是天一觀的道長。 經(jīng)常有香客問我队秩,道長笑旺,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任馍资,我火速辦了婚禮筒主,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘鸟蟹。我一直安慰自己乌妙,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布建钥。 她就那樣靜靜地躺著藤韵,像睡著了一般。 火紅的嫁衣襯著肌膚如雪熊经。 梳的紋絲不亂的頭發(fā)上泽艘,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天欲险,我揣著相機(jī)與錄音,去河邊找鬼匹涮。 笑死天试,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的焕盟。 我是一名探鬼主播秋秤,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼脚翘!你這毒婦竟也來了灼卢?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤来农,失蹤者是張志新(化名)和其女友劉穎鞋真,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沃于,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡涩咖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了繁莹。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片檩互。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖咨演,靈堂內(nèi)的尸體忽然破棺而出闸昨,到底是詐尸還是另有隱情,我是刑警寧澤薄风,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布饵较,位于F島的核電站,受9級特大地震影響遭赂,放射性物質(zhì)發(fā)生泄漏循诉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一撇他、第九天 我趴在偏房一處隱蔽的房頂上張望茄猫。 院中可真熱鬧,春花似錦逆粹、人聲如沸募疮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽阿浓。三九已至,卻和暖如春蹋绽,著一層夾襖步出監(jiān)牢的瞬間芭毙,已是汗流浹背筋蓖。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留退敦,地道東北人粘咖。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像侈百,于是被迫代替她去往敵國和親瓮下。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 相關(guān)文章和閱讀順序 搭建Typescript+React項目模板(1) --- 項目初始化搭建 Typescrip...
    大春春閱讀 5,933評論 2 9
  • 一钝域、為什么我要放棄dva 老實說讽坏,dva真的很好用,下載下來過后直接寫業(yè)務(wù)邏輯代碼就可以了例证,基本不用理會webpa...
    王彩彩的胖狗子閱讀 3,855評論 2 4
  • 上午爬山路呜,欣喜地發(fā)現(xiàn)似乎齋戒后體能比之前更好了,我想這應(yīng)當(dāng)跟晚上在小區(qū)里跑步有關(guān)织咧。心煩意亂的時候胀葱,特別想下去跑一下...
    Maggie_WangLi閱讀 146評論 0 0
  • 在微風(fēng)的世界里 有個人坐在一旁 會用手撫過發(fā)梢 帶著親切的溫柔 卻始終不見面容 努力睜開雙眼 然后漸漸模糊 委屈涌...
    言曉曉閱讀 123評論 0 0
  • 沒有周密計劃,就冒然踏入這座被稱為泰北玫瑰的城市笙蒙。作為泰國第二大城市抵屿,在我們天朝人們的眼中,清邁繁華不足捅位,多了...
    鹿_漫漫閱讀 1,159評論 0 2