tinybuild
1.0.0
npm i -g tinybuild ou npm i tinybuild dans des projets locaux.
Veuillez contribuer si vous êtes intéressé par votre propre automatisation de workflow, nous modifions actuellement et cassons et réparons cela sur la base de notre propre développement, donc il n'y a absolument aucun contrôle de source, mais nous faisons de notre mieux pour le rendre aussi polyvalent que possible.
 |  |  |  |  |
Il s'agit du combo Bundler and Development Server que vous avez toujours voulu. Au revoir les instructions ésotériques, adieu les dépendances lourdes et au revoir du temps perdu à regarder votre compilateur en marche! Déplacez-vous sur WebPack, Parcel et Vite, il y a un nouveau jeu en ville.
Prérequis: Dernier Nodejs LTS
npm i -g tinybuild
tinybuild
Vous êtes prêt à développer vos applications ou vos bibliothèques!
Modifiez le tinybuild.config.js et package.json à vos besoins. Vous pouvez ajouter build:true ou Set server:false dans la configuration pour désactiver le serveur de développement.
TinyBuild fonctionne également comme une dépendance locale, par exemple npx tinybuild ou exécutant le script Packager via Node.js dans un script personnalisé. Voir les documents pour plus de détails et consultez le code source.
Les préréglages de bundler et de serveur incluent une CLI complète, un fichier de configuration ou un wrapper fonctionnel (en script) pour la personnalisation Esbuild et Server, et pour créer plusieurs distributions à partir d'une configuration unique (par exemple pour le navigateur, ESM, Node). Bundles et sert des bibliothèques et des programmes complexes en millisecondes avec un environnement de test de rechargement chaud, et facilite la mise à l'échelle de la production.
Dans un dossier de projet avec un package.json (par exemple après avoir exécuté npm init pour la première fois),
Créez un fichier tinybuild.config.js comme SO (copier / coller ou tinybuild peut en générer un pour vous en exécutant simplement):
//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 ; Ensuite, exécutez tinybuild pour fournir cela au Packager pour construire et exécuter votre projet. Personnalisez-le selon vos besoins, par exemple pour différents points d'entrée et cas d'utilisation. TypeScript est automatiquement reconnu, y compris JSX et TSX. CSS est automatiquement compilé si vous les importez dans vos scripts quelque part. Voir des exemples pour en savoir plus.
Pour utiliser TinyBuild Localement ( npm install vs npm install -g ), vous devez importer et exécuter packager(config) à partir de la bibliothèque TinyBuild vous-même et l'exécuter dans un fichier de script.
Créez TinyBuild.js à la racine de votre répertoire de projet
import { packager } from 'tinybuild'
import config from './tinybuild.config.js'
packager ( config ) ; Ensuite, dans la console de ce répertoire de projet node tinybuild.js
Par exemple, tinybuild build ou tinybuild serve à exécuter des commandes isolées
tinybuild help Listes des arguments acceptés, voir la baillue créée dans le nouveau référentiel pour en savoir plus. La commande tinybuild utilisera votre éditeur tinybuild.config.js ou tinybuild.js (qui comprend la bibliothèque et exécute le packager avec le bundler et / ou le serveur lui-même pour plus de contrôle) Fichier de configuration après initialisation afin que vous puissiez l'utiliser génériquement, sinon le package.json créé.json pour plus de commandes locales.
Commande globale:
tinybuild - exécute les paramètres du serveur TinyBuild Bundler + serveur dans le répertoire de travail actuel. Il créera manquer index.js, package.json (avec Auto NPM / Yarn Installer) et TinyBuild.js, et servir avec des dossiers regardés dans le répertoire de travail (moins node_modules car il ralentit) pour le rechargement à chaud.commande locale:
node path/to/tinybuild.js - utilisera le répertoire de travail actuel comme référence pour exécuter cette configuration de packagerstart - Exécute l'équivalent de node tinybuild.js dans le répertoire de travail actuel.build / bundle - exécute le bundler Esbuild, peut spécifier la configuration avec config={"bundler":{}} via un objet jsonifiedserve - Exécute le serveur de développement de nœuds, peut spécifier la configuration avec config={"server":{}} via un objet et un objet jsonifiedmode=python - exécute le serveur de développement ainsi que Python qui sert également la dist à partir d'un port séparé (7000 par défaut).mode=dev POUR LE MODE DE DEV SERVER (UTILISÉ par défaut si vous tapez simplement tinybuild sur la buissier)path=custom.js - cibler un fichier d'entrée de tinybuild.js équivalent personnalisé (pour exécuter le packager ou le bundler / serveur) ST` - Nom d'hôte pour le serveur, localhost par défautentryPoints=index.js - définissez un point d'entrée pour votre script, peut également être un tableau jsonifié de chaînes.outfile=dist/index - Définissez le répertoire de sortie et le nom du fichier (moins le nom d'extension)outdir=dist - Utilisez également Outdir lors de l'utilisation de plusieurs points d'entréebundleBrowser=true - Produisez un pundle .js simple qui est convivial, vrai par défaut.bundleESM=false - produire un bundle de modules ESM, false par défaut, sera identifié par .esm.jsbundleTypes=false - Produce. Les fichiers sont organisés comme votre référentiel dans le dossier DIST utilisé.bundleNode=false - Créez un ensemble de bundle séparé pour inclure les dépendances de nœuds. Identifié par .node.jsbundleHTML=true - bundle un chaudron HTML qui enveloppe et exécute le pack de navigateur comme test rapide. Si TRUE La commande Packager définira ce fichier en tant que startPage, sinon vous avez un index.html que vous pouvez personnaliser et utiliser qui a la même buisaude de base. Trouver par exemple index.build.html dans dist.external=['node-fetch'] - Marquez les externes dans votre référentiel, le nœud-fetch est utilisé dans une grande partie de notre travail, donc il est là par défaut, le bundle de nœuds a ses propres exclusions (voir nos options d'Esbuild dans ReadMe)platform=browser - Les bundles non à nœuds utilisent le navigateur par défaut, défini sur Node pour que tous les groupes ciblent la plate-forme de nœud. Les externes doivent être définis de manière appropriée.globalThis=myCustomBundle - Vous pouvez définir toutes les exportations de vos points d'entrée sur le paramètre BalldleBrowser pour être accessible en tant que variable globale. Pas défini par défaut.globals={[entryPoint]:['myFunction']} - Vous pouvez spécifier toutes les fonctions, classes, variables supplémentaires, etc. exportées à partir de votre bundle à installer en tant que Globals sur le paramètre Ballebrowser.host=localhost - Définissez le nom d'hôte du serveur, localHost par défaut. Vous pouvez le définir sur l'URL de votre serveur ou l'adresse IP lors de la servitude. Utilisez généralement le port 80 lors du service.port=8080 - port pour le serveur, 8080 par défautprotocol=http - http ou https? Vous avez besoin de certificat SSL et de clé pour exécuter HTTPSpython=7000 - Port pour Python Server afin que le serveur de nœuds puisse envoyer un signal de kill, 7000 par défaut. Exécutez le serveur Python simultanément ou utilisez mode=pythonhotreload=5000 - Port HotReload pour le serveur de nœuds, 5000 par défautwatch=../../path/to/other/src ou watch=['path/to/src1','src2','.xml'] - regardez des dossiers et des extensions supplémentairesextensions=xml,3ds ou extensions=['xml','3ds'] Regardez des extensions spécifiques pour les modificationsignore=../../path/to/other/src,path2/src2 ou ignore=['path/to/src1','../path2/src2'] - ignorer les fichiers et les dossiersstartpage=index.html - Page HTML Entrée pour la page Home '/', index.html par défautcertpath=tinybuild/node_server/ssl/cert.pem - Fichier CERT pour HTTPSkeypath=tinybuild/node_server/ssl/key.pem - Fichier de clé pour httpspwa=tinybuild/pwa/workbox-config.js - Config du service de service pour pwa à l'aide de workbox-CLI (installé séparément via packconfig="{"server":{},"bundler":{}}" - passer un objet config jsonified pour le packager. Voir les paramètres de bundler et de serveur dans les documents.init - Initialisez un dossier en tant que nouveau référentiel TinyBuild avec les fichiers nécessaires, vous pouvez inclure la source à l'aide de la commande ci-dessouscore=true - Incluez la source TinyBuild dans le nouveau référentiel avec un package approprié.jsonentry=index.js --nom du fichier de point d'entrée que vous souhaitez créer, par défaut à index.jsscript=console.log("Hello%20World!") - Passez une chaîne JavaScript jsonifiée et codée par uria (pour les espaces, etc.), par défaut à une console.log de Hello World!electron - Démarrez une application Electron avec passe-partout, copie votre dist et actifs spécifiés. Voir Electron Docsmobile={android:'open',ios:false} - Utilisez un condensateur pour créer une application mobile groupée, utilisez 'Open' pour exécuter Android Studio ou Xcode, ou défini sur TRUE pour utiliser la CLI, en supposant que vous avez installé des dépendances. Voir les documents des condensateurs.tauri - Alternative Minimal Desktop Runtime via Tauri. Voir Tauri Docs.assets=['./assets','favicon.ico'] - Spécifiez des actifs supplémentaires à copier dans les distributions nativesVoir les fichiers readme.md dans chaque sous-dossier pour plus d'explications sur la façon de travailler avec ces types d'applications.
Si vous avez installé TinyBuild sur Mac et que cela ne fonctionne pas, essayez d'exécuter la commande suivante dans le terminal basé sur ce post StackOverflow:
brew install dos2unix
sudo dos2unix node_modules/tinybuild/tinybuild/bin/global.js
Windows peut également lancer une erreur pour les autorisations globales du package, il suffit de copier l'erreur que vous obtenez dans Google et d'utiliser la solution de ligne de commande que vous trouvez et vous serez prêt à partir.
N'hésitez pas à suggérer ou à apporter des modifications et à signaler les bogues via des problèmes ou un contact direct avec Joshua Brewster, l'ensemble du système de développement est modulaire et est une automatisation simple en plus de plusieurs outils de développement simplifiés. Nous l'utilisons dans notre flux de travail de développement quotidien afin qu'il soit testé au combat mais sur une petite taille d'échantillon.
