Package Exports

astro-babel-inline-scripts
astro-babel-inline-scripts/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (astro-babel-inline-scripts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Astro Babel Inline Scripts

Astro plugin to transpile inline scripts using Babel

Note

AstroBabelInlineScripts will only transpile inline scripts in HTML files generated in a build directory

Use AstroBabelInlineScripts last in your integration list.

Installation

Install dependencies manually

First, install the AstroBabelInlineScripts plugin like so:

npm install -D astro-babel-inline-scripts

Then, apply this integration to your astro.config.* file using the integrations property:

astro.config.ts

import babelInlineScripts from "astro-babel-inline-scripts";

export default { integrations: [babelInlineScripts()] };

Getting started

The plugin will now automatically transpile all inline scripts found in HTML files under the Astro outDir folder.

You can provide a custom set of settings for Babel.

astro.config.ts

import babelInlineScripts from "astro-babel-inline-scripts";

export default {
  integrations: [
    babelInlineScripts({
      presets: [
        "minify",
        [
          "@babel/env",
          {
            targets: {
              browsers: ["> .5% or last 2 versions"],
            },
          },
        ],
      ],
    }),
  ],
};

You can disable processing per a route.

Callback takes a route name as a parameter. Route names come from src/pages folder.

E.g. src/pages/contact-us/index.astro turns to /contact-us route

and src/pages/contact-us/form.astro turns to /contact-us/form route

astro.config.ts

import babelInlineScripts from "astro-babel-inline-scripts";

export default {
  integrations: [
    babelInlineScripts(
      {
        presets: [
          [
            "@babel/env",
            {
              targets: {
                browsers: ["> .5% or last 2 versions"],
              },
            },
          ],
        ],
      },
      (route) => {
        // Disable processing for index page.
        if (route === "/") {
          return false;
        }

        return true;
      }
    ),
  ],
};

Changelog

See CHANGELOG.md for a history of changes to this integration.