tsbb
v4.4.1
بداية سريعة · مثال · تعليمات الأوامر · NPM · ترخيص
TSBB هي أداة CLI لتطوير واختبار ونشر مشاريع النماذج الحديثة مع تكوين صفري ، ويمكن استخدامها أيضًا لتطوير مكون الوحدة النمطية أو رد الفعل.
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 الخاصة بك. 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 Run Build.
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 Transform TypeScript مثال.express - مثال تطبيق القاعدة السريعة.typenexus - مثال تطبيق قاعدة Express & Typeorm.koa - مثال تطبيق قاعدة KOA.hapi - مثال تطبيق قاعدة HAPI.react-component - مثال تطبيق قاعدة 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 إلى مشروعك إلى تمكين بابل من تجميع وإخراج ملفات 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يدير مراقب الاختبار (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
