tinybuild

tinybuild

npm i -g tinybuild或npm i tinybuild在本地項目中。

一站式HTML5/JavaScript Web，服務器，桌面和移動應用程序開發

如果您對自己的工作流程自動化感興趣，請做出貢獻，目前，我們根據自己的開發進行編輯和打破並解決此問題，因此絕對沒有源控制，但是我們會盡力使其盡可能多地通用。

這是您一直想要的捆綁器和開發服務器組合。再見深奧的說明，再見笨拙的依賴關係，再見時間浪費了盯著您的編譯器運行！越過Webpack，包裹和Vite，鎮上有一款新遊戲。

• 最小的Esbuild Bundler包裝器，帶有自定義樣板和插件，適合所有常見的JavaScript或打字稿應用程序，服務器和庫包裝需求。對打字稿，JSX等內置了支持。
• 自定義用於網絡工作人員的Esbuild插件，流式輸入導入，類型捆綁（例如圖書館開發）和熱門CSS。
• 純nodejs熱重新加載測試環境與熱模塊交換。只有1個小第三方依賴。
• 通過電容器，電子或Tauri的本機移動和桌面應用程序的輕巧自動包裝。
• 獎金Python Quart多線程並發構建和測試ENV示例（不需要）。

Quickstart

先決條件：最新的Nodejs LTS

全球安裝tinybuild：

npm i -g tinybuild

從一個空的項目文件夾中，可以立即初始化默認應用程序：

tinybuild

您準備開發應用程序或庫！

修改tinybuild.config.js和package.json的需求。您可以添加build:true或set server:false在配置中以禁用開發服務器。

TinyBuild還可以作為本地依賴關係，例如npx tinybuild或通過自定義腳本中的Node.js執行Packager腳本。有關更多詳細信息，請參見文檔並查看源代碼。

Bundler和Server預設包括用於Esbuild和Server自定義的完整CLI，配置文件或功能性（INScriptional）包裝器，以及從單個配置中創建多個發行版（例如，用於瀏覽器，ESM，Node）。捆綁並在毫秒內提供複雜的圖書館和程序，並具有熱加載的測試環境，並更容易擴展生產。

對於現有項目

在帶有npm init的項目文件夾中。

像這樣創建一個tinybuild.config.js文件（複製/粘貼或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。有關更多信息，請參見示例。

文件

- 快速啟動

- Esbuild應用程序和圖書館捆綁

- 節點開發/生產服務器

- Python開發/生產服務器

本地node_modules/tinybuild構建（沒有全局軟件包管理器）

對於本地使用TinyBuild（ npm install與npm install -g ），您必須自己導入並運行packager(config) ，並自己運行packager（config），並在腳本文件中運行它。

例子：

在項目目錄的根源上創建tinybuild.js

 import { packager } from 'tinybuild'
import config from './tinybuild.config.js'

packager ( config ) ;

然後在該項目目錄中的控制台中運行node tinybuild.js

Tinybuild CLI命令：

例如， tinybuild build或tinybuild serve運行孤立的命令

tinybuild help列表接受的參數，請參閱新存儲庫中創建的樣板以獲取更多信息。 tinybuild命令將使用您編輯的tinybuild.config.js或tinybuild.js （其中包括庫，並使用Bundler和/或服務器本身執行包裝器，以獲取更多控製文件）在初始化之後進行了配置文件，以便您可以使用它一般使用它，否則請參閱創建的package.json以獲取更多本地命令。

全局命令：

• tinybuild在當前工作目錄中運行樣板tinybuild bundler +服務器設置。它將創建缺失的index.js，package.json（帶有自動npm/yarn install）和tinybuild.js，並與工作目錄中的手錶文件夾一起使用（MINUS node_modules，因為它會減慢）進行熱重新裝載。

本地命令：

• node path/to/tinybuild.js將使用當前的工作目錄作為參考來運行此packager config

tinybuild參數（適用於Packager或TinyBuild命令）：

• start - 在當前工作目錄中運行相當於node tinybuild.js的等效物。
• build / bundle運行esbuild bundler，可以通過jsonified對象指定config={"bundler":{}}
• serve - 運行節點開發服務器，可以通過jsonified對象和對象指定config={"server":{}}配置
• mode=python運行開發服務器以及Python，該服務器也從單獨的端口服務（默認為7000）。
• mode=dev （默認情況下，如果您只在樣板上鍵入tinybuild ）
• path=custom.js定制一個自定義等效的tinybuild.js條目文件（運行packager或bundler/server）sT`-服務器的主機名，默認為localhost

Esbuild論點：

• entryPoints=index.js設置腳本的入口點，也可以是一個jsonified的字符串。
• outfile=dist/index設置輸出目錄和文件名（減去擴展名稱）
• outdir=dist使用多個入口點時使用OutDir
• bundleBrowser=true默認情況下，生產一個瀏覽器友好的普通.js捆綁包。
• bundleESM=false生產一個ESM模塊捆綁包，默認情況下將通過.esm.js標識
• bundleTypes=false默認情況下，false，false，false，輸入點需要由打字稿文件，但它將嘗試在repo中生成js文件的類型，否則。這些文件像您使用的DIST文件夾中的存儲庫一樣組織。
• bundleNode=false創建一個單獨的捆綁設置以包括節點依賴關係。由.node.js確定
• bundleHTML=true捆綁包html樣板，該樣板將瀏覽器包裝並執行瀏覽器束作為快速測試。如果True The Packager命令將將此文件設置為startpage，則可以自定義和使用具有相同基礎樣板的index.html。在DIST中找到EG索引。 Build.html。
• external=['node-fetch'] - 您的存儲庫中的標記外部，在我們的許多工作中都使用了node-fetch，因此默認情況下它在那裡，節點捆綁包有其自己的排除（請參閱readme中的esbuild選項）
• platform=browser - 默認情況下，非節點束使用瀏覽器，設置為節點以使所有束定位節點平台。必須適當設置外部。
• globalThis=myCustomBundle您可以在BundleBrowser設置上的入口點上設置任何導出，以作為全局變量訪問。默認設置未設置。
• globals={[entryPoint]:['myFunction']} - 您可以指定從捆綁包導出的任何其他功能，類，變量等，以安裝為BundleBrowser設置上的全球。

服務器參數：

• host=localhost設置服務器的主機名，默認情況下Localhost。服務時，您可以將其設置為服務器URL或IP地址。服務時通常使用端口80。
• port=8080服務器的端口，默認為8080
• protocol=http -HTTP或HTTPS？您需要SSL證書和鑰匙才能運行HTTPS
• python=7000 python服務器的端口，因此節點服務器可以發送殺傷信號，默認情況下為7000。同時運行Python服務器或使用mode=python
• hotreload=5000節點服務器的熱load端口，默認為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頁，in index.html默認
• certpath=tinybuild/node_server/ssl/cert.pem https的證書文件
• keypath=tinybuild/node_server/ssl/key.pem https的密鑰文件
• pwa=tinybuild/pwa/workbox-config.js使用workbox-cli（通過package.json單獨安裝），服務器將在主文件夾中安裝清單。
• config="{"server":{},"bundler":{}}" - 傳遞packager的jsonified config對象。請參閱文檔中的Bundler和服務器設置。
• init將文件夾初始化為帶有必要文件的新的tinybuild存儲庫，您可以使用以下命令包含源
• core=true與適當的軟件包一起在新存儲庫中包含tinybuild源。
• entry=index.js - name您要創建的輸入點文件，默認為index.js
• script=console.log("Hello%20World!") - 傳遞一個JSONIFIED和URI編碼（用於空格等）JavaScript字符串，默認為Hello World的console.log！

本地桌面和移動應用

• electron - 使用樣板啟動電子應用，複製您的區域和指定資產。請參閱電子文檔
• mobile={android:'open',ios:false} - 使用電容器創建一個捆綁的移動應用程序，使用'Open'運行Android Studio或Xcode，或者設置為TREE以使用CLI，前提是您已安裝了依賴關係。請參閱電容器文檔。
• tauri通過Tauri的替代最小桌面運行時間。參見陶里文檔。
• assets=['./assets','favicon.ico'] - 指定其他資產以復製到本機分佈

其他註釋：

有關如何使用這些類型的應用程序，請參見每個子文件夾中的readme.md文件。

安裝問題

如果您已經在Mac上安裝了TinyBuild並且不起作用，請嘗試在此stackoverflow帖子中運行以下命令：

 brew install dos2unix
sudo dos2unix node_modules/tinybuild/tinybuild/bin/global.js

Windows可能還會為全局軟件包權限丟下錯誤，只需將您遇到的錯誤複製到Google中，並使用您找到的命令行解決方案，然後您就可以了。

貢獻

隨意建議或進行更改並通過問題報告錯誤，或直接與Joshua Brewster聯繫，整個開發系統都是模塊化的，是幾種簡化開發工具的簡單自動化。我們在日常開發工作流程中使用它，因此經過戰鬥測試，但樣本量很小。