tsbb
v4.4.1
빠른 시작 · 예제 · 명령 help · npm · 라이센스
TSBB는 구성이없는 최신 타입 스크립트 프로젝트를 개발, 테스트 및 게시하기위한 CLI 도구이며 모듈 또는 React 구성 요소 개발에도 사용할 수 있습니다.
TypeScript + Babel = TSBB
TSBB 3.X에서 4.X로 마이그레이션하십시오.
Featurestsbb test 의 기본값을 사용한 Jest 테스트 러너 설정 시스템에 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 19 년 설치 및 설정
$ 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️ running NPM 실행 빌드를 실행하여 시도해보십시오.
Create-TSBB 예제 중 하나에서 프로젝트를 초기화합니다.
$ npx create-tsbb my-app -e < Example Name >
# --- E.g: ----------------┴ˇˇˇˇˇˇˇˇˇˇˇˇˇˇ
# npx create-tsbb my-app -e Basic다음 예제를 직접 다운로드 할 수 있습니다. 페이지 다운로드.
basic - node.js 기본 응용 프로그램 예제.babel-transform-ts Babel 변환 TypeScript 예제.express Express Base 응용 프로그램 예제.typenexus Express & Typeorm Base Application 예제.koa KOA 기본 응용 프로그램 예제.hapi HAPI 기본 응용 프로그램 예제.react-component 반응 구성 요소베이스 애플리케이션 예제.react-component-tsx React 구성 요소 및 웹 사이트 기반 응용 프로그램 예제.transform-typescript 바벨 구성 예제를 재구성합니다.umd UMD 번들 예제.vue 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 .babelrc 구성 파일을 추가하여 바벨의 내장 설정을 변경할 수 있습니다. 또한 환경 변수를 통해 esm 및 cjs 의 Babel 구성을 개별적으로 수정할 수 있습니다. 아래 예를 참조하십시오.
{
"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 createCreate-TSBB를 사용하여 예제를 작성하십시오.
tsbb test대화식 모드에서 테스트 감시자 (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
