tinybuild
1.0.0
npm i -g tinybuild oder npm i tinybuild in lokalen Projekten.
Bitte tragen Sie dazu bei, wenn Sie sich für Ihre eigene Workflow -Automatisierung interessieren. Derzeit bearbeiten und brechen wir dies auf der Grundlage unserer eigenen Entwicklung, sodass es absolut keine Quellenkontrolle gibt, aber wir versuchen unser Bestes, um es so vielseitig wie möglich zu machen.
 |  |  |  |  |
Dies ist die Kombination aus Bundler und Entwicklungsserver, die Sie immer gewünscht haben. Auf Wiedersehen Esoterische Anweisungen, auf Wiedersehen unhandliche Abhängigkeiten und Abschiedszeit verschwendete, dass Sie Ihren Compiler laufen lassen! Bewegen Sie sich über Webpack, Paket und Vite, es gibt ein neues Spiel in der Stadt.
Voraussetzungen: Neueste Nodejs LTS
npm i -g tinybuild
tinybuild
Sie sind bereit, Ihre Anwendungen oder Bibliotheken zu entwickeln!
Ändern Sie die tinybuild.config.js und package.json an Ihre Bedürfnisse. Sie können build:true oder Set server:false in der Konfiguration hinzufügen, um den Entwicklungsserver zu deaktivieren.
Tinybuild arbeitet auch als lokale Abhängigkeit, npx tinybuild . Weitere Informationen finden Sie unter Dokumente und finden Sie den Quellcode.
Die Voreinstellungen von Bundler und Server enthalten eine vollständige CLI, eine Konfigurationsdatei oder einen funktionalen (In-Script) -Wrapper für die Anpassung von ESBuild und Server sowie zum Erstellen mehrerer Verteilungen aus einer einzelnen Konfiguration (z. B. für Browser, ESM, Knoten). Bündel und dient komplizierte Bibliotheken und Programme in Millisekunden mit einer heißen Nachlade -Testumgebung und erleichtert das Maßstab für die Produktion.
In einem Projektordner mit einem Paket.json (z. B. nach dem Ausführen npm init zum ersten Mal),
Erstellen Sie eine tinybuild.config.js -Datei wie SO (kopieren/einfügen oder Tinybuild können durch einfaches Laufen eines generieren):
//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 ; Führen Sie dann tinybuild durch, um dies dem Packager zu liefern, um Ihr Projekt zu erstellen und auszuführen. Passen Sie es an Ihre Bedürfnisse an, z. B. für verschiedene Einstiegspunkte und Anwendungsfälle. Typscript wird automatisch erkannt, einschließlich JSX und TSX. CSS wird automatisch kompiliert, wenn Sie sie irgendwo in Ihre Skripte importieren. Siehe Beispiele für mehr.
Für die Verwendung von Tinybuild lokal ( npm install vs npm install -g ) müssen Sie packager(config) aus der Tinybuild -Bibliothek selbst importieren und ausführen und in einer Skriptdatei ausführen.
Erstellen Sie Tinybuild.js am Wurzel Ihres Projektverzeichnisses
import { packager } from 'tinybuild'
import config from './tinybuild.config.js'
packager ( config ) ; dann in der Konsole dieses Projektverzeichnisses node tinybuild.js ausführen
zB tinybuild build oder tinybuild serve dazu, isolierte Befehle auszuführen
tinybuild help listet akzeptierte Argumente auf. Weitere Informationen finden Sie in der Kesselplatte im neuen Repo. package.json Befehl tinybuild verwendet Ihre bearbeitete tinybuild.config.js oder tinybuild.js (die die Bibliothek enthält und den Packager mit dem Bundler und/oder dem Server selbst ausführt) Konfigurationsdatei nach der Initialisierung, damit Sie sie generisch verwenden können.
Globaler Befehl:
tinybuild - Firiert die Boilerplate TinyBuild Bundler + Server -Einstellungen im aktuellen Arbeitsverzeichnis. Es erstellt fehlende Index.js, package.json (mit automatischer NPM/Garn -Installation) und Tinybuild.js und serviert mit angesehenen Ordnern im funktionierenden Verzeichnis (minus node_modules, weil es sich verlangsamt) für heißes Nachladen.Lokaler Befehl:
node path/to/tinybuild.js - Verwendet das aktuelle Arbeitsverzeichnis als Referenz, um diese Packager -Konfiguration auszuführenstart - Führen Sie das Äquivalent von node tinybuild.js im aktuellen Arbeitsverzeichnis aus.build / bundle - Leitet den Esbuild -Bundler aus, kann Konfiguration mit config={"bundler":{}} über ein jsonified -Objekt angebenserve - führt den Knotenentwicklungsserver aus und kann config mit config={"server":{}} über ein jsonified -Objekt und Objektmode=python - führt sowohl den Entwicklungsserver als auch den Python aus, der auch der Dist von einem separaten Port (standardmäßig 7000) dient.mode=dev für den Dev -Server -Modus (standardmäßig verwendet, wenn Sie nur tinybuild auf Boilerplate eingeben)path=custom.js - ZielenentryPoints=index.js - Stellen Sie einen Einstiegspunkt für Ihr Skript fest, kann auch ein jsonified -Array von Zeichenfolgen sein.outfile=dist/index - Setzen Sie den Ausgabemittel und den Dateinamen (abzüglich des Erweiterungsnamens)outdir=dist - Alternativ im Freien verwenden, wenn mehrere Einstiegspunkte verwendet werdenbundleBrowser=true -Erstellen Sie ein einfaches .js-Bundle, das browserfreundlich ist, standardmäßig.bundleESM=false - Erstellen Sie ein ESM -Modulbündel, das standardmäßig falsch ist, wird von .esm.js identifiziertbundleTypes=false - produzieren .d.ts Dateien, false standardmäßig, der Einstiegspunkt muss durch eine TypeScript -Datei erhoben werden, wird jedoch versucht, Typen für JS -Dateien im Repo zu generieren. Die Dateien sind wie Ihr Repo im verwendeten DIST -Ordner organisiert.bundleNode=false - Erstellen Sie ein separates Bundle -Set, das Knotenabhängigkeiten einbezieht. Identifiziert von .node.jsbundleHTML=true - Bündeln Sie eine HTML -Kesselplatte, die das Browser -Bündel als schnellen Test einhüllt und ausführt. Wenn der Befehl packager diese Datei als Startpage festlegt, können Sie ansonsten einen Index haben. Finden Sie EG Index.build.html in dist.external=['node-fetch'] -markieren externe in Ihrem repo, Knotenfetch wird in vielen unserer Arbeiten verwendet, sodass es standardmäßig dort ist. Das Knotenbündel hat seine eigenen Ausschlüsse (siehe unsere Esbuild-Optionen in Readme).platform=browser -Die Nicht-Node-Bündel verwenden standardmäßig Browser und haben auf den Knoten gesetzt, um alle Bündel auf die Knotenplattform abzielen. Externale müssen angemessen eingestellt werden.globalThis=myCustomBundle - Sie können alle Exporte auf Ihren Einstiegspunkten in der BündelBrowser -Einstellung festlegen, um als globale Variable zugänglich zu sein. Standardmäßig nicht festgelegt.globals={[entryPoint]:['myFunction']} - Sie können alle zusätzlichen Funktionen, Klassen, Variablen usw. angeben, die aus Ihrem Bundle exportiert sind, um als Global in der BündelBrowser -Einstellung installiert zu werden.host=localhost - Stellen Sie den Hostnamen für den Server standardmäßig Lokalhost fest. Sie können es beim Servieren auf Ihre Server -URL oder IP -Adresse einstellen. Verwenden Sie Port 80 im Allgemeinen beim Servieren.port=8080 - Port für den Server, 8080 standardmäßigprotocol=http - http oder https? Sie benötigen SSL Cert und Schlüssel, um HTTPS auszuführenpython=7000 - Port für Python Server, sodass der Knotenserver standardmäßig ein Kill -Signal 7000 senden kann. Führen Sie den Python -Server gleichzeitig aus oder verwenden Sie mode=pythonhotreload=5000 - Hotreload -Port für den Knotenserver, standardmäßig 5000watch=../../path/to/other/src oder watch=['path/to/src1','src2','.xml'] - Sehen Sie zusätzliche Ordner und Erweiterungen an.extensions=xml,3ds oder extensions=['xml','3ds'] Sehen Sie sich spezifische Erweiterungen für Änderungen anignore=../../path/to/other/src,path2/src2 oder ignore=['path/to/src1','../path2/src2'] - ignorieren Dateien und Ordner ignorierenstartpage=index.html - Eintrag HTML -Seite für die Home '/' ', index.html standardmäßigcertpath=tinybuild/node_server/ssl/cert.pem - cert -Datei für HTTPSkeypath=tinybuild/node_server/ssl/key.pem - Schlüsseldatei für HTTPSpwa=tinybuild/pwa/workbox-config.js -Service Worker-Konfiguration für PWA mit Workbox-CLI (separat installiert über package.json) und installiert ein Manifest.json im Hauptordner, wenn nicht gefunden, HTTPS Erforderlichconfig="{"server":{},"bundler":{}}" - Übergeben Sie ein jsonified Config -Objekt für den Packager. Siehe die Einstellungen von Bundler und Server in den Dokumenten.init - Initialisieren Sie einen Ordner als neues Tinybuild -Repository mit den erforderlichen Dateien. Sie können die Quelle mit dem folgenden Befehl einfügencore=true - Fügen Sie die Quelle mit Tinybuild in das neue Repository mit einem geeigneten Paket ein. Jsonentry=index.js -Nennen Sie die Einstiegspunktdatei, die Sie erstellen möchten, standardmäßig in INDEX.JSscript=console.log("Hello%20World!") -Übergeben Sie eine jsonified und uri-codierte (für Räume usw.) JavaScript-Zeichenfolge, standardmäßig zu einer Konsole.log von Hello World!electron - Starten Sie eine Elektronen -App mit Kesselplatte, kopieren Sie Ihre DIST und angegebene Vermögenswerte. Siehe Elektronendokumentemobile={android:'open',ios:false} - Verwenden Sie den Kondensator, um eine gebündelte mobile App zu erstellen, verwenden Sie "Open", um Android Studio oder XCode auszuführen, oder auf das TRUR eingestellt, um die CLI zu verwenden, sofern Sie Abhängigkeiten installiert haben. Siehe Kondensator -Dokumente.tauri - Alternative minimale Desktop -Laufzeit über Tauri. Siehe Tauri Docs.assets=['./assets','favicon.ico'] - Geben Sie zusätzliche Vermögenswerte an, um in die nativen Verteilungen zu kopierenWeitere Erläuterungen zum Arbeiten mit diesen Anwendungsarten finden Sie in den Dateien Readme.md in jedem Unterordner.
Wenn Sie Tinybuild auf Mac installiert haben und es nicht funktioniert, versuchen Sie den folgenden Befehl im Terminal aus diesem Stackoverflow -Beitrag ausführen:
brew install dos2unix
sudo dos2unix node_modules/tinybuild/tinybuild/bin/global.js
Windows kann auch einen Fehler für globale Paketberechtigungen werfen. Kopieren Sie einfach den Fehler, den Sie in Google eingehen, und verwenden Sie die von Ihnen gefundene Befehlsleitungslösung, und Sie können gut gehen.
Fühlen Sie sich frei, Änderungen vorzuschlagen oder Fehler über Themen oder direkten Kontakt zu Joshua Brewster vorzunehmen. Das gesamte Entwicklungssystem ist modular und ist eine einfache Automatisierung zusätzlich zu mehreren vereinfachten Entwicklungstools. Wir verwenden dies in unserem täglichen Entwicklungs-Workflow, sodass er kattiert getestet wird, aber auf einer kleinen Stichprobengröße.
