@babel/standalone

What is @babel/standalone?

@babel/standalone is a standalone build of Babel for use in browsers and other non-Node.js environments. It allows you to transpile ES6+ code to ES5 directly in the browser or other environments without needing a build step.

What are @babel/standalone's main functionalities?

Transpile ES6+ to ES5

This feature allows you to transpile modern JavaScript (ES6+) to older versions (ES5) directly in the browser. The code sample demonstrates how to transform an ES6 arrow function to ES5 using the 'env' preset.

const inputCode = 'const arrowFunction = () => {};';
const outputCode = Babel.transform(inputCode, { presets: ['env'] }).code;
console.log(outputCode);

Use Babel plugins

You can use Babel plugins to transform specific JavaScript features. The code sample shows how to transform ES6 classes to ES5 using the 'transform-es2015-classes' plugin.

const inputCode = 'class Example {}';
const outputCode = Babel.transform(inputCode, { plugins: ['transform-es2015-classes'] }).code;
console.log(outputCode);

Custom Babel configurations

You can customize Babel configurations to target specific environments. The code sample demonstrates how to use the 'env' preset with custom browser targets.

const inputCode = 'const x = 1;';
const outputCode = Babel.transform(inputCode, { presets: [['env', { targets: { browsers: ['last 2 versions'] } }]] }).code;
console.log(outputCode);

Other packages similar to @babel/standalone

typescript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It offers type-checking and transpilation from TypeScript to JavaScript. Unlike @babel/standalone, TypeScript focuses on adding static types to JavaScript.

traceur

Traceur is a JavaScript.next-to-JavaScript-of-today compiler. It allows you to use features from the latest JavaScript standard (ES6 and beyond) and compiles them to ES5. Traceur is similar to @babel/standalone but is less flexible in terms of plugins and presets.

esbuild

esbuild is an extremely fast JavaScript bundler and minifier. It supports modern JavaScript and TypeScript syntax and can transpile to older versions of JavaScript. Unlike @babel/standalone, esbuild is designed for speed and efficiency in build processes.

README

@babel/standalone

Standalone build of Babel for use in non-Node.js environments.

See our website @babel/standalone for more information or the issues associated with this package.

Install

Using npm:

npm install --save-dev @babel/standalone

or using yarn:

yarn add @babel/standalone --dev

Changelog

v7.22.11 (2023-08-24)

:bug: Bug Fix

• babel-plugin-transform-typescript
  • #15882 Fix: fully remove TS nested type-only exported namespaces (@yangguansen)
• babel-types
  • #15867 fix: definition of TS function type params (@danez)
• babel-plugin-transform-async-generator-functions, babel-plugin-transform-class-static-block, babel-plugin-transform-dynamic-import, babel-plugin-transform-export-namespace-from, babel-plugin-transform-json-strings, babel-plugin-transform-logical-assignment-operators, babel-plugin-transform-nullish-coalescing-operator, babel-plugin-transform-numeric-separator, babel-plugin-transform-object-rest-spread, babel-plugin-transform-optional-catch-binding, babel-plugin-transform-optional-chaining, babel-plugin-transform-private-property-in-object
  • #15858 fix(standalone): strip archived syntax plugins (@JLHwung)
• babel-core
  • #15850 Support configuring cache in ESM configs (@nicolo-ribaudo)

:house: Internal

• babel-parser
  • #10940 Do not record trailing comma pos when maybeAsyncArrow: false (@JLHwung)
• babel-core, babel-helper-compilation-targets, babel-parser, babel-plugin-proposal-destructuring-private, babel-plugin-syntax-decorators, babel-preset-env, babel-preset-react, babel-register, babel-traverse, babel-types
  • #15872 enable jest/no-standalone-expect (@JLHwung)
• babel-core, babel-helpers, babel-plugin-transform-async-generator-functions, babel-plugin-transform-modules-commonjs, babel-plugin-transform-regenerator, babel-preset-env, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
  • #15833 bump json5, terser and webpack, further minimize babel helpers (@JLHwung)
• Other
  • #15846 Use Babel 8.0 alpha to build babel (@JLHwung)
  • #15856 Exclude redundant files from publish process (@JLHwung)

:microscope: Output optimization

• babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-transform-class-properties, babel-plugin-transform-classes, babel-plugin-transform-optional-chaining, babel-preset-env
  • #15871 Simplify ?. output when chain result is ignored (@nicolo-ribaudo)