How to use @babel/standalone - 10 common examples
To help you get started, we’ve selected a few @babel/standalone examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
EffectNode / EffectNode-GUI / src / components / parts / EffectNode / ExecEnv / babel.worker.js View on Github 
// text
let css = JSON.stringify(src)
let code = `
var css = ${css};
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
`
output = Babel.transform(code + `export default ` + css, { presets: ['es2015'], plugins: [...es6], moduleId: path }).code
setTimeout(() => {
resolve({ output })
}, 10)
} else if (path.split('.').pop() === 'vue') {
// vue file
let info = VueCompo.getCompoInfo(src)
var scopeID = 'data-s-' + (Math.ceil(Math.random() * 100000)).toString(36)
let css = JSON.stringify(info.style)
info.template = info.template.replace('>', `${scopeID}>`)
/* eslint-disable */
let code = `
var css = ${css};
var head = document.head || document.getElementsByTagName('head')[0];return new Promise((resolve, reject) => {
var output
try {
if (path.split('.').pop() === 'js') {
// js
output = Babel.transform(src, { presets: ['es2015'], plugins: [...es6], moduleId: path }).code
setTimeout(() => {
resolve({ output })
}, 10)
} else if (path.split('.').pop() === 'json') {
// json
output = Babel.transform(`export default ${JSON.stringify(JSON.parse(src))};`, { presets: ['es2015'], plugins: [...es6], moduleId: path }).code
setTimeout(() => {
resolve({ output })
}, 10)
} else if (path.split('.').pop() === 'html') {
// dont include html in the js file
output = ''
setTimeout(() => {
resolve({ output })
}, 10)
} else if (path.split('.').pop() === 'css') {
// text
let css = JSON.stringify(src)
let code = `
var css = ${css};
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');return new Promise((resolve, reject) => {
var output
try {
if (path.split('.').pop() === 'js') {
// js
output = Babel.transform(src, { presets: ['es2015'], plugins: [...es6], moduleId: path }).code
setTimeout(() => {
resolve({ output })
}, 10)
} else if (path.split('.').pop() === 'json') {
// json
output = Babel.transform(`export default ${JSON.stringify(JSON.parse(src))};`, { presets: ['es2015'], plugins: [...es6], moduleId: path }).code
setTimeout(() => {
resolve({ output })
}, 10)
} else if (path.split('.').pop() === 'html') {
// dont include html in the js file
output = ''
setTimeout(() => {
resolve({ output })
}, 10)
} else if (path.split('.').pop() === 'css') {import requirejsSrc from './str/requirejs.str.txt'
import polyfill from './str/babelpolyfill.str.txt'
var uglify = require('uglifyjs-browser')
console.trace = v => {
if (v !== 'The node type SpreadProperty has been renamed to SpreadElement') {
console.log(v)
}
}
// var dynamicImport = require('babel-plugin-syntax-dynamic-import')
// Babel.registerPlugin('syntax-dynamic-import', dynamicImport)
var dynamicSpread = require('babel-plugin-transform-object-rest-spread')
Babel.registerPlugin('transform-object-rest-spread', dynamicSpread)
var umd = require('babel-plugin-transform-es2015-modules-umd')
Babel.registerPlugin('transform-es2015-modules-umd', umd)
var es6 = [
[ 'transform-object-rest-spread', { 'useBuiltIns': true } ],
[
'transform-es2015-modules-umd',
{
exactGlobals: true
}
]
]
var compile = ({ path, src }) => {
return new Promise((resolve, reject) => {var uglify = require('uglifyjs-browser')
console.trace = v => {
if (v !== 'The node type SpreadProperty has been renamed to SpreadElement') {
console.log(v)
}
}
// var dynamicImport = require('babel-plugin-syntax-dynamic-import')
// Babel.registerPlugin('syntax-dynamic-import', dynamicImport)
var dynamicSpread = require('babel-plugin-transform-object-rest-spread')
Babel.registerPlugin('transform-object-rest-spread', dynamicSpread)
var umd = require('babel-plugin-transform-es2015-modules-umd')
Babel.registerPlugin('transform-es2015-modules-umd', umd)
var es6 = [
[ 'transform-object-rest-spread', { 'useBuiltIns': true } ],
[
'transform-es2015-modules-umd',
{
exactGlobals: true
}
]
]
var compile = ({ path, src }) => {
return new Promise((resolve, reject) => {
var output
try {/**
* Single file expressing all Babel dependencies and applying all plugins so that they will be
* in a single webpack chunk.
*/
// @ts-ignore
import {registerPlugin, transform} from "@babel/standalone";
// @ts-ignore
import NumericSeparatorPlugin from "@babel/plugin-proposal-numeric-separator";
// @ts-ignore
import DynamicImportPlugin from "babel-plugin-dynamic-import-node";
// @ts-ignore
import ReactHotLoaderPlugin from "react-hot-loader/dist/babel.development";
registerPlugin("proposal-numeric-separator", NumericSeparatorPlugin);
registerPlugin("dynamic-import-node", DynamicImportPlugin);
registerPlugin("react-hot-loader", ReactHotLoaderPlugin);
export {transform};// import PresetReact from '@babel/preset-react'
//$todo
// import PresetFlow from '@babel/preset-flow'
//$todo
// import PluginStrictMode from '@babel/plugin-transform-strict-mode'
//$todo
// import PluginClassProps from '@babel/plugin-proposal-class-properties'
//$todo
// import PluginNullish from '@babel/plugin-proposal-nullish-coalescing-operator'
//$todo
// import PluginOptional from '@babel/plugin-proposal-optional-chaining'
//$todo
import {transform, registerPlugin, registerPreset} from '@babel/standalone'
import {babelOptions} from './domain'
registerPlugin('syntax-bigint', PluginBigInt)
// registerPreset('@babel/preset-react', PresetReact)
// registerPreset('@babel/preset-flow', PresetFlow)
// registerPlugin('@babel/plugin-proposal-class-properties', PluginClassProps)
// registerPlugin(
// '@babel/plugin-proposal-nullish-coalescing-operator',
// PluginNullish,
// )
// registerPlugin('@babel/plugin-proposal-optional-chaining', PluginOptional)
// registerPlugin('@babel/plugin-transform-strict-mode', PluginStrictMode)
registerPlugin('effector/babel-plugin', PluginEffector)
registerPlugin('effector/babel-plugin-react', PluginEffectorReact)
registerPlugin('@effector/repl-remove-imports', babel => ({
visitor: {import {babelOptions} from './domain'
registerPlugin('syntax-bigint', PluginBigInt)
// registerPreset('@babel/preset-react', PresetReact)
// registerPreset('@babel/preset-flow', PresetFlow)
// registerPlugin('@babel/plugin-proposal-class-properties', PluginClassProps)
// registerPlugin(
// '@babel/plugin-proposal-nullish-coalescing-operator',
// PluginNullish,
// )
// registerPlugin('@babel/plugin-proposal-optional-chaining', PluginOptional)
// registerPlugin('@babel/plugin-transform-strict-mode', PluginStrictMode)
registerPlugin('effector/babel-plugin', PluginEffector)
registerPlugin('effector/babel-plugin-react', PluginEffectorReact)
registerPlugin('@effector/repl-remove-imports', babel => ({
visitor: {
ImportDeclaration(path) {
path.remove()
},
ExportDefaultDeclaration(path) {
path.remove()
},
ExportNamedDeclaration(path) {
if (babel.types.isVariableDeclaration(path.node.declaration)) {
path.replaceWith(path.node.declaration)
} else {
path.remove()
}
},registerPlugin('syntax-bigint', PluginBigInt)
// registerPreset('@babel/preset-react', PresetReact)
// registerPreset('@babel/preset-flow', PresetFlow)
// registerPlugin('@babel/plugin-proposal-class-properties', PluginClassProps)
// registerPlugin(
// '@babel/plugin-proposal-nullish-coalescing-operator',
// PluginNullish,
// )
// registerPlugin('@babel/plugin-proposal-optional-chaining', PluginOptional)
// registerPlugin('@babel/plugin-transform-strict-mode', PluginStrictMode)
registerPlugin('effector/babel-plugin', PluginEffector)
registerPlugin('effector/babel-plugin-react', PluginEffectorReact)
registerPlugin('@effector/repl-remove-imports', babel => ({
visitor: {
ImportDeclaration(path) {
path.remove()
},
ExportDefaultDeclaration(path) {
path.remove()
},
ExportNamedDeclaration(path) {
if (babel.types.isVariableDeclaration(path.node.declaration)) {
path.replaceWith(path.node.declaration)
} else {
path.remove()
}
},
},
}))registerPlugin('syntax-bigint', PluginBigInt)
// registerPreset('@babel/preset-react', PresetReact)
// registerPreset('@babel/preset-flow', PresetFlow)
// registerPlugin('@babel/plugin-proposal-class-properties', PluginClassProps)
// registerPlugin(
// '@babel/plugin-proposal-nullish-coalescing-operator',
// PluginNullish,
// )
// registerPlugin('@babel/plugin-proposal-optional-chaining', PluginOptional)
// registerPlugin('@babel/plugin-transform-strict-mode', PluginStrictMode)
registerPlugin('effector/babel-plugin', PluginEffector)
registerPlugin('effector/babel-plugin-react', PluginEffectorReact)
registerPlugin('@effector/repl-remove-imports', babel => ({
visitor: {
ImportDeclaration(path) {
path.remove()
},
ExportDefaultDeclaration(path) {
path.remove()
},
ExportNamedDeclaration(path) {
if (babel.types.isVariableDeclaration(path.node.declaration)) {
path.replaceWith(path.node.declaration)
} else {
path.remove()
}
},
},@babel/standalone
Standalone build of Babel for use in non-Node.js environments.
