tsbb
v4.4.1
Быстрый запуск · Пример · справка команды · NPM · Лицензия
TSBB - это инструмент CLI для разработки, тестирования и публикации современных проектов TypeScript с нулевой конфигурацией, а также может использоваться для разработки модулей или компонентов React.
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.
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 -Пример тирогопродажа вабеля.express - пример Express Base Application.typenexus - пример базового приложения Express & Typeorm.koa - пример базового приложения KOA.hapi - пример базового приложения HAPI.react-component - пример базового приложения RAGE Component.react-component-tsx -пример базового приложения REACT и базового приложения веб-сайтов.transform-typescript - Реконфигурирование примера конфигурации Babel.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 вы можете настроить Scripts in 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
