Asto JavaScript/TypeScript Bundler

0.1.0 · active · verified Tue Apr 21

Asto is a minimalist JavaScript and TypeScript package bundler designed for small bundle sizes, claiming to be only 9kb. As of version `0.1.0`, it provides core bundling capabilities with built-in TypeScript support and an extendable loader architecture. It defaults to using `esbuild` for performance but also offers an optional Webpack loader for scenarios requiring more advanced or stable bundling features typically associated with Webpack. The package is currently in its very early stages of development, indicated by its `0.1.0` version, suggesting an active but potentially rapidly evolving API and feature set. Its primary differentiation lies in its small footprint and focus on simplicity, making it a lightweight alternative for projects that don't require the full complexity of larger bundlers. Release cadence is currently irregular given its early stage.

Common errors

```
Cannot find module '@asto/webpack' or 'webpack'
```
cause The optional Webpack loader integration or Webpack itself has not been installed.

fix Install the necessary packages as development dependencies: `npm install --save-dev @asto/webpack webpack`
```
TypeError: asto is not a function (or similar module loading error)
```
cause Attempting to use CommonJS `require()` syntax in an ES Module (ESM) context, or vice-versa, or incorrect named import.

fix Ensure your project's module system (CommonJS or ES Modules) aligns with how you import `asto`. For ES Modules, use `import { asto } from "asto"`. If using CommonJS, `const { asto } = require('asto')` should be correct.

Warnings

breaking Asto is currently in its very early stages (v0.1.0), meaning API surfaces are highly unstable and subject to frequent, breaking changes without adherence to SemVer major version bumps. Users should anticipate rapid evolution.
Fix: Pin Asto package versions exactly in your `package.json` (e.g., `'asto': '0.1.0'`) and review changelogs or GitHub commits carefully with each update. Consider delaying adoption for production systems requiring high stability.
gotcha The default configuration for Asto uses `esbuild` internally. When switching to the optional Webpack loader, ensure you understand Webpack's configuration nuances, especially regarding TypeScript and external modules.
Fix: Refer to Webpack's official documentation for advanced loader and plugin configurations. The `@asto/webpack` package provides a wrapper, but core Webpack knowledge is essential for complex setups.

Install

npm install asto npm
yarn add asto yarn
pnpm add asto pnpm

Imports

asto
wrong:
```
const { asto } = require('asto')
```
correct:
```
import { asto } from 'asto'
```
While README examples use CommonJS `require`, modern TypeScript/ESM projects should prefer named ES module imports. Asto ships with TypeScript types.
watch
wrong:
```
const { watch } = require('asto')
```
correct:
```
import { watch } from 'asto'
```
The `watch` function for rebuilding on file changes also supports ES module imports.
webpackLoader
wrong:
```
const { webpackLoader } = require('@asto/webpack')
```
correct:
```
import { webpackLoader } from '@asto/webpack'
```
This utility from the optional `@asto/webpack` integration package supports ES module imports. Remember to install `@asto/webpack` and `webpack`.

Quickstart

Demonstrates how to configure Asto with the optional Webpack loader for TypeScript projects, bundling multiple entry points and handling assets with specified Webpack options.

import { asto } from 'asto';
import { webpackLoader } from '@asto/webpack';

// Install @asto/webpack and webpack first: npm i -D @asto/webpack webpack

asto({
  loader: webpackLoader(
    {
      typescript: true, // Enable TypeScript processing
      nodeExternals: true, // Exclude node_modules from the bundle
    },
    {
      // Additional webpack options can go here, e.g., output configuration
      output: {
        filename: '[name].js',
        path: new URL('./dist', import.meta.url).pathname,
      },
    }
  ),
  entryPoints: [
    'src/index.ts', // Your primary application entry point
    {
      input: 'assets/image.png',
      output: 'dist/assets/image.png',
      builder: 'asset',
    },
  ],
}).then(() => {
  console.log('Asto bundling complete with Webpack loader.');
}).catch(err => {
  console.error('Asto bundling failed:', err);
});

view raw JSON →