tinybuild
1.0.0
npm i -g tinybuild или npm i tinybuild в местных проектах.
Пожалуйста, внесите свой вклад, если вы заинтересованы в этом для вашей собственной автоматизации рабочего процесса, в настоящее время мы редактируем, ломаем и исправляем это на основе нашей собственной разработки, чтобы абсолютно никакого контроля источника не было, но мы стараемся сделать его как можно более универсальным.
 |  |  |  |  |
Это комбинация Bundler и Development Server, который вы всегда хотели. Прощай, эзотерические инструкции, прощальные громоздкие зависимости и прощальное время потрачено впустую, уставившись на ваш компилятор! Переезд через WebPack, Parcel и ViTe, в городе появилась новая игра.
Предварительные условия: последние nodejs lts
npm i -g tinybuild
tinybuild
Вы готовы разработать свои приложения или библиотеки!
Измените tinybuild.config.js и package.json на ваши потребности. Вы можете добавить build:true или SET server:false в конфигурации, чтобы отключить сервер разработки.
TinyBuild также работает как локальная зависимость, например, npx tinybuild или выполнение сценария Packager через node.js в пользовательском сценарии. Смотрите DOCS для получения более подробной информации и ознакомьтесь с исходным кодом.
Профилаки Bundler и сервера включают в себя полный CLI, файл конфигурации или функциональную (In-Script) обертку для настройки ESBUILD и сервера, а также для создания нескольких дистрибутивов из одной конфигурации (например, для браузера, ESM, узла). Компания и обслуживает сложные библиотеки и программы в миллисекундах с горячей перезагружающей тестовой средой и облегчает масштаб до производства.
В папке проекта с package.json (например, после первого запуска 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 автоматически скомпилируется, если вы импортируете их в свои сценарии. Смотрите примеры для большего.
Для использования TinyBuild локально ( npm install VS npm install -g ) вы должны самостоятельно импортировать и запустить packager(config) из библиотеки TinyBuild и запустить его в файле скрипта.
Создайте tinybuild.js в корне вашего каталога проекта
import { packager } from 'tinybuild'
import config from './tinybuild.config.js'
packager ( config ) ; Затем в консоли из этой каталога проекта запустите node tinybuild.js
Например, tinybuild build или tinybuild serve
Списки tinybuild help составляют принятые аргументы, см. Бойную пластину, созданную в новом репо, для большего. Команда tinybuild будет использовать ваш отредактированный tinybuild.config.js или tinybuild.js (который включает в себя библиотеку и выполняет пакер с bundler и/или самим сервером для большего контроля) файл конфигурации) после инициализации, чтобы вы могли использовать его в целом, иначе см. package.json для получения дополнительных локальных команд.
Глобальная команда:
tinybuild - запускает настройки BoilerPlate TinyBuild Bundler + Server в текущем рабочем каталоге. Он создаст отсутствующий index.js, package.json (с установкой Auto NPM/YARN) и TinyBuild.js, и подавать с папками с наблюдением в рабочих каталогах (минус node_modules, потому что он замедляется) для горячей перезагрузки.локальная команда:
node path/to/tinybuild.js - будет использовать текущий рабочий каталог в качестве ссылки для запуска этой конфигурации Packagerstart - запускает эквивалент node tinybuild.js в текущем рабочем каталоге.build / bundle - Запуск Bundler Esbuild, может указать config с помощью config={"bundler":{}} через jsonified объектserve - запускает сервер разработки узла, может указать config с помощью config={"server":{}} через jsonified объект и объектmode=python - запускает сервер разработки, а также Python, который также обслуживает DIST из отдельного порта (7000 по умолчанию).mode=dev для режима Dev Server (используется по умолчанию, если вы просто вводите tinybuild на шаблоне)path=custom.js - нацеливаться на пользовательский эквивалентный файл ввода tinybuild.js (для запуска Packager или Bundler/Server) ST` - Имя хоста для сервера, Localhost по умолчаниюentryPoints=index.js - установите точку входа для вашего сценария, также может быть jsonified Mrake of Strings.outfile=dist/index - установите выходной каталог и имя файла (за исключением имени расширения)outdir=dist - альтернативно используйте Outdir при использовании нескольких точек входаbundleBrowser=true -создайте простой пучок.bundleESM=false - создайте пакет модулей ESM, по умолчанию, будет идентифицирован .esm.jsbundleTypes=false - производить файлы .d.ts, false по умолчанию, точка записи необходимо с помощью файла TypeScript, но в противном случае он попытается генерировать типы для файлов JS в репо. Файлы организованы как ваш репо в используемой папке Dist.bundleNode=false - создайте отдельный комплект пакета, чтобы включить зависимости узлов. Идентифицируется .node.jsbundleHTML=true - свяжите HTML -шаблон, который завершает и выполняет пакет браузера в качестве быстрых испытаний. Если True, команда Packager установит этот файл в качестве стартовой страницы, в противном случае у вас есть index.html, который вы можете настроить и использовать, который имеет одинаковую базовую парену. Найти EG index.build.html в Dist.external=['node-fetch'] -отметьте внешние внешности в вашем репо, узел используется во многих наших работах, так что он там по умолчанию, пакет узлов имеет свои собственные исключения (см. Наши параметры Esbuild в Readme)platform=browser -Неузлные пакеты используют браузер по умолчанию, установив в узле, чтобы все пучки были нацелены на платформу узлов. Внешние должны быть установлены соответствующим образом.globalThis=myCustomBundle - вы можете установить любой экспорт в своих точках входа в настройку Bundlebrowser, чтобы быть доступной в качестве глобальной переменной. Не установлен по умолчанию.globals={[entryPoint]:['myFunction']} - Вы можете указать любые дополнительные функции, классы, переменные и т. Д. Экспортируемые из вашего пакета для установки в качестве глобалов в настройке Bundlebrowser.host=localhost - установите имя хоста для сервера, локальный хост по умолчанию. Вы можете установить его на URL -адрес вашего сервера или IP -адрес при обслуживании. Обычно используйте порт 80 при обслуживании.port=8080 - порт для сервера, 8080 по умолчаниюprotocol=http - http или https? Вам нужен сертификат SSL и ключ для запуска httpspython=7000 - Порт для Python Server, чтобы сервер узлов мог отправлять сигнал убийства по умолчанию 7000. Запустите сервер Python одновременно или используйте mode=pythonhotreload=5000 - порт HotReload для сервера узлов, 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 -страница html для дома '/' index.html по умолчаниюcertpath=tinybuild/node_server/ssl/cert.pem - файл cert для httpskeypath=tinybuild/node_server/ssl/key.pem - файл ключа для httpspwa=tinybuild/pwa/workbox-config.js -конфигурация обслуживания для PWA с использованием workbox-cli (установлен отдельно через package.json), сервер установит manifest.json в основной папке, если не найдено, https требуется https.config="{"server":{},"bundler":{}}" - пройти объект конфигурации JOnisified для Packager. Смотрите настройки Bundler и сервера в документах.init - инициализируйте папку в качестве нового репозитория TinyBuild с необходимыми файлами, вы можете включить источник, используя команду нижеcore=true - включите источник крошечной бирды в новый репозиторий с соответствующим пакетом.jsonentry=index.js -Назовите файл точки входа, который вы хотите создать, по умолчанию в index.jsscript=console.log("Hello%20World!") -передайте jonisified и uri-кодированную (для пространств и т. Д.) Строка JavaScript, по умолчанию в консоли. Log of Hello World!electron - запустите электронное приложение с шаблоном, копируя ваши Dist и указанные активы. Смотрите электронные документыmobile={android:'open',ios:false} - Используйте конденсатор для создания комплексного мобильного приложения, используйте «Открыть» для запуска Android Studio или XCode или установить для использования CLI, предполагая, что у вас установлены зависимости. Смотрите конденсаторные документы.tauri - Альтернативное минимальное время выполнения рабочего стола через Таури. Смотрите доктора Таури.assets=['./assets','favicon.ico'] - Укажите дополнительные активы для копирования на собственные распределенияСм. Файлы readme.md в каждой подпапке, чтобы узнать больше о том, как работать с этими типами приложений.
Если вы установили TinyBuild на Mac, и она не работает, попробуйте запустить следующую команду в терминале на основе этого поста StackOverflow:
brew install dos2unix
sudo dos2unix node_modules/tinybuild/tinybuild/bin/global.js
Windows также может добавить ошибку для разрешений на глобальное пакет, просто скопируйте ошибку, которую вы попадаете в Google, и использовать решение командной строки, которое вы найдете, и вам будет хорошо.
Не стесняйтесь предлагать или вносить изменения и сообщать об ошибках через проблемы или прямой контакт с Джошуа Брюстером, вся система разработки модульная и является простой автоматизацией в дополнение к нескольким упрощенным инструментам разработки. Мы используем это в нашем ежедневном рабочем процессе развития, так что он испытывается в бою, но на небольшом размере выборки.
