tsbb
v4.4.1
เริ่มต้นอย่างรวดเร็ว·ตัวอย่าง·ความช่วยเหลือคำสั่ง· npm ·ใบอนุญาต
TSBB เป็นเครื่องมือ CLI สำหรับการพัฒนาการทดสอบและเผยแพร่โครงการพิมพ์ที่ทันสมัยด้วยการกำหนดค่าศูนย์และยังสามารถใช้สำหรับการพัฒนาโมดูลหรือปฏิกิริยาการพัฒนา
TypeScript + Babel = TSBB
โยกย้ายจาก TSBB 3.x เป็น 4.x
Featurestsbb test คุณจะต้องติดตั้ง Node.js ในระบบของคุณ
$ yarn create tsbb [appName]
# or npm
$ npm create tsbb@latest my-app -- -e express
# --- Example name ------┴ˇˇˇˇˇ
# or npx
$ npx create-tsbb@latest my-app -e koa
# npm 7+, extra double-dash is needed:
$ npm init tsbb my-app -- --example typenexus
# npm 6.x
$ npm init tsbb my-app --example typenexus
$ cd my-project
$ npm run watch # Listen compile .ts files.
$ npm run build # compile .ts files.
$ npm start1⃣การติดตั้งและการตั้งค่า
$ npm i -D microbundle 2⃣ตั้งค่า package.json :
{
"name" : " @pkg/basic " ,
"version" : " 1.0.0 " ,
"main" : " ./cjs/index.js " , // where to generate the CommonJS bundle
"module" : " ./esm/index.js " , // where to generate the ESM bundle
"exports" : {
"require" : " ./cjs/index.js " , // used for require() in Node 12+
"default" : " ./esm/index.js " // where to generate the modern bundle (see below)
},
"scripts" : {
"watch" : " tsbb watch " ,
"build" : " tsbb build --bail " ,
"test" : " tsbb test " ,
"coverage" : " tsbb test --coverage --bail "
},
"devDependencies" : {
"tsbb" : " 4.1.14 "
}
}3⃣ลองใช้งานด้วยการเรียกใช้ NPM Run Build
Create-TSBB เริ่มต้นโครงการจากหนึ่งในตัวอย่าง:
$ npx create-tsbb my-app -e < Example Name >
# --- E.g: ----------------┴ˇˇˇˇˇˇˇˇˇˇˇˇˇˇ
# npx create-tsbb my-app -e Basicคุณสามารถดาวน์โหลดตัวอย่างต่อไปนี้ได้โดยตรง หน้าดาวน์โหลด
basic - ตัวอย่างแอปพลิเคชันพื้นฐานของ node.jsbabel-transform-ts ตัวอย่างการแปลง Babel Transformexpress - ตัวอย่างแอปพลิเคชันพื้นฐานtypenexus - ตัวอย่างแอปพลิเคชันพื้นฐาน Express & Typeormkoa - ตัวอย่างแอปพลิเคชันฐาน KOAhapi - ตัวอย่างแอปพลิเคชันพื้นฐาน Hapireact-component - ตัวอย่างแอปพลิเคชันพื้นฐานส่วนประกอบของปฏิกิริยาreact-component-tsx ส่วนประกอบ React และแอปพลิเคชันพื้นฐานเว็บไซต์transform-typescript - กำหนดค่าตัวอย่างการกำหนดค่า Babel ใหม่umd - ตัวอย่างมัด UMDvue - เพื่อเพิ่มการสนับสนุน Vue 3 JSX ในการกำหนดค่า tsconfig.json อย่างถูกต้องคุณต้องกำหนดฟิลด์ include หรือ files เพื่อระบุไฟล์ที่ต้องรวบรวม เมื่อคุณทำเสร็จแล้วคุณสามารถระบุ outDir สำหรับไดเรกทอรีเอาต์พุตในการกำหนดค่า
{
"$schema" : "http://json.schemastore.org/tsconfig" ,
"compilerOptions" : {
"module" : "commonjs" ,
"target" : "esnext" ,
"outDir" : "./lib" ,
"strict" : true ,
"skipLibCheck" : true
} ,
"include" : [ "src/**/*" ] ,
"exclude" : [
"node_modules" ,
"**/*.spec.ts"
]
} หลังจากเสร็จสิ้นการกำหนดค่า tsconfig.jso คุณสามารถกำหนด ค่าสคริปต์ ใน package.json :
{
"scripts" : {
"watch" : "tsbb watch" ,
"build" : "tsbb build"
} ,
"devDependencies" : {
"tsbb" : "*"
}
} การเพิ่มพารามิเตอร์ --use-babel ลงในโครงการของคุณช่วยให้ Babel สามารถรวบรวมและส่งออกไฟล์ cjs / esm พร้อมกันในขณะที่ ts เป็นสิ่งจำเป็นสำหรับ ประเภท เอาต์พุตเท่านั้น
$ tsbb build " src/*ts " --use-babel คุณสามารถเปลี่ยนการตั้งค่าในตัวของ Babel โดยเพิ่มไฟล์กำหนดค่า. .babelrc นอกจากนี้คุณสามารถปรับเปลี่ยนการกำหนดค่า BABEL สำหรับ esm และ cjs แยกต่างหากผ่านตัวแปรสภาพแวดล้อม โปรดดูตัวอย่างด้านล่าง:
{
"env" : {
"cjs" : {
"presets" : [ "@babel/preset-typescript" ]
} ,
"esm" : {
"presets" : [ "@babel/preset-env" , {
"modules" : false ,
"loose" : true ,
"targets" : {
"esmodules" : true ,
} ,
} ]
}
}
} ในเวลาที่รวบรวมให้ระบุตัวแปรสภาพแวดล้อม --envName='xxx' เพื่อเปิดใช้งานการอ่านการกำหนดค่าที่เกี่ยวข้องจากการตั้งค่า ตัวแปรสภาพแวดล้อมนี้สามารถปรับแต่งได้
{
"env" : {
"xxx" : { ... }
}
} ด้านล่างนี้เป็นความช่วยเหลือของคำสั่งที่คุณอาจพบว่ามีประโยชน์
tsbb ▶ tsbb --help
Usage: tsbb < command >
Commands:
tsbb build [source…] [options] Build your project once and exit.
tsbb watch [source…] [options] Recompile files on changes.
tsbb test [options] Run jest test runner in watch mode.
tsbb copy | cpy < source … > [options] Copy files.
Options:[build | watch]
--bail Exit the compile as soon as the compile fails(default: true).
--use-babel Use Babel.(works in babel)
--source-maps Enables the generation of sourcemap files.(works in babel)
--env-name The current active environment used during configuration loading.(works in babel)
--esm Output " esm " directory.(works in babel)
--cjs Output " cjs " directory.(works in babel)
--use-vue Supports " Vue3 " , requires " --use-babel " to be used together.
Options:
--version, -v Show version number
--help, -h Show help
Examples:
$ tsbb build src/ * .ts Build your project.
$ tsbb build src/main.ts src/good.ts Specify the entry directory.
$ tsbb build src/ * .ts --use-babel --no-source-maps No " .js.map " file is generated. (works in babel)
$ tsbb watch src/ * .ts --use-babel --cjs ./cjs Watch Output directory.
$ tsbb build src/ * .ts --use-babel --esm ./es Output directory.
$ tsbb build src/ * .ts --use-babel --use-vue To add Vue JSX support.
$ tsbb test Run test suites related
$ tsbb test --coverage --bail Test coverage information should be collected
$ tsbb copy ' src/*.png ' ' !src/goat.png ' --output dist Copy files.
$ tsbb copy ' src/*.png ' ' src/goat.{js,d.ts} ' --output dist --watch
Copyright 2023
tsbb createโปรดใช้ Create-TSBB เพื่อสร้างตัวอย่าง
tsbb testรัน Test Watcher (jest) ในโหมดการโต้ตอบ
$ tsbb test Run test suites related
$ tsbb test --coverage --no-color Test coverage information should be collected export declare type Argv = Arguments < Partial < {
all : boolean ;
automock : boolean ;
bail : boolean | number ;
cache : boolean ;
cacheDirectory : string ;
changedFilesWithAncestor : boolean ;
changedSince : string ;
ci : boolean ;
clearCache : boolean ;
clearMocks : boolean ;
collectCoverage : boolean ;
collectCoverageFrom : string ;
collectCoverageOnlyFrom : Array < string > ;
color : boolean ;
colors : boolean ;
config : string ;
coverage : boolean ;
coverageDirectory : string ;
coveragePathIgnorePatterns : Array < string > ;
coverageReporters : Array < string > ;
coverageThreshold : string ;
debug : boolean ;
env : string ;
expand : boolean ;
findRelatedTests : boolean ;
forceExit : boolean ;
globals : string ;
globalSetup : string | null | undefined ;
globalTeardown : string | null | undefined ;
haste : string ;
init : boolean ;
injectGlobals : boolean ;
json : boolean ;
lastCommit : boolean ;
logHeapUsage : boolean ;
maxWorkers : number | string ;
moduleDirectories : Array < string > ;
moduleFileExtensions : Array < string > ;
moduleNameMapper : string ;
modulePathIgnorePatterns : Array < string > ;
modulePaths : Array < string > ;
noStackTrace : boolean ;
notify : boolean ;
notifyMode : string ;
onlyChanged : boolean ;
onlyFailures : boolean ;
outputFile : string ;
preset : string | null | undefined ;
projects : Array < string > ;
prettierPath : string | null | undefined ;
resetMocks : boolean ;
resetModules : boolean ;
resolver : string | null | undefined ;
restoreMocks : boolean ;
rootDir : string ;
roots : Array < string > ;
runInBand : boolean ;
selectProjects : Array < string > ;
setupFiles : Array < string > ;
setupFilesAfterEnv : Array < string > ;
showConfig : boolean ;
silent : boolean ;
snapshotSerializers : Array < string > ;
testEnvironment : string ;
testFailureExitCode : string | null | undefined ;
testMatch : Array < string > ;
testNamePattern : string ;
testPathIgnorePatterns : Array < string > ;
testPathPattern : Array < string > ;
testRegex : string | Array < string > ;
testResultsProcessor : string ;
testRunner : string ;
testSequencer : string ;
testURL : string ;
testTimeout : number | null | undefined ;
timers : string ;
transform : string ;
transformIgnorePatterns : Array < string > ;
unmockedModulePathPatterns : Array < string > | null | undefined ;
updateSnapshot : boolean ;
useStderr : boolean ;
verbose : boolean ;
version : boolean ;
watch : boolean ;
watchAll : boolean ;
watchman : boolean ;
watchPathIgnorePatterns : Array < string > ;
} > > ; $ npm i
$ npm run buildเช่นเคยขอบคุณผู้มีส่วนร่วมที่น่าทึ่งของเรา!
ทำกับผู้มีส่วนร่วม
MIT © Kenny Wong
