feat(config): migrate project configuration to smartconfig.json and update bundler dependencies
This commit is contained in:
120
readme.md
120
readme.md
@@ -1,6 +1,6 @@
|
||||
# @git.zone/tsbundle
|
||||
|
||||
A powerful multi-bundler tool supporting **esbuild**, **rolldown**, and **rspack** for painless bundling of web projects. 🚀
|
||||
A powerful multi-bundler tool supporting **esbuild**, **rolldown**, and **rspack** for painless bundling of web projects.
|
||||
|
||||
## Issue Reporting and Security
|
||||
|
||||
@@ -10,16 +10,13 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
|
||||
|
||||
```bash
|
||||
# Global installation for CLI usage
|
||||
npm install -g @git.zone/tsbundle
|
||||
pnpm add -g @git.zone/tsbundle
|
||||
|
||||
# Local installation for project usage
|
||||
npm install --save-dev @git.zone/tsbundle
|
||||
|
||||
# Or with pnpm
|
||||
pnpm add -g @git.zone/tsbundle
|
||||
pnpm add --save-dev @git.zone/tsbundle
|
||||
```
|
||||
|
||||
## Quick Start ⚡
|
||||
## Quick Start
|
||||
|
||||
### Interactive Setup
|
||||
|
||||
@@ -29,11 +26,11 @@ The easiest way to get started is with the interactive wizard:
|
||||
tsbundle init
|
||||
```
|
||||
|
||||
This will guide you through setting up your bundle configuration with preset options:
|
||||
This guides you through setting up your bundle configuration with preset options:
|
||||
|
||||
- **element** - Web component / element bundle (`./ts_web/index.ts` → `./dist_bundle/bundle.js`)
|
||||
- **website** - Full website with HTML and assets (`./ts_web/index.ts` → `./dist_serve/bundle.js`)
|
||||
- **npm** - NPM package bundle (`./ts/index.ts` → `./dist_bundle/bundle.js`)
|
||||
- **element** - Web component / element bundle (`./ts_web/index.ts` -> `./dist_bundle/bundle.js`)
|
||||
- **website** - Full website with HTML and assets (`./ts_web/index.ts` -> `./dist_serve/bundle.js`)
|
||||
- **npm** - NPM package bundle (`./ts/index.ts` -> `./dist_bundle/bundle.js`)
|
||||
- **custom** - Configure everything manually
|
||||
|
||||
### Build Your Bundles
|
||||
@@ -44,19 +41,19 @@ Once configured, simply run:
|
||||
tsbundle
|
||||
```
|
||||
|
||||
That's it! Your bundles will be built according to your `npmextra.json` configuration.
|
||||
Your bundles will be built according to your `smartconfig.json` configuration.
|
||||
|
||||
## CLI Commands
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `tsbundle` | Build all bundles from `npmextra.json` configuration |
|
||||
| `tsbundle` | Build all bundles from `smartconfig.json` configuration |
|
||||
| `tsbundle custom` | Same as above (explicit) |
|
||||
| `tsbundle init` | Interactive wizard to create/update bundle configuration |
|
||||
|
||||
## Configuration 📝
|
||||
## Configuration
|
||||
|
||||
tsbundle uses `npmextra.json` for configuration. Here's an example:
|
||||
tsbundle uses `smartconfig.json` for configuration. Here's an example:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -109,22 +106,24 @@ export const files: { path: string; contentBase64: string }[] = [
|
||||
];
|
||||
```
|
||||
|
||||
**Tip:** If you're working with AI tools that have line length limitations, set `maxLineLength` (e.g., `200`) to split long base64 strings across multiple lines.
|
||||
If you're working with AI tools that have line length limitations, set `maxLineLength` (e.g., `200`) to split long base64 strings across multiple lines.
|
||||
|
||||
## Available Bundlers 🔧
|
||||
## Available Bundlers
|
||||
|
||||
tsbundle supports three modern bundlers:
|
||||
tsbundle supports three modern bundlers, each with different strengths:
|
||||
|
||||
| Bundler | Speed | Best For |
|
||||
|---------|-------|----------|
|
||||
| **esbuild** | ⚡⚡⚡ Blazing fast | Development, quick iterations |
|
||||
| **rolldown** | ⚡⚡ Fast | Production builds, tree-shaking |
|
||||
| **rspack** | ⚡⚡ Fast | Webpack compatibility |
|
||||
| Bundler | Speed | Bundle Size | Best For |
|
||||
|---------|-------|-------------|----------|
|
||||
| **esbuild** | Fastest | Medium | Development, quick iterations |
|
||||
| **rolldown** | Fast | Smallest | Production builds, tree-shaking |
|
||||
| **rspack** | Fast | Largest (webpack runtime) | Webpack compatibility |
|
||||
|
||||
## API Usage
|
||||
|
||||
### TsBundle Class
|
||||
|
||||
The core bundling class, usable programmatically:
|
||||
|
||||
```typescript
|
||||
import { TsBundle } from '@git.zone/tsbundle';
|
||||
|
||||
@@ -135,15 +134,17 @@ await bundler.build(
|
||||
'./src/index.ts', // Entry point
|
||||
'./dist/bundle.js', // Output path
|
||||
{
|
||||
bundler: 'esbuild',
|
||||
bundler: 'esbuild', // 'esbuild' | 'rolldown' | 'rspack'
|
||||
production: true
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
Each bundler runs in a separate child process via `smartspawn.ThreadSimple`, keeping the main process clean and isolated from bundler-specific dependencies.
|
||||
|
||||
### HtmlHandler Class
|
||||
|
||||
Process and minify HTML files:
|
||||
Process and optionally minify HTML files:
|
||||
|
||||
```typescript
|
||||
import { HtmlHandler } from '@git.zone/tsbundle';
|
||||
@@ -159,7 +160,7 @@ await htmlHandler.processHtml({
|
||||
|
||||
### AssetsHandler Class
|
||||
|
||||
Handle static assets:
|
||||
Copy static assets between directories:
|
||||
|
||||
```typescript
|
||||
import { AssetsHandler } from '@git.zone/tsbundle';
|
||||
@@ -172,59 +173,34 @@ await assetsHandler.processAssets({
|
||||
});
|
||||
```
|
||||
|
||||
## Complete Example 🎯
|
||||
### Base64TsOutput Class
|
||||
|
||||
### 1. Initialize your project
|
||||
Generate TypeScript files with base64-encoded content for embedding:
|
||||
|
||||
```bash
|
||||
tsbundle init
|
||||
```typescript
|
||||
import { Base64TsOutput } from '@git.zone/tsbundle';
|
||||
|
||||
const output = new Base64TsOutput(process.cwd());
|
||||
output.addFile('bundle.js', bundleBuffer);
|
||||
await output.addFilesFromGlob('./html/**/*.html');
|
||||
await output.writeToFile('./ts/embedded-bundle.ts', 200); // optional maxLineLength
|
||||
```
|
||||
|
||||
Select "website" preset for a full web application setup.
|
||||
### CustomBundleHandler Class
|
||||
|
||||
### 2. Your generated config
|
||||
Process multiple bundle configurations from `smartconfig.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"@git.zone/tsbundle": {
|
||||
"bundles": [
|
||||
{
|
||||
"from": "./ts_web/index.ts",
|
||||
"to": "./dist_serve/bundle.js",
|
||||
"outputMode": "bundle",
|
||||
"bundler": "esbuild",
|
||||
"includeFiles": ["./html/**/*.html", "./assets/**/*"]
|
||||
}
|
||||
]
|
||||
}
|
||||
```typescript
|
||||
import { CustomBundleHandler } from '@git.zone/tsbundle';
|
||||
|
||||
const handler = new CustomBundleHandler(process.cwd());
|
||||
const hasConfig = await handler.loadConfig();
|
||||
if (hasConfig) {
|
||||
await handler.processAllBundles();
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Create your entry point
|
||||
|
||||
```typescript
|
||||
// ts_web/index.ts
|
||||
console.log('Hello from tsbundle! 🚀');
|
||||
|
||||
export const app = {
|
||||
version: '1.0.0',
|
||||
init() {
|
||||
console.log('App initialized');
|
||||
}
|
||||
};
|
||||
|
||||
app.init();
|
||||
```
|
||||
|
||||
### 4. Build
|
||||
|
||||
```bash
|
||||
tsbundle
|
||||
```
|
||||
|
||||
Your bundle is ready in `./dist_serve/bundle.js` along with any HTML and assets!
|
||||
|
||||
## Embedding for Deno Compile 🦕
|
||||
## Embedding for Deno Compile
|
||||
|
||||
For single-executable scenarios with Deno:
|
||||
|
||||
@@ -264,7 +240,7 @@ const bundleContent = atob(bundle.contentBase64);
|
||||
const htmlContent = atob(html.contentBase64);
|
||||
```
|
||||
|
||||
## Project Structure Recommendations 📁
|
||||
## Project Structure Recommendations
|
||||
|
||||
```
|
||||
your-project/
|
||||
@@ -277,7 +253,7 @@ your-project/
|
||||
├── assets/ # Static assets (images, fonts, etc.)
|
||||
├── dist_bundle/ # Output for element/npm bundles
|
||||
├── dist_serve/ # Output for website bundles
|
||||
└── npmextra.json # tsbundle configuration
|
||||
└── smartconfig.json # tsbundle configuration
|
||||
```
|
||||
|
||||
## License and Legal Information
|
||||
|
||||
Reference in New Issue
Block a user