tsbb
v4.4.1
Démarrage rapide · Exemple · Aide à la commande · NPM · Licence
TSBB est un outil CLI pour développer, tester et publier des projets de typescript modernes avec une configuration zéro, et peut également être utilisé pour le développement de composants de modules ou de réaction.
TypeScript + Babel = TSBB
Migrez de TSBB 3.x vers 4.x.
Featurestsbb test Vous aurez besoin Node.js installés sur votre système.
$ 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️⃣ Installation et configuration
$ npm i -D microbundle 2️⃣ Configurez votre 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️⃣ Essayez-le en exécutant NPM Run Build.
create-tsbb Initialisez le projet à partir de l'un des exemples:
$ npx create-tsbb my-app -e < Example Name >
# --- E.g: ----------------┴ˇˇˇˇˇˇˇˇˇˇˇˇˇˇ
# npx create-tsbb my-app -e BasicVous pouvez télécharger directement les exemples suivants. Page de téléchargement.
basic - L'exemple d'application de base Node.js.babel-transform-ts - Babel Transform TypeScript Exemple.express - L'exemple d'application de base express.typenexus - L'exemple d'application de base Express & Typeorm.koa - L'exemple d'application de base KOA.hapi - L'exemple d'application de base HAPI.react-component - L'exemple d'application de base de composant React.react-component-tsx - Le composant React et l'exemple de l'application de base de site Web.transform-typescript - reconfigurer l'exemple de configuration de Babel.umd - UMD Bundle.vue - Pour ajouter le support JSX de Vue 3. Pour configurer correctement le tsconfig.json , vous devez d'abord définir le ou les champs include ou files pour spécifier quels fichiers doivent être compilés. Une fois que vous avez fait cela, vous pouvez ensuite spécifier l' outDir pour le répertoire de sortie dans la configuration.
{
"$schema" : "http://json.schemastore.org/tsconfig" ,
"compilerOptions" : {
"module" : "commonjs" ,
"target" : "esnext" ,
"outDir" : "./lib" ,
"strict" : true ,
"skipLibCheck" : true
} ,
"include" : [ "src/**/*" ] ,
"exclude" : [
"node_modules" ,
"**/*.spec.ts"
]
} Après avoir terminé la configuration tsconfig.jso , vous pouvez configurer des scripts dans package.json :
{
"scripts" : {
"watch" : "tsbb watch" ,
"build" : "tsbb build"
} ,
"devDependencies" : {
"tsbb" : "*"
}
} L'ajout du paramètre --use-babel à votre projet permet à Babel de compiler et de sortir simultanément les fichiers cjs / esm , tandis que ts n'est nécessaire que pour la sortie de type .
$ tsbb build " src/*ts " --use-babel Vous pouvez modifier les paramètres intégrés de Babel en ajoutant un fichier de configuration .babelrc . De plus, vous pouvez modifier séparément les configurations BABEL pour esm et cjs via des variables d'environnement. Veuillez vous référer à l'exemple ci-dessous:
{
"env" : {
"cjs" : {
"presets" : [ "@babel/preset-typescript" ]
} ,
"esm" : {
"presets" : [ "@babel/preset-env" , {
"modules" : false ,
"loose" : true ,
"targets" : {
"esmodules" : true ,
} ,
} ]
}
}
} Au moment de la compilation, spécifiez la variable d'environnement --envName='xxx' pour permettre la lecture des configurations pertinentes à partir des paramètres. Cette variable d'environnement peut également être personnalisée.
{
"env" : {
"xxx" : { ... }
}
} Vous trouverez ci-dessous une aide des commandes que vous pourriez trouver utiles.
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 createVeuillez utiliser Create-Tsbb pour créer un exemple.
tsbb testExécute le Test Watcher (JEST) dans un mode interactif.
$ 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 buildComme toujours, grâce à nos incroyables contributeurs!
Fait avec des contributeurs.
MIT © Kenny Wong
