tinybuild
1.0.0
npm i -g tinybuild ou npm i tinybuild em projetos locais.
Contribua se você estiver interessado nisso para sua própria automação de fluxo de trabalho, atualmente editamos e quebramos e corrigimos isso com base em nosso próprio desenvolvimento, para que não haja absolutamente nenhum controle de fonte, mas tentamos o nosso melhor para torná -lo o mais versátil possível.
 |  |  |  |  |
Esta é a combinação do Motorler and Development Server que você sempre quis. Adeus instruções esotéricas, despedidas de dependências pesadas e despedida de despedida do seu compilador correndo! Mova -se sobre Webpack, Parcel e Vite, há um novo jogo na cidade.
Pré -requisitos: mais recentes nodejs lts
npm i -g tinybuild
tinybuild
Você está pronto para desenvolver seus aplicativos ou bibliotecas!
Modifique o tinybuild.config.js e o package.json para suas necessidades. Você pode adicionar build:true ou Set server:false na configuração para desativar o servidor de desenvolvimento.
O TinyBuild também funciona como uma dependência local, por exemplo, npx tinybuild ou executando o script do Packager via node.js em um script personalizado. Consulte os documentos para obter mais detalhes e confira o código -fonte.
As predefinições do Bundler e do servidor incluem um wrapper Full CLI, arquivo de configuração ou funcional (in-script) para personalização ESBuild e servidor e para criar várias distribuições a partir de uma única configuração (por exemplo, para navegador, ESM, nó). Pacotes e serve bibliotecas e programas complicados em milissegundos com um ambiente de teste de recarga a quente e facilita a escala da produção.
Em uma pasta de projeto com um package.json (por exemplo, após executar npm init pela primeira vez),
Crie um arquivo tinybuild.config.js como assim (copiar/colar ou tinybuild pode gerar um para você simplesmente executando):
//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 ; Em seguida, execute tinybuild para fornecer isso ao Packager para construir e executar seu projeto. Personalize -o para suas necessidades, por exemplo, para diferentes pontos de entrada e casos de uso. O TypeScript é reconhecido automaticamente, incluindo JSX e TSX. O CSS é compilado automaticamente se você os importar em seus scripts em algum lugar. Veja exemplos para mais.
Para usar o TinyBuild localmente ( npm install vs npm install -g ), você deve importar e executar packager(config) da biblioteca TinyBuild e executá -lo em um arquivo de script.
Crie tinybuild.js na raiz do seu diretório de projeto
import { packager } from 'tinybuild'
import config from './tinybuild.config.js'
packager ( config ) ; Então, no console desse diretório de projeto, execute node tinybuild.js
Por exemplo, tinybuild build ou tinybuild serve para executar comandos isolados
Listas tinybuild help Argumentos aceitos, consulte o Boilerplate criado no novo repositório para mais. O comando tinybuild usará seu editado tinybuild.config.js ou tinybuild.js (que inclui a biblioteca e executa o empacotador com o próprio arquivo e/ou servidor para mais controles) de configuração após a inicialização para que você possa usá -lo de maneira gericamente, veja o package.json criado.json para mais comandos locais.
Comando Global:
tinybuild - Executa as configurações do servidor TinyBuild Bundler + no diretório de trabalho atual. Ele criará falta de index.js, package.json (com instalação automática de npm/fio) e tinybuild.js, e servirá com pastas assistidas no diretório de trabalho (menos node_modules porque diminui a velocidade) para recarregar a quente.Comando local:
node path/to/tinybuild.js - usará o diretório de trabalho atual como referência para executar esta configuração do Packagerstart - executa o equivalente ao node tinybuild.js no diretório de trabalho atual.build / bundle - Executa o Bundler Esbuild, pode especificar Config com config={"bundler":{}} através de um objeto jsonificadoserve - Executa o Node Development Server, pode especificar Config com config={"server":{}} através de um objeto e objeto jsonificadomode=python - Executa o servidor de desenvolvimento e o Python, que também serve o Dist de uma porta separada (7000 por padrão).mode=dev PARA O Modo de servidor dev (usado por padrão se você apenas digitar tinybuild no Boilerplate)path=custom.js - Target Um arquivo de entrada TinyBuild.js equivalente personalizado (para executar o Packager ou Bundler/Servidor) ST` - Nome do host para o servidor, localhost por padrãoentryPoints=index.js - Defina um ponto de entrada para o seu script, também pode ser uma matriz Jsonificada de Strings.outfile=dist/index - Defina o diretório de saída e o nome do arquivo (menos o nome da extensão)outdir=dist - Use alternativamente Uper ao usar vários pontos de entradabundleBrowser=true -produza um pacote .js simples que é amigável ao navegador, verdadeiro por padrão.bundleESM=false - produzir um pacote de módulos ESM, false por padrão, será identificado por .esm.jsbundleTypes=false - Produza arquivos .d.ts, false por padrão, o ponto de entrada precisa por um arquivo de texto datilografado, mas tentará gerar tipos para arquivos JS no repositório de outra forma. Os arquivos são organizados como o seu repo na pasta distida usada.bundleNode=false - Crie um conjunto de pacote separado para incluir dependências de nó. Identificado por .node.jsbundleHTML=true - Bacione um caldeira HTML que envolve e executa o pacote do navegador como um teste rápido. Se True the Packager comando definirá esse arquivo como o startpage, caso contrário, você terá um index.html que você pode personalizar e usar que possui a mesma placa de caldeira básica. Encontre eg index.build.html em dist.external=['node-fetch'] -Mark Externos em seu repositório, a Fetch de Nó é usada em muito do nosso trabalho, para que esteja lá por padrão, o pacote de nós tem seus próprios exclui (consulte nossas opções de esbuild no ReadMe)platform=browser -Os pacotes que não são de nós usam o navegador por padrão, defina como nó para que todos os pacotes visam a plataforma do nó. Externos devem ser definidos adequadamente.globalThis=myCustomBundle - você pode definir quaisquer exportações em seus pontos de entrada na configuração do BundleBrowser para estar acessível como uma variável global. Não definido por padrão.globals={[entryPoint]:['myFunction']} - Você pode especificar quaisquer funções, classes, variáveis etc. exportadas do seu pacote para serem instaladas como globais na configuração do BundleBrowser.host=localhost - Defina o nome do host para o servidor, localhost por padrão. Você pode defini -lo como URL do servidor ou endereço IP ao servir. Geralmente use a porta 80 ao servir.port=8080 - porta para o servidor, 8080 por padrãoprotocol=http - http ou https? Você precisa de certificado SSL e chave para executar httpspython=7000 - Porta para servidor Python para que o servidor do nó possa enviar um sinal de morte, 7000 por padrão. Execute o servidor Python simultaneamente ou use mode=pythonhotreload=5000 - Porta HotReload para o servidor Node, 5000 por padrãowatch=../../path/to/other/src ou watch=['path/to/src1','src2','.xml'] - assista pastas e extensões extrasextensions=xml,3ds ou extensions=['xml','3ds'] assista extensões específicas para alteraçõesignore=../../path/to/other/src,path2/src2 ou ignore=['path/to/src1','../path2/src2'] - ignore arquivos e pastasstartpage=index.html - página de entrada html para a página home '/', index.html por padrãocertpath=tinybuild/node_server/ssl/cert.pem - Arquivo Cert para HTTPSkeypath=tinybuild/node_server/ssl/key.pem - arquivo de chave para httpspwa=tinybuild/pwa/workbox-config.js -serviço de serviço de serviço para pwa usando o workbox-cli (instalado separadamente via package.json), o servidor instalará um manifest.json na pasta principal, se não for encontrada, https necessárioconfig="{"server":{},"bundler":{}}" - Passe um objeto de configuração jsonificado para o Packager. Consulte as configurações do Motorler e do Servidor nos documentos.init - inicialize uma pasta como um novo repositório TinyBuild com os arquivos necessários, você pode incluir a fonte usando o comando abaixocore=true - inclua a fonte TinyBuild no novo repositório com um package.json apropriadoentry=index.js -Nome do arquivo de ponto de entrada que você deseja criar, os padrões para index.jsscript=console.log("Hello%20World!") -Passe uma string javascript Jsonificada e codificada por Uri (para espaços etc.), padrão, padrão para um console.log do Hello World!electron - Inicie um aplicativo de elétrons com caldeira, copiando seus ativos distintos e especificados. Veja Docs Electronmobile={android:'open',ios:false} - Use o Capacitor para criar um aplicativo móvel em pacote, usar 'aberto' para executar o Android Studio ou Xcode ou definir como true para usar a CLI, assumindo que você tenha dependências instaladas. Veja o Capacitor Docs.tauri - Tempo de execução mínimo de desktop alternativo via Tauri. Veja Tauri Docs.assets=['./assets','favicon.ico'] - Especifique ativos adicionais para copiar para as distribuições nativasConsulte os arquivos README.MD em cada subpasta para obter mais explicações sobre como trabalhar com esses tipos de aplicativos.
Se você instalou o TinyBuild no Mac e ele não está funcionando, tente executar o seguinte comando no terminal com base nesta postagem do StackOverflow:
brew install dos2unix
sudo dos2unix node_modules/tinybuild/tinybuild/bin/global.js
O Windows também pode causar um erro para as permissões globais de pacotes, basta copiar o erro que você recebe no Google e usar a solução de linha de comando encontrada e você estará pronto para ir.
Sinta -se à vontade para sugerir ou fazer alterações e relatar bugs por meio de problemas ou contato direto com Joshua Brewster, todo o sistema de desenvolvimento é modular e é uma automação simples sobre várias ferramentas de desenvolvimento simplificadas. Usamos isso em nosso fluxo de trabalho de desenvolvimento diário para que seja testado em batalha, mas em um pequeno tamanho de amostra.
