![Malicious npm Package Typosquats react-login-page to Deploy Keylogger](https://cdn.sanity.io/images/cgdhsj6q/production/007b21d9cf9e03ae0bb3f577d1bd59b9d715645a-1024x1024.webp?w=400&fit=max&auto=format)
Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
@babel/standalone
Advanced tools
Package description
@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.
Readme
@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:
bower install @babel/standalone
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@6/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
Unknown package
The npm package @babel/standalone receives a total of 742,333 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.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.