Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@babel/standalone
Advanced tools
Standalone build of Babel for use in non-Node.js environments.
@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.
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);
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 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 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.
@babel/standalone is a standalone build of Babel for use in non-Node.js environments, including browsers. It's bundled with all the standard Babel plugins and presets, and a build of babili (babel-minify) is optionally available too.
It's true that using Babel through Webpack, Browserify or Gulp should be sufficient for most use cases. However, there are some valid use cases for @babel/standalone:
There are several ways to get a copy of @babel/standalone. Pick whichever one you like:
npm install --save @babel/standalone
babel.js
and/or babel.min.js
from the GitHub releases page. Every release includes these files.Load babel.js
or babel.min.js
in your environment. This will expose Babel's API in a Babel
object:
var input = 'const getMessage = () => "Hello World";';
var output = Babel.transform(input, { presets: ['es2015'] }).code;
When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel
or text/jsx
:
<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>
You can use the data-plugins
and data-presets
attributes to specify the Babel plugins/presets to use:
<script type="text/babel" data-presets="es2015,stage-2">
Loading external scripts via src
attribute is supported too:
<script type="text/babel" src="foo.js"></script>
Note that .babelrc
doesn't work in @babel/standalone, as no file system access is available. The presets and/or plugins to use must be specified in the options passed to Babel.transform
.
Custom plugins and presets can be added using the registerPlugin
and registerPreset
methods respectively:
// Simple plugin that converts every identifier to "LOL"
function lolizer() {
return {
visitor: {
Identifier(path) {
path.node.name = 'LOL';
}
}
}
}
Babel.registerPlugin('lolizer', lolizer);
Once registered, just use the name of the plugin:
var output = Babel.transform(
'function helloWorld() { alert(hello); }',
{plugins: ['lolizer']}
);
// Returns "function LOL() { LOL(LOL); }"
Custom plugins also work for inline <script>
s:
<script type="text/babel" data-plugins="lolizer">
FAQs
Standalone build of Babel for use in non-Node.js environments.
The npm package @babel/standalone receives a total of 810,652 weekly downloads. As such, @babel/standalone popularity was classified as popular.
We found that @babel/standalone demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.