tsbb Download - tsbb Quellcode Download

Schnellstart · Beispiel · Befehlshilfe · NPM · Lizenz

TSBB ist ein CLI -Tool zum Entwickeln, Testen und Veröffentlichen moderner Typenkriptprojekte mit Null -Konfiguration und kann auch für die Entwicklung von Modul oder React -Komponenten verwendet werden.

TypeScript + Babel = TSBB

Migrieren Sie von TSBB 3.x bis 4.x.

`Features`

Einzelabhängigkeit Zero-Konfiguration
⏱ Schnelle Initialisierung von Beispielprojekten und Eingabe des Entwicklungsmodus
♻️ Automatische Neukompilierung von Code, wenn Dateien hinzugefügt, geändert oder entfernt werden
Lesbarer Quellcode, der Lernen und Beitrag fördert
Schnellere Kompilierungsgeschwindigkeiten
⚛️ Unterstützung für React- und Vue 3 -Komponenten zusammenstellen
⛑ Scherz -Testläufer -Setup mit Standardeinstellungen des tsbb test

Schneller Start

Sie benötigen Node.js auf Ihrem System installiert.

$ 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 start

1️⃣ Installation & Setup

$ npm i -D microbundle

2️⃣ Richten Sie Ihr package.json ein. 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️⃣ Probieren Sie es aus, indem Sie NPM Run Build ausführen.

Beispiel

Erstellen Sie-TSBB Initialisieren Sie das Projekt aus einem der Beispiele:

$ npx create-tsbb my-app -e < Example Name >
# --- E.g: ----------------┴ˇˇˇˇˇˇˇˇˇˇˇˇˇˇ
# npx create-tsbb my-app -e Basic

Sie können die folgenden Beispiele direkt herunterladen. Seite herunterladen.

basic - Das Beispiel der Node.js -Basisanwendung.
babel-transform-ts Babel-Transformation TypeScript-Beispiel.
express - Das Beispiel für Express -Basisanwendungen.
typenexus - Das Beispiel für Express & Typorm -Basisanwendungen.
koa - Das Beispiel für KOA -Basisanwendungen.
hapi - Das Beispiel für HAPI -Basisanwendungen.
react-component - Beispiel für die Anwendung von React -Komponenten.
react-component-tsx -Beispiel für React-Komponente und Website-Basisanwendung.
transform-typescript - Das Babel -Konfigurationsbeispiel neu konfigurieren.
umd - UMD -Bundle -Beispiel.
vue - Um Vue 3 JSX -Unterstützung hinzuzufügen.

TypeScript -Projekt

Um den ordnungsgemäßen tsconfig.json zu konfigurieren, müssen Sie zunächst entweder das Feld include oder files definieren, um anzugeben, welche Dateien kompiliert werden müssen. Sobald Sie dies getan haben, können Sie den outDir für das Ausgabeverzeichnis in der Konfiguration angeben.

 {
  "$schema" : "http://json.schemastore.org/tsconfig" ,
  "compilerOptions" : {
    "module" : "commonjs" ,
    "target" : "esnext" ,
    "outDir" : "./lib" ,
    "strict" : true ,
    "skipLibCheck" : true
  } ,
  "include" : [ "src/**/*" ] ,
  "exclude" : [
    "node_modules" ,
    "**/*.spec.ts"
  ]
}

Nach Abschluss tsconfig.jso -Konfiguration können Sie Skripte in package.json konfigurieren:

 {
  "scripts" : {
    "watch" : "tsbb watch" ,
    "build" : "tsbb build"
  } ,
  "devDependencies" : {
    "tsbb" : "*"
  }
}

Babel -Projekt

Durch das Hinzufügen des Parameters --use-babel zu Ihrem Projekt kann Babel cjs / esm -Dateien gleichzeitig kompilieren und ausgeben, während ts nur für die Typausgabe benötigt wird.

$ tsbb build " src/*ts " --use-babel

Sie können die integrierten Einstellungen von Babel ändern, indem Sie eine .babelrc Konfigurationsdatei hinzufügen. Darüber hinaus können Sie die Babel -Konfigurationen für esm und cjs durch Umgebungsvariablen separat ändern. Bitte beachten Sie das folgende Beispiel:

 {
  "env" : {
    "cjs" : {
      "presets" : [ "@babel/preset-typescript" ]
    } ,
    "esm" : {
      "presets" : [ "@babel/preset-env" , {
        "modules" : false ,
        "loose" : true ,
        "targets" : {
          "esmodules" : true ,
        } ,
      } ]
    }
  } 
}

Geben Sie zur Kompilierungszeit die Umgebungsvariable --envName='xxx' um das Lesen relevanter Konfigurationen aus den Einstellungen zu ermöglichen. Diese Umgebungsvariable kann auch angepasst werden.

 {
  "env" : {
    "xxx" : { ... }
  } 
}

Befehlshilfe

Im Folgenden finden Sie eine Hilfe von Befehlen, die Sie möglicherweise nützlich finden.

`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`

Bitte verwenden Sie Create-TSBB, um ein Beispiel zu erstellen.

`tsbb test`

Führt den Testwächter (Scherz) in einem interaktiven Modus aus.

$ 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 > ;
} > > ;