tinybuild
1.0.0
npm i -g tinybuild o npm i tinybuild en proyectos locales.
Contribuya si está interesado en esto para su propia automatización del flujo de trabajo, actualmente editamos y rompemos y solucionamos esto sobre la base de nuestro propio desarrollo, por lo que no hay absolutamente ningún control de origen, pero hacemos todo lo posible para que sea lo más versátil posible.
 |  |  |  |  |
Este es el combo de Bundler y Desarrollo que siempre quisiste. ¡Adiós las instrucciones esotéricas, adiós dependencias difíciles y adiós desperdiciado por el tiempo mirando a su compilador en funcionamiento! Muévete sobre Webpack, Parcel y Vite, hay un nuevo juego en la ciudad.
Prerrequisitos: Último NodeJS LTS
npm i -g tinybuild
tinybuild
¡Está listo para desarrollar sus aplicaciones o bibliotecas!
Modifique el tinybuild.config.js y el paquete.json a sus necesidades. Puede agregar build:true o establecer server:false en la configuración para deshabilitar el servidor de desarrollo.
TinyBuild también funciona como una dependencia local, por ejemplo, npx tinybuild o ejecutando el script Packager a través de Node.js en un script personalizado. Consulte los documentos para obtener más detalles y consulte el código fuente.
El Bundler y los preajustes del servidor incluyen una CLI completa, un archivo de configuración o un envoltorio funcional (in-script) para la personalización de ESBuild y del servidor, y para crear múltiples distribuciones a partir de una sola configuración (por ejemplo, para navegador, ESM, nodo). Bundles y sirven bibliotecas y programas complicados en milisegundos con un entorno de prueba de recarga en caliente, y facilita la producción de la producción.
En una carpeta de proyecto con un paquete.json (por ejemplo, después de ejecutar npm init por primera vez),
Cree un archivo tinybuild.config.js como SO (copiar/pegar o tinyBuild puede generar uno para usted simplemente ejecutándose):
//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 ; Luego ejecute tinybuild para suministrar esto al paquete para construir y ejecutar su proyecto. Personalice a sus necesidades, por ejemplo, para diferentes puntos de entrada y casos de uso. TypeScript se reconoce automáticamente, incluidos JSX y TSX. CSS se compila automáticamente si los importa en sus scripts en algún lugar. Ver ejemplos para más.
Para usar TinyBuild localmente ( npm install vs npm install -g ) debe importar y ejecutar packager(config) desde la biblioteca TinyBuild usted mismo y ejecutarlo en un archivo de script.
Crea tinybuild.js en la raíz de tu directorio de proyecto
import { packager } from 'tinybuild'
import config from './tinybuild.config.js'
packager ( config ) ; Luego, en la consola de ese directorio de proyecto, ejecute node tinybuild.js
por ejemplo, tinybuild build o tinybuild serve para ejecutar comandos aislados
tinybuild help Listas de los argumentos aceptados, consulte la calderera creada en el nuevo repositorio para obtener más información. El comando tinybuild utilizará su editado tinybuild.config.js o tinybuild.js (que incluye la biblioteca y ejecuta el paquete con el bundler y/o servidor en sí para más control) archivo de configuración después de la inicialización para que pueda usarla genéricamente, de lo contrario, vea el package.json creado para obtener más comandos locales.
Comando global:
tinybuild : ejecuta la configuración del servidor TinyBuild Bundler + en el directorio de trabajo actual. Creará Index.js faltante, paquete.json (con instalación automática de npm/hilo) y tinybuild.js, y serviría con carpetas observadas en el directorio de trabajo (menos node_modules porque se ralentiza) para la recarga en caliente.Comando local:
node path/to/tinybuild.js : utilizará el directorio de trabajo actual como referencia para ejecutar esta configuración de paquetestart : ejecuta el equivalente de node tinybuild.js en el directorio de trabajo actual.build / bundle : ejecuta el Bundler de ESBuild, puede especificar config con config={"bundler":{}} a través de un objeto jsonificadoserve : ejecute el servidor de desarrollo de nodo, puede especificar config con config={"server":{}} a través de un objeto y objeto jsonificadomode=python : ejecuta el servidor de desarrollo y Python, que también sirve el DIST de un puerto separado (7000 por defecto).mode=dev para el modo de servidor de desarrollo (utilizado por defecto si solo escribe tinybuild en Boilerplate)path=custom.js : apunte a un archivo de entrada TinyBuild.js equivalente personalizado (para ejecutar el paquete o Bundler/servidor) ST` - Nombre de host para el servidor, Localhost de forma predeterminadaentryPoints=index.js : establezca un punto de entrada para su script, también puede ser una matriz Jsonificada de cadenas.outfile=dist/index - Establezca el directorio de salida y el nombre del archivo (menos el nombre de la extensión)outdir=dist : alternativamente, use OutDir cuando se use múltiples puntos de entradabundleBrowser=true -Produce un paquete .js simple que es amigable con el navegador, verdadero de forma predeterminada.bundleESM=false : producir un paquete de módulo ESM, falso de forma predeterminada, se identificará por .esm.jsbundleTypes=false - Producir archivos .d.ts, falso por defecto, el punto de entrada debe hacerlo mediante un archivo TypeScript, pero intentará generar tipos para archivos JS en el repositorio de otra manera. Los archivos están organizados como su repositorio en la carpeta Dist utilizada.bundleNode=false : cree un conjunto de paquete separado para incluir dependencias de nodo. Identificado por .node.jsbundleHTML=true - Bundle una calderera HTML que envuelve y ejecuta el paquete del navegador como una prueba rápida. Si el comando Packager verdadero establecerá este archivo como el StartPage, de lo contrario tiene un index.html, puede personalizar y usar que tiene la misma calderera base. Encuentra EG index.build.html en dist.external=['node-fetch'] -Mark Externals En su repositorio, Node-Fetch se usa en gran parte de nuestro trabajo, por lo que está allí por defecto, el paquete de nodos tiene sus propias exclusiones (consulte nuestras opciones de ESBuild en ReadMe)platform=browser : los paquetes de no nodo usan el navegador de forma predeterminada, configurado en el nodo para que todos los bundeos se apunten a la plataforma de nodo. Los externos deben establecerse apropiadamente.globalThis=myCustomBundle : puede establecer cualquier exportación en sus puntos de entrada en la configuración de Bundle Browser para que sea accesible como una variable global. No configurado por defecto.globals={[entryPoint]:['myFunction']} - Puede especificar cualquier función, clases, variables, etc. exportadas desde su paquete para instalarse como globales en la configuración del bulto.host=localhost : configure el nombre de host para el servidor, localhost de forma predeterminada. Puede configurarlo en la URL de su servidor o la dirección IP al servir. Generalmente use el puerto 80 al servir.port=8080 - puerto para el servidor, 8080 de forma predeterminadaprotocol=http - http o https? Necesita certificado SSL y clave para ejecutar httpspython=7000 - Puerto para el servidor Python para que el servidor de nodo pueda enviar una señal de asesinato, 7000 por defecto. Ejecute el servidor Python simultáneamente o use mode=pythonhotreload=5000 - Puerto HotReload para el servidor de nodo, 5000 por defectowatch=../../path/to/other/src o watch=['path/to/src1','src2','.xml'] - mire carpetas y extensiones adicionalesextensions=xml,3ds o extensions=['xml','3ds'] Mire extensiones específicas para cambiosignore=../../path/to/other/src,path2/src2 o ignore=['path/to/src1','../path2/src2'] - ignorar archivos y carpetasstartpage=index.html - Entrada página html para la página de inicio '/', index.html de forma predeterminadacertpath=tinybuild/node_server/ssl/cert.pem - archivo cert para httpskeypath=tinybuild/node_server/ssl/key.pem - archivo de clave para httpspwa=tinybuild/pwa/workbox-config.js -Configuración de trabajadores de servicio para PWA usando Workbox-Cli (instalado por separado a través de paquete.json), el servidor instalará un manifiesto.json en la carpeta principal si no se encuentra, se requiere HTTPSconfig="{"server":{},"bundler":{}}" - Pase un objeto de configuración JSONIFICADO para el Packager. Vea la configuración de Bundler y del servidor en los documentos.init : inicialice una carpeta como un nuevo repositorio de TinyBuild con los archivos necesarios, puede incluir la fuente utilizando el siguiente comandocore=true : incluya la fuente TinyBuild en el nuevo repositorio con un paquete apropiado.jsonentry=index.js : nombre del archivo de punto de entrada que desea crear, predeterminado a index.jsscript=console.log("Hello%20World!") -Pase una cadena JavaScript (para espacios, etc.) Jsonificada y codificada (para espacios, etc.), es predeterminado a una consola.log de Hello World!electron : inicie una aplicación de electrones con plantilla, copiando su DIST y activos especificados. Ver documentos de electronesmobile={android:'open',ios:false} - Use condensador para crear una aplicación móvil agrupada, use 'Open' para ejecutar Android Studio o Xcode, o establecer en verdadero para usar la CLI, suponiendo que tenga dependencias instaladas. Ver Docios del condensador.tauri - tiempo de ejecución de escritorio mínimo alternativo a través de Tauri. Ver Tauri Docs.assets=['./assets','favicon.ico'] - Especifique activos adicionales para copiar a las distribuciones nativasConsulte los archivos ReadMe.md en cada subcarpeta para obtener más explicación sobre cómo trabajar con este tipo de aplicaciones.
Si ha instalado TinyBuild en Mac y no funciona, intente ejecutar el siguiente comando en el terminal basado en esta publicación de StackOverFlow:
brew install dos2unix
sudo dos2unix node_modules/tinybuild/tinybuild/bin/global.js
Windows también puede lanzar un error para los permisos de paquetes globales, solo copie el error que recibe en Google y use la solución de línea de comandos que encuentre y será bueno para comenzar.
Siéntase libre de sugerir o hacer cambios e informar errores a través de problemas o contacto directo a Joshua Brewster, todo el sistema de desarrollo es modular y es una automatización simple además de varias herramientas de desarrollo simplificadas. Usamos esto en nuestro flujo de trabajo de desarrollo diario, por lo que es probado en batalla pero en un pequeño tamaño de muestra.
