{"id":15519,"library":"asto","title":"Asto JavaScript/TypeScript Bundler","description":"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.","status":"active","version":"0.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/do4ng/asto","tags":["javascript","typescript"],"install":[{"cmd":"npm install asto","lang":"bash","label":"npm"},{"cmd":"yarn add asto","lang":"bash","label":"yarn"},{"cmd":"pnpm add asto","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Optional loader for integrating with Webpack for bundling. Typically installed as a dev dependency.","package":"@asto/webpack","optional":true},{"reason":"Required by @asto/webpack when using the Webpack loader. Typically installed as a dev dependency.","package":"webpack","optional":true}],"imports":[{"note":"While README examples use CommonJS `require`, modern TypeScript/ESM projects should prefer named ES module imports. Asto ships with TypeScript types.","wrong":"const { asto } = require('asto')","symbol":"asto","correct":"import { asto } from 'asto'"},{"note":"The `watch` function for rebuilding on file changes also supports ES module imports.","wrong":"const { watch } = require('asto')","symbol":"watch","correct":"import { watch } from 'asto'"},{"note":"This utility from the optional `@asto/webpack` integration package supports ES module imports. Remember to install `@asto/webpack` and `webpack`.","wrong":"const { webpackLoader } = require('@asto/webpack')","symbol":"webpackLoader","correct":"import { webpackLoader } from '@asto/webpack'"}],"quickstart":{"code":"import { asto } from 'asto';\nimport { webpackLoader } from '@asto/webpack';\n\n// Install @asto/webpack and webpack first: npm i -D @asto/webpack webpack\n\nasto({\n  loader: webpackLoader(\n    {\n      typescript: true, // Enable TypeScript processing\n      nodeExternals: true, // Exclude node_modules from the bundle\n    },\n    {\n      // Additional webpack options can go here, e.g., output configuration\n      output: {\n        filename: '[name].js',\n        path: new URL('./dist', import.meta.url).pathname,\n      },\n    }\n  ),\n  entryPoints: [\n    'src/index.ts', // Your primary application entry point\n    {\n      input: 'assets/image.png',\n      output: 'dist/assets/image.png',\n      builder: 'asset',\n    },\n  ],\n}).then(() => {\n  console.log('Asto bundling complete with Webpack loader.');\n}).catch(err => {\n  console.error('Asto bundling failed:', err);\n});","lang":"typescript","description":"Demonstrates how to configure Asto with the optional Webpack loader for TypeScript projects, bundling multiple entry points and handling assets with specified Webpack options."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=0.1.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Install the necessary packages as development dependencies: `npm install --save-dev @asto/webpack webpack`","cause":"The optional Webpack loader integration or Webpack itself has not been installed.","error":"Cannot find module '@asto/webpack' or 'webpack'"},{"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.","cause":"Attempting to use CommonJS `require()` syntax in an ES Module (ESM) context, or vice-versa, or incorrect named import.","error":"TypeError: asto is not a function (or similar module loading error)"}],"ecosystem":"npm"}