Unduh tsbb - Unduh Kode Sumber tsbb

Mulai Cepat · Contoh · Perintah Bantuan · NPM · Lisensi

TSBB adalah alat CLI untuk mengembangkan, menguji, dan menerbitkan proyek naskah modern dengan nol konfigurasi, dan juga dapat digunakan untuk pengembangan komponen modul atau reaksi.

TypeScript + Babel = TSBB

Migrasi dari TSBB 3.x ke 4.x.

`Features`

Konfigurasi nol ketergantungan tunggal
⏱ Inisialisasi cepat dari contoh proyek dan memasuki mode pengembangan
♻️ Kompilasi ulang kode otomatis saat file ditambahkan, dimodifikasi, atau dihapus
Kode sumber yang dapat dibaca yang mendorong pembelajaran dan kontribusi
Kecepatan kompilasi yang lebih cepat
⚛️ Dukungan untuk kompilasi komponen React and Vue 3
⛑ Pengaturan Runner Tes Jest dengan default tsbb test

Awal yang cepat

Anda akan memerlukan Node.js yang diinstal pada sistem Anda.

$ 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️⃣ Instalasi & Pengaturan

$ npm i -D microbundle

2️⃣ Siapkan package.json Anda.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️⃣ Cobalah dengan menjalankan NPM Run Build.

Contoh

create-tsbb menginisialisasi proyek dari salah satu contoh:

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

Anda dapat mengunduh contoh -contoh berikut secara langsung. Halaman unduh.

basic - Contoh Aplikasi Basis Node.js.
babel-transform-ts -Contoh TypeScript Transform Babel.
express - Contoh Aplikasi Basis Ekspres.
typenexus - Contoh Aplikasi Basis Express & Typeorm.
koa - Contoh aplikasi dasar KOA.
hapi - Contoh Aplikasi Basis HAPI.
react-component - Contoh aplikasi dasar komponen reaksi.
react-component-tsx -Contoh Aplikasi Basis React dan Situs Web.
transform-typescript - Konfigurasikan ulang contoh konfigurasi babel.
umd - Contoh Bundel UMD.
vue - Untuk menambahkan dukungan Vue 3 JSX.

Proyek naskah

Untuk mengonfigurasi tsconfig.json dengan benar, Anda harus terlebih dahulu mendefinisikan bidang include atau files untuk menentukan file mana yang perlu dikompilasi. Setelah Anda melakukannya, Anda kemudian dapat menentukan outDir untuk direktori output dalam konfigurasi.

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

Setelah menyelesaikan konfigurasi tsconfig.jso , Anda dapat mengonfigurasi skrip di package.json :

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

Proyek Babel

Menambahkan parameter --use-babel ke proyek Anda memungkinkan Babel untuk mengkompilasi dan mengeluarkan file cjs / esm secara bersamaan, sementara ts hanya diperlukan untuk output jenis .

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

Anda dapat mengubah pengaturan bawaan Babel dengan menambahkan file konfigurasi .babelrc . Selain itu, Anda dapat memodifikasi konfigurasi Babel untuk esm dan cjs secara terpisah melalui variabel lingkungan. Silakan merujuk ke contoh di bawah ini:

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

Pada waktu kompilasi, tentukan variabel lingkungan --envName='xxx' untuk memungkinkan membaca konfigurasi yang relevan dari pengaturan. Variabel lingkungan ini juga dapat disesuaikan.

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

Perintah Bantuan

Di bawah ini adalah bantuan perintah yang mungkin Anda temukan berguna.

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

Harap gunakan Create-TSBB untuk membuat contoh.

`tsbb test`

Menjalankan Test Watcher (JEST) dalam mode interaktif.

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