Home

Index

How to use the transform function from @babel/core

Find comprehensive JavaScript @babel/core.transform code examples handpicked from public code repositorys.

@babel/core.transform is a function in Babel that transforms ECMAScript 2015+ code into a backwards compatible version of JavaScript.

addvm.js

9
10
11
12
13
14
15
16
17
18
names.split(',').forEach(function (name) {
  hash[name] = true
})

function addvm (code) {
  var r = babel.transform(code, {
    plugins: [function ({ types: t }) {
      return {
        visitor: {
          Identifier: function (path, state) {

925

+ 5 other calls in file

index.js

GitHub: bmorelli25/eui

7
8
9
10
11
12
13
14
15
16

const importedDefinitionsCache = new Map();

// react-docgen does not understand typescript annotations
function stripTypeScript(filename, ast) {
  return babelCore.transform(babelCore.transformFromAst(ast).code, {
    filename: filename,
    babelrc: false,
    presets: ['@babel/typescript'],
    plugins: ['@babel/plugin-syntax-dynamic-import'],

755

+ 5 other calls in file

How does @babel/core.transform work?

@babel/core.transform is a function provided by the Babel compiler that takes in a JavaScript code string, along with a configuration object specifying the desired transformations, and returns an object containing the transformed code, as well as any associated metadata. When called, the function first parses the input code string into an abstract syntax tree (AST), which represents the structure of the code in a format that can be more easily manipulated. The configuration object is then used to traverse and modify the AST as needed, typically using a set of plugins or presets that define the specific transformations to apply. Finally, the transformed code is generated by printing the modified AST back out to a string representation.

demoPreprocessor.js

GitHub: ant-design/antd-tools

117
118
119
120
121
122
123
124
125
126
  ]);
}

babelConfig.filename = path;

src = babel.transform(src, babelConfig).code;

return {
  code: src,
};

150

383

+ 5 other calls in file

%5B%5B...markdownPath%5D%5D.js

GitHub: reactjs/ko.react.dev

179
180
181
182
183
184
185
186
187
      };
    },
  ],
});
const {transform} = require('@babel/core');
const jsCode = await transform(jsxCode, {
  plugins: ['@babel/plugin-transform-modules-commonjs'],
  presets: ['@babel/preset-react'],
}).code;

317

458

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const babel = require("@babel/core");

const code = `
const square = (x) => x * x;
console.log(square(5));
`;

const options = {
  presets: ["@babel/preset-env"],
};

const result = babel.transform(code, options);

console.log(result.code);

In this example, @babel/core.transform is used to transform some ES6 code into compatible ES5 code using the @babel/preset-env preset. The transformed code is then printed to the console.

ClassFile.js

GitHub: qooxdoo/qooxdoo

406
407
408
409
410
411
412
413
414
415
    config.presets.push(extraPreset);
  }
  if (this.__privateMangling == "unreadable") {
    config.blacklist = ["spec.functionName"];
  }
  result = babelCore.transform(src, config);
} catch (ex) {
  qx.tool.compiler.Console.log(ex);
  t.addMarker("compiler.syntaxError", ex.loc, ex.message);
  t.__fatalCompileError = true;

257

756

+ 14 other calls in file

cjs-to-es5.js

GitHub: ant-move/Antmove

1
2
3
4
5
6
7
8
9
10
const babel = require('@babel/core')

useReducer({
  WxsImportExpression(node) {
    let { content, dist } = node.body
    content = babel.transform(content, {
      plugins: [
        [
          ({ types: t }) => ({
            visitor: {

139

+ 11 other calls in file

README.md?plain=1

GitHub: power-assert-js/babel-plugin-espower

98
99
100
101
102
103
104
105
106
107
### via [Babel API](https://babeljs.io/docs/usage/api/)

```javascript
var babel = require('@babel/core');
var jsCode = fs.readFileSync('/path/to/test/some_test.js');
var transformed = babel.transform(jsCode, {
    presets: [...],
    plugins: ['babel-plugin-espower']
});
console.log(transformed.code);

+ 2 other calls in file

TaroNode.js

GitHub: moddio/taro2

444
445
446
447
448
449
450
451
452
453

// Remove client-exclude marked code.
source = source.replace(/\/\* CEXCLUDE \*\/[\s\S.]*?\* CEXCLUDE \*\//g, '');

// Return final code.
return babel.transform(source, {
	ast: true,
	compact: true,
	minified: true,
	comments: false,

+ 8 other calls in file

ReactFreshBabelPlugin-test.js

GitHub: clyan/react-source-analyze

10
11
12
13
14
15
16
17
18
19
20
const {wrap} = require('jest-snapshot-serializer-raw');
const freshPlugin = require('react-refresh/babel');


function transform(input, options = {}) {
  return wrap(
    babel.transform(input, {
      babelrc: false,
      configFile: false,
      envName: options.envName,
      plugins: [

ReactFreshIntegration-test.js

GitHub: clyan/react-source-analyze

93
94
95
96
97
98
99
100
101
102
  runTests(executeCommon, testCommon);
});

describe('with typescript syntax', () => {
  runTests(function(source) {
    const typescriptSource = babel.transform(source, {
      babelrc: false,
      configFile: false,
      presets: ['@babel/react'],
      plugins: [

babelCode.md?plain=1

GitHub: kongzhi0707/front-end-learn

217
218
219
220
221
222
223
224
225
226
const { transform } = require('@babel/core');
const fs = require('fs');
// 读取需要转换的js字符串
const before = fs.readFileSync('./before.js', 'utf8');
// 使用babel-core的transform的API和插件进行字符串 -> AST转化
const res = transform(`${before}`, {
  plugins: [require('./my-plugin')]
});

// 存在after.js删除

+ 5 other calls in file

generate-helpers.js

GitHub: web-padawan/tools

135
136
137
138
139
140
141
142
143
144
 * @param {string} filename
 */
function minifyAndWriteJs(js, filename) {
  const minified =
      // @ts-ignore
      babelCore.transform(js, {presets: [babelPresetMinify]}).code;
  const libDir = path.join(__dirname, '..', 'lib');
  try {
    fs.mkdirSync(libDir);
  } catch (e) { /* don't care */ }

204

gulpfile.js

GitHub: david1asher/polymer-build

144
145
146
147
148
149
150
151
152
];

gulp.task('gen-babel-helpers', () => {
  const helpersCode = babelCore.buildExternalHelpers(babelHelperWhitelist);
  const minified =
      babelCore.transform(helpersCode, {presets: [babelPresetMinify]}).code;
  fs.mkdirpSync('./lib/');
  fs.writeFileSync('./lib/babel-helpers.min.js', minified, {encoding: 'utf-8'});
});

+ 3 other calls in file

generate-helpers.js

GitHub: lkraav/polymer3-webpack-starter

18
19
20
21
22
23
24
25
26
27
/**
 * @param {string} js
 * @param {string} filename
 */
function minifyAndWriteJs(js, filename) {
  const output = babelCore.transform(js, {
    presets: [babelPresetMinify]
  }).code;
  const vendor = path.join(__dirname, '..', 'src', 'vendor');
  try {

tool.js

GitHub: xiaohuoni/spack-new

39
40
41
42
43
44
45
46
47
48
const importDepend = cache.getDepend(dirPath)
// if (isRoot && importDepend) {
//   return importDepend
// }
const context = fs.readFileSync(dirPath,'utf-8')
const tranform = babel.transform(context)
const ast = babel.parseSync(tranform.code)
const nameTemplate = babel.template(`window.%%name%% = %%name%%`)
const reactDOM = babel.template(`ReactDOM.render(React.createElement(%%name%%,{},{}),document.getElementById('root'))`)
traverse(ast,{

+ 5 other calls in file

build.js

GitHub: lampealex888/Disquiet

66
67
68
69
70
71
72
73
74
75
    }).join("\n\n") : 
    jetpack.find(jsPath, { matching : "*.js" }).map( fileName => {
        return jetpack.read(fileName);
    }).join("\n\n");

js = Babel.transform(js, babelOptions).code;

Terser.minify(js, terserOptions).then(result => {
    if (result.error) {
        console.error(result.error);

%E9%A1%B9%E7%9B%AE%E5%B7%A5%E7%A8%8B%E5%8C%96%E4%B8%8ENode.md?plain=1

GitHub: huxingyi1997/hexo

215
216
217
218
219
220
221
222
223
224

```
const babel = require('@babel/core')
const code = `const fn = (a, b) => a + b`
// babel 有 transform 方法会帮我们自动遍历，使用相应的预设或者插件转换相应的代码
const r = babel.transform(code, {
  presets: ['@babel/preset-env'],
})
console.log(r.code)
// 打印结果如下

+ 23 other calls in file

extract-intl.js

GitHub: mcbebu/NinjaFan

91
92
93
94
95
96
97
98
99
100
101
102
103


const extractFromFile = async filename => {
  try {
    const code = await readFile(filename);


    const output = await transform(code, { filename, presets, plugins });
    const messages = get(output, 'metadata.react-intl.messages', []);


    for (const message of messages) {
      for (const locale of appLocales) {

build.js

GitHub: harby9/tphone-core

4542
4543
4544
4545
4546
4547
4548
4549
4550
4551
4552
4553
}


function transformDynamicClass(staticClass, clsBinding) {
    if (staticClass === void 0) staticClass = ""


    var result = babel.transform("!" + clsBinding, { plugins: [transformObjectToTernaryOperator] })
    // 先实现功能，再优化代码
    // https://github.com/babel/babel/issues/7138
    var cls = prettier
        .format(result.code.replace("use strict'!",'').replace('"use strict";',''), { semi: false, singleQuote: true, parser:'babel' })//fixed by xxxxxx

+ 13 other calls in file

index.js

GitHub: GrantGryczan/ServeCube

738
739
740
741
742
743
744
745
746
747
if (typeIsJS) {
	const originalContents = minifyHTMLInJS(String(contents));
	await fs.writeFile(`${fullPath}.source`, originalContents);
	const filenameIndex = path.lastIndexOf("/") + 1;
	const filename = path.slice(filenameIndex);
	const compiled = babel.transform(originalContents, {
		ast: false,
		comments: false,
		compact: true,
		filename,

Other functions in @babel/core

Sorted by popularity

@babel/core.types is the most popular function in @babel/core (2111 examples)

Other popular packages:

Home

About