ts react vite_or_webpack ดาวน์โหลด - ts react vite_or_webpack ดาวน์โหลดซอร์สโค้ด

ts react vite_or_webpack

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

มีตัวอย่างการใช้งาน webpack

นี่เป็นการเริ่มต้นแบบง่ายๆ (ผู้ดูแลระบบ) พร้อมด้วย typescript, react และ vite

ดูอย่างรวดเร็ว:

การตั้งค่า

สำหรับแหบแห้ง

$ npm run prepare

หากคุณไม่ต้องการรีจิสทรี taobao คุณสามารถเปลี่ยนได้ใน .npmrc

$ npm i

ทดสอบ

$ npm test

สร้างเพื่อการพัฒนา

$ npm run dev

สร้างเพื่อการผลิต

$ npm run build:(qa/prod)

ลักษณะเฉพาะ

ใช้การออกแบบมดเป็นกรอบงาน UI
ใช้ ServiceWorker
ใช้ตะขอ husky{pre-commit/commit-msg}
ใช้ react-intl-universal สำหรับ i18n
ใช้ react-virtualized สำหรับรายการไขมัน

หน้า

หน้าดัชนีกลายเป็น Socket Debugger

สิ่งที่ต้องทำ

เมนูกำหนดค่าโดยผู้ใช้ที่ได้รับอนุญาต
หน้าที่ใช้งานได้มากขึ้น เช่น 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;
       }
 }