Skip to content

Transform JS Plugin

A staticbolt plugin that transforms JavaScript and TypeScript files with Babel. It handles TypeScript, JSX, and TSX out of the box, targets your project's browserslist automatically, and merges any Babel configuration it finds in the project root.

Installation

The plugin ships as part of @staticbolt/core. You do not need to install anything else.

Usage

In your .staticbolt.ts configuration file:

import { defineConfig } from "@staticbolt/core";
import { transformJsPlugin } from "@staticbolt/core/plugins";
export default defineConfig({
plugins: [transformJsPlugin()],
});

What the plugin does by default

The plugin applies all of the following on every build:

  • Strips TypeScript types and supports JSX and TSX via @babel/preset-typescript.
  • Transpiles syntax for your target browsers via @babel/preset-env, based on the project's configured browserslist.
  • Injects the _production build-time constant, which resolves to true in production and false in development.
  • Renames .ts, .jsx, and .tsx files to .js in the output.
  • Loads and merges any babel.config.* or .babelrc file it finds in the project root.

Adding custom presets and plugins

Pass extra Babel presets or plugins in the options to extend the default behavior.

transformJsPlugin({
presets: [["@babel/preset-react", { runtime: "automatic" }]],
plugins: ["@babel/plugin-proposal-decorators"],
});

Plugin Options

presets

  • Type: babel.PluginItem[]
  • Default: []

Additional Babel presets to apply alongside the built-in ones.

plugins

  • Type: babel.PluginItem[]
  • Default: []

Additional Babel plugins to apply alongside the built-in ones.