ts react vite_or_webpack

Es gibt ein Beispiel für ein Use-Webpack

Dies ist ein einfacher (Admin-)Starter mit Typescript, React und Vite.

Werfen Sie einen kurzen Blick darauf:

aufstellen

für Husky

$ npm run prepare

Wenn Sie die Taobao-Registrierung nicht benötigen, können Sie sie in .npmrc ändern

$ npm i

prüfen

$ npm test 

für die Entwicklung bauen

$ npm run dev

für die Produktion bauen

$ npm run build:(qa/prod)

Eigenschaften

• Verwenden Sie Ant Design als UI-Framework
• Verwenden Sie ServiceWorker
• Verwenden Sie husky{pre-commit/commit-msg}-Hooks
• Verwenden Sie „react-intl-universal“ für i18n.
• Verwenden Sie React-Virtualized für Fat List.

Seiten

• Die Indexseite wurde zu einem Socket-Debugger

TODO

• Konfigurationsmenü durch Benutzer mit Erlaubnis
• funktionale Seiten wie Socket Debugger

Komponentenbeispiel

 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 )

Live-Beispiel

notwendige Erweiterungen (auf vscode)

• ESLint

• stylelint

• Prettier – Codeformatierer

So laden Sie eine Datei auf den Server hoch

 #! /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 

wie man mit Nginx bereitstellt

 server {
       listen       9993 ;
       server_name  localhost:9993;

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

das Gerüst

Steamer-React-Redux-ts