ts react vite_or_webpack

有一個範例 use-webpack

這是一個簡單的（管理）入門程序，包含 typescript、react 和 vite。

快速瀏覽一下：

設定

對於哈士奇

$ npm run prepare

如果不需要淘寶註冊表，可以在.npmrc中更改

$ npm i

測試

$ npm test 

為發展而建設

$ npm run dev

為生產而構建

$ npm run build:(qa/prod)

特徵

• 使用ant design作為UI框架
• 使用ServiceWorker
• 使用 husky{pre-commit/commit-msg} 鉤子
• 對 i18n 使用react-intl-universal。
• 使用react-virtualized作為脂肪列表。

頁面

• 索引頁面變成了套接字調試器

待辦事項

• 由具有權限的使用者配置選單
• 更多功能頁面，如 Socket Debugger

組件範例

 import React from 'react'
import { observer } from 'mobx-react'
import { Button } from 'antd'

import history from '@shared/App/ht'

function Test ( ) {
    function gotoHome ( ) {
        history . push ( '/' )
    }
    return (
        < Button type = "primary" onClick = { gotoHome } >
            go to page index directly
        </ Button >
    )
}

export default observer ( Test )

活生生的例子

必要的擴展（在 vscode 上）

• ESLint

• 風格林特

• Prettier - 代碼格式化程序

如何上傳文件到伺服器

 #! /bin/bash

TIMESPAN= $( date ' +%s ' )
DEPLOYNAME=ts-react.qa. ${TIMESPAN}
DEPLOYFILES= ${DEPLOYNAME} .tar.gz
SERVER=0.0.0.0

# make compression
cd dist/qa
tar -zcvf ${DEPLOYFILES} ./ *

# upload
scp -P 22 -o StrictHostKeyChecking=no ${DEPLOYFILES} node@ ${SERVER} :/home/pages/ts-react/tarfiles

# make decompression
ssh -p 22 -o StrictHostKeyChecking=no node@ ${SERVER} tar xzf /home/pages/ts-react/tarfiles/ ${DEPLOYFILES} -C /home/pages/ts-react

if [ $? -ne 0 ] ; then
    echo " success "
else
    echo " fail "
fi 

如何使用nginx進行部署

 server {
       listen       9993 ;
       server_name  localhost:9993;

       location / {
             root   ~ /Documents/react/ts-react/dist/qa/;
             index  index.html;
       }
 }

鷹架

steamer-react-redux-ts