tinybuild
1.0.0
npm i -g tinybuild أو npm i tinybuild في المشاريع المحلية.
يرجى المساهمة إذا كنت مهتمًا بهذا للحصول على أتمتة سير العمل الخاصة بك ، حاليًا نقوم بتحريرها ونرسلها وإصلاحها على أساس تطورنا الخاص ، لذلك لا يوجد أي عنصر تحكم على الإطلاق ، لكننا نبذل قصارى جهدنا لجعله متعدد الاستخدامات قدر الإمكان.
 |  |  |  |  |
هذا هو التحرير والسرد الخادم الحزم الذي تريده دائمًا. وداعا التعليمات الباطنية ، وداعا التبعيات غير العملية ، وداعا الوقت الضائع يحدق في المترجم الخاص بك في الركض! تحرك فوق Webpack و Parcel و Vite ، هناك لعبة جديدة في المدينة.
المتطلبات الأساسية: أحدث Nodejs LTS
npm i -g tinybuild
tinybuild
أنت مستعد لتطوير تطبيقاتك أو مكتباتك!
تعديل tinybuild.config.js و package.json لاحتياجاتك. يمكنك إضافة build:true أو Set server:false في التكوين لتعطيل خادم التطوير.
يعمل TinyBuild أيضًا كإثارة محلية على سبيل المثال npx tinybuild أو تنفيذ البرنامج النصي Packager عبر Node.js في برنامج نصي مخصص. راجع المستندات لمزيد من التفاصيل وتحقق من رمز المصدر.
تتضمن المسبقة المسبقة للمحكم والخادم ملف CLI أو ملف التكوين الكامل أو غلاف وظيفي (في النصف) لتخصيص ESBuild وتخصيص الخادم ، ولإنشاء توزيعات متعددة من تكوين واحد (على سبيل المثال للمتصفح ، ESM ، العقدة). الحزم ويقدم المكتبات والبرامج المعقدة بالميلي ثانية مع بيئة اختبار إعادة التحميل الساخنة ، ويجعل من السهل توسيع نطاق الإنتاج.
في مجلد مشروع مع npm init .
إنشاء ملف tinybuild.config.js مثل SO (نسخ/لصق أو TinyBuild يمكن أن يولد واحد لك عن طريق التشغيل ببساطة):
//import {defaultBundler, defaultServer, packager} from 'tinybuild'
const config = {
//build:true, //enable this to skip serve step (same as cli)
//serve:true //or enable this to skip build step (same as cli)
bundler : { //esbuild settings, set false to skip build step or add bundle:true to config object to only bundle (alt methods)
entryPoints : [ //entry point file(s). These can include .js, .mjs, .ts, .jsx, .tsx, or other javascript files. Make sure your entry point is a ts file if you want to generate types
"index.js"
] ,
outfile : "dist/index" , //exit point file, will append .js as well as indicators like .esm.js, .node.js for other build flags
//outdir:'dist' //exit point folder, define for multiple entryPoints
bundleBrowser : true , //create plain js build? Can include globals and init scripts
bundleESM : false , //create esm module js files // { platform:'node' } //etc you can also supply an object here to add more specific esbuild settings
bundleTypes : false , //create .d.ts files, //you need a .tsconfig for this to work, tinybuild will create one for you when you set this true, however, and has typescript support built in
bundleNode : false , //create node platform plain js build, specify platform:'node' to do the rest of the files
bundleHTML : false , //wrap the first entry point file as a plain js script in a boilerplate html file, frontend scripts can be run standalone like a .exe! Server serves this as start page if set to true.
//bundleIIFE:false, //create an iife build, this is compiled temporarily to create the types files and only saved with bundleIIFE:true
//bundleCommonJS:false, //cjs format outputted as .cjs
minify : true ,
sourcemap : false ,
//plugins:[] //custom esbuild plugins? e.g. esbuild-sass-plugin for scss support
//includeDefaultPlugins:true //true by default, includes the presets for the streaming imports, worker bundling, and auto npm install
//blobWorkers:true, //package workers as blobs or files? blobs are faster but inflate the main package size
//workerBundler:{minifyWhitespace:true} //bundler settings specific to the worker. e.g. apply platform:'node' when bundling node workers, default is minifyWhitespace:true as full minifying may cause unforeseen errors
//globalThis:null //'mymodule'
//globals:{'index.js':['Graph']}
//init:{'index.js':function(bundle) { console.log('prepackaged bundle script!', bundle); }.toString(); }
// outputs:{ //overwrites main config settings for specific use cases
// node:{ //e.g. for bundleNode
// // external:[] //externals for node environment builds
// },
// //commonjs:{} //bundleCommonJS
// //browser:{}
// //esm:{}
// iife:{
// // external:[] //we only use the iife for types so it doesn't really matter if it bundles node, just note otherwise if you need iife for some obscure reason
// }
// },
//refer to esbuild docs for more settings
} ,
server : { //node server settings, set false to skip server step or add serve:true to config object to only serve (alt methods)
debug : false ,
protocol : "http" , //'http' or 'https'. HTTPS required for Nodejs <---> Python sockets. If using http, set production to False in python/server.py as well
host : "localhost" , //'localhost' or '127.0.0.1' etc.
port : 8080 , //e.g. port 80, 443, 8000
//redirect: 'http://localhost:8082' //instead of serving the default content, redirect ot another url
//headers: { 'Content-Security-Policy': '*' }, //global header overrides
startpage : 'index.html' , //default home page/app entry point
/*
routes:{ //set additional page routes (for sites instead of single page applications)
'/page2': 'mypage.html',
'/custom':{ //e.g. custom page template
headers: { 'Content-Security-Policy': '*' }, //page specific headers
template:'<html><head></head><body><div>Hello World!</div></body></html>'
//path: 'mypage.html' //or a file path (e.g. plus specific headers)
},
'/redirect':{ //e.g. custom redirect
redirect:'https://google.com'
},
'/other':(request,response) => {}, //custom request/response handling
'/': 'index.html', //alt start page declaration
'/404':'packager/node_server/other/404.html', //e.g. custom error page
},
*/
socket_protocol : "ws" , //frontend socket protocol, wss for served, ws for localhost
hotreload : 5000 , //hotreload websocket server port
//reloadscripts: false, //hot swap scripts, can break things if script handles initializations, otherwise css, link, srcs all hot swap without page reloading fairly intelligently
//delay: 50, //millisecond delay on the watch command for hot reloading
//pwa: "service-worker.js", //pwa mode? Injects service worker webpage code to live site, will create a service worker and webmanifest for you if not existent
//watch: ['../'], //watch additional directories other than the current working directory
//python: false,//7000, //quart server port (configured via the python server script file still)
//python_node:7001, //websocket relay port (relays messages to client from nodejs that were sent to it by python)
errpage : 'node_modules/tinybuild/tinybuild/node_server/other/404.html' , //default error page, etc.
certpath : 'node_modules/tinybuild/tinybuild/node_server/ssl/cert.pem' , //if using https, this is required. See cert.pfx.md for instructions
keypath : 'node_modules/tinybuild/tinybuild/node_server/ssl/key.pem' //if using https, this is required. See cert.pfx.md for instructions
} ,
// electron:true //desktop apps as a full chromium bundle, not small and needs some customization for things like bluetooth menus. Better for full featured applications. Can trigger backend runtimes on local machines.
/*mobile:{ //this will copy the dist and index.html to capacitor builds that can create small interoperable javascript webview + native functionality (e.g. bluetooth) mobile apps (~2Mb at minimum).
//android:'open', //'open'//true //Requires Android Studio, it will be launched
//ios:false //'open'//true //Requires XCode
}, */
//tauri:true, //alternative tauri build options for very minimal native engine desktop apps that generally lack the latest web APIs. Good for simple apps, you can bundle it with backend runtimes on local machines.
/*
assets:[ //for the mobile/desktop bundlers to copy into their respective folders
'./assets',
'./favicon.ico'
]
*/
}
export default config ; ثم قم بتشغيل tinybuild لتزويد هذا إلى Packager لبناء وتشغيل مشروعك. تخصيصه لاحتياجاتك ، على سبيل المثال لنقاط الدخول المختلفة وحالات الاستخدام. يتم التعرف على TypeScript تلقائيًا ، بما في ذلك JSX و TSX. يتم تجميع CSS تلقائيًا إذا قمت باستيرادها في البرامج النصية في مكان ما. انظر أمثلة للمزيد.
لاستخدام TinyBuild محليًا ( npm install مقابل npm install -g ) ، يجب عليك استيراد وتشغيل packager(config) من مكتبة TinyBuild بنفسك ، وتشغيله في ملف نصي.
إنشاء TinyBuild.js في جذر دليل المشروع الخاص بك
import { packager } from 'tinybuild'
import config from './tinybuild.config.js'
packager ( config ) ; ثم في وحدة التحكم من دليل المشروع هذا Run node tinybuild.js
على سبيل المثال ، tinybuild build أو tinybuild serve على تشغيل أوامر معزولة
tinybuild help يسرد الحجج المقبولة ، انظر Boilerplate تم إنشاؤها في الريبو الجديد للمزيد. سيستخدم أمر tinybuild الخاص بك tinybuild.config.js أو tinybuild.js (والذي يتضمن المكتبة وينفذ الحزمة مع Bundler و/أو الخادم نفسه لمزيد من التحكم) ملف التكوين بعد التهيئة حتى تتمكن من استخدامه بشكل عام ، وإلا رؤية package.json لمزيد من الأوامر المحلية.
القيادة العالمية:
tinybuild - يقوم بتشغيل إعدادات خادم BoilerPlate TinyBuild Bundler + في دليل العمل الحالي. سيؤدي ذلك إلى إنشاء INDEX.JS المفقود ، Package.json (مع تثبيت NPM/YARN التلقائي) ، و TinyBuild.js ، ويقدم مع المجلدات المراقبة في دليل العمل (ناقص node_modules لأنه يبطئ) لإعادة التحميل الساخن.القيادة المحلية:
node path/to/tinybuild.js - سيستخدم دليل العمل الحالي كمرجع لتشغيل هذا التهيئةstart - يدير ما يعادل node tinybuild.js في دليل العمل الحالي.build / bundle - يقوم بتشغيل Bundler Esbuild ، ويمكنه تحديد config مع config={"bundler":{}} عبر كائن jsonifiedserve - يقوم بتشغيل خادم تطوير العقدة ، ويمكن تحديد config باستخدام config={"server":{}} عبر كائن وكائن Jsonifiedmode=python - يقوم بتشغيل خادم التطوير وكذلك Python الذي يخدم أيضًا DIST من منفذ منفصل (7000 افتراضيًا).mode=dev لوضع خادم DEV (المستخدم افتراضيًا إذا كنت فقط كتابة tinybuild على Boilerplate)path=custom.js - استهدف ملف إدخال TinyBuild.js مكافئ مخصص (لتشغيل الحزمة أو Bundler/Server) ST` - اسم المضيف للخادم ، LocalHost افتراضيًاentryPoints=index.js - تعيين نقطة إدخال للنص الخاص بك ، يمكن أن تكون أيضًا مجموعة من الأوتار.outfile=dist/index - اضبط دليل الإخراج واسم الملف (ناقص اسم التمديد)outdir=dist - بدلاً من ذلك ، استخدم Outdir عند استخدام نقاط دخول متعددةbundleBrowser=true إنتاج حزمة .js عادية هي ملائمة للمتصفح ، صحيح بشكل افتراضي.bundleESM=false - تنتج حزمة وحدة ESM ، كاذبة بشكل افتراضي ، سيتم تحديدها بواسطة .esm.jsbundleTypes=false - ملفات .D.TS ، False بشكل افتراضي ، تحتاج نقطة الدخول إلى ملف TypeScript ولكنها ستحاول إنشاء أنواع لملفات JS في الريبو خلاف ذلك. يتم تنظيم الملفات مثل الريبو الخاص بك في مجلد DIST المستخدم.bundleNode=false - قم بإنشاء مجموعة حزمة منفصلة لتشمل تبعيات العقدة. حددها .node.jsbundleHTML=true - حزمة Boilerplate HTML التي تلتف وتنفيذ حزمة المتصفح كاختبار سريع. إذا كان الأمر صحيحًا ، فسيقوم الأمر Packager بتعيين هذا الملف كـ startPage ، وإلا فإن لديك index.html يمكنك تخصيصها واستخدامها والتي لها نفس Boilerplate. العثور على eg index.build.html في dist.external=['node-fetch'] -mark externals في repo الخاص بك ، يتم استخدام node-legh في الكثير من عملنا بحيث يكون هناك افتراضيًا ، فإن حزمة العقدة لها استثمارها (انظر خيارات esbuild الخاصة بنا في ReadMe)platform=browser تستخدم حزم غير العقدة المتصفح افتراضيًا ، تم تعيينها على Node لجعل جميع الحزم تستهدف منصة العقدة. يجب تعيين العوامل الخارجية بشكل مناسب.globalThis=myCustomBundle - يمكنك تعيين أي صادرات على نقاط الدخول الخاصة بك على إعداد BundleBrowser ليكون متاحًا كمتغير عالمي. لم يتم تعيينه بشكل افتراضي.globals={[entryPoint]:['myFunction']} - يمكنك تحديد أي وظائف إضافية ، فئات ، متغيرات ، إلخ. تم تصديرها من حزمةك ليتم تثبيتها على أنها كرات على إعداد BundleBrowser.host=localhost - اضبط اسم المضيف للخادم ، LocalHost افتراضيًا. يمكنك تعيينه على عنوان URL أو عنوان IP للخادم عند الخدمة. عموما استخدم المنفذ 80 عند التقديم.port=8080 - منفذ الخادم ، 8080 افتراضيًاprotocol=http - http أو https؟ تحتاج إلى SSL CERT ومفتاح تشغيل HTTPSpython=7000 - منفذ لخادم Python بحيث يمكن لخادم Node إرسال إشارة قتل ، 7000 افتراضيًا. قم بتشغيل خادم Python بشكل متزامن أو استخدم mode=pythonhotreload=5000 - منفذ HotReload لخادم العقدة ، 5000 افتراضيًاwatch=../../path/to/other/src أو watch=['path/to/src1','src2','.xml'] - شاهد المجلدات والإضافات الإضافيةextensions=xml,3ds أو extensions=['xml','3ds'] شاهد امتدادات محددة للتغييراتignore=../../path/to/other/src,path2/src2 أو ignore=['path/to/src1','../path2/src2'] - تجاهل الملفات والمجلداتstartpage=index.html - صفحة html الإدخال للصفحة/'، index.html بشكل افتراضيcertpath=tinybuild/node_server/ssl/cert.pem - ملف cert لـ httpskeypath=tinybuild/node_server/ssl/key.pem - ملف المفتاح لـ httpspwa=tinybuild/pwa/workbox-config.js تكوين عامل الخدمة لـ PWA باستخدام Workbox-Cli (تم تثبيته بشكل منفصل عبر package.json)config="{"server":{},"bundler":{}}" - تمرير كائن تكوين jsonified لـ packager. راجع إعدادات Bundler و Server في المستندات.init - تهيئة المجلد كمستودع جديد TinyBuild مع الملفات اللازمة ، يمكنك تضمين المصدر باستخدام الأمر أدناهcore=true - قم بتضمين مصدر TinyBuild في المستودع الجديد مع حزمة مناسبة. jsonentry=index.js -اسم ملف نقطة الإدخال الذي تريد إنشاؤه ، الافتراضي إلى index.jsscript=console.log("Hello%20World!") -تمرير سلسلة JavaScript javaScript jsonified و uried (للمساحات وما إلى ذلك).electron - ابدأ تطبيق إلكترون باستخدام Boilerplate ، ونسخ DIST والأصول المحددة. انظر مستندات الإلكترونmobile={android:'open',ios:false} - استخدم المكثف لإنشاء تطبيق محمول مجمل ، أو استخدام "Open" لتشغيل Android Studio أو Xcode ، أو تعيينه على True لاستخدام CLI ، على افتراض أن لديك تبعيات مثبتة. انظر مستندات مكثف.tauri - وقت تشغيل سطح المكتب البديل عبر Tauri. انظر مستندات توري.assets=['./assets','favicon.ico'] - حدد أصول إضافية لنسخها إلى التوزيعات الأصليةراجع ملفات readme.md في كل مقلع فرعي لمزيد من التفسير حول كيفية العمل مع هذه الأنواع من التطبيقات.
إذا قمت بتثبيت TinyBuild على Mac ولم ينجح ، فحاول تشغيل الأمر التالي في المحطة المتمركزة في منشور StackOverflow:
brew install dos2unix
sudo dos2unix node_modules/tinybuild/tinybuild/bin/global.js
قد يلقي Windows أيضًا خطأً في أذونات الحزمة العالمية ، ما عليك سوى نسخ الخطأ الذي تحصل عليه إلى Google واستخدم حل سطر الأوامر الذي تجده وستكون على ما يرام.
لا تتردد في اقتراح أو إجراء تغييرات والإبلاغ عن الأخطاء عبر المشكلات أو الاتصال المباشر مع Joshua Brewster ، فإن نظام التطوير بأكمله يعتبر وحدات وأتمتة بسيطة على رأس عدة أدوات تطوير مبسطة. نستخدم هذا في سير عمل التنمية اليومي لدينا بحيث يتم اختباره في المعركة ولكن على حجم عينة صغير.
