{"id":15200027,"url":"https://github.com/ull-esit-pl/babel-learning","last_synced_at":"2026-02-02T09:09:57.088Z","repository":{"id":241299108,"uuid":"806140614","full_name":"ULL-ESIT-PL/babel-learning","owner":"ULL-ESIT-PL","description":"Yet Another Tutorial on Babel (YATBABEL)","archived":false,"fork":false,"pushed_at":"2025-06-21T14:05:24.000Z","size":3206,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-21T14:34:28.458Z","etag":null,"topics":["babel","babel-generator","babel-macros","babel-parser","babel-plugin","babel-traverse","ecma6","ecmascript","tc39"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ULL-ESIT-PL.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-05-26T13:44:14.000Z","updated_at":"2025-06-21T14:05:27.000Z","dependencies_parsed_at":"2024-06-01T16:05:45.593Z","dependency_job_id":"39388308-7431-420c-9117-a282c732d850","html_url":"https://github.com/ULL-ESIT-PL/babel-learning","commit_stats":{"total_commits":1057,"total_committers":1,"mean_commits":1057.0,"dds":0.0,"last_synced_commit":"59875e9bd340fdf5f8fb37fc21a97eba2fc50270"},"previous_names":["ull-esit-pl/babel-learning"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ULL-ESIT-PL/babel-learning","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ULL-ESIT-PL%2Fbabel-learning","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ULL-ESIT-PL%2Fbabel-learning/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ULL-ESIT-PL%2Fbabel-learning/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ULL-ESIT-PL%2Fbabel-learning/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ULL-ESIT-PL","download_url":"https://codeload.github.com/ULL-ESIT-PL/babel-learning/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ULL-ESIT-PL%2Fbabel-learning/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263577236,"owners_count":23483129,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","babel-generator","babel-macros","babel-parser","babel-plugin","babel-traverse","ecma6","ecmascript","tc39"],"created_at":"2024-09-28T02:40:20.353Z","updated_at":"2026-02-02T09:09:57.060Z","avatar_url":"https://github.com/ULL-ESIT-PL.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# YATBABEL: Yet Another Tutorial on Babel\n\n## Introduction\n\nBabel is a JavaScript transpiler that converts not only ECMAScript 2015+ but also JS extensions like JSX, Flow, TypeScript, and other proposals into JavaScript code that can run in any browser or JavaScript environment.  \n\nThis tutorial is a collection of notes and examples when reading tutorials on \n\n- how to start using Babel,\n- how to write plugins, \n- how to write macros, \n- how to extend the parser, tokenizer and scope analyzer \n- What is TC39 and how to make proposals to TC39\n\n## Babel Configuration\n\nSee the [Babel Configuration](doc/configure.md) section.\n\n## Babel Help\n\n```\n➜  babel-learning git:(main) ✗ npx babel --help\nUsage: babel [options] \u003cfiles ...\u003e\n\nOptions:\n  -f, --filename [filename]                   The filename to use when reading from stdin. This will be used in source-maps, errors etc.\n  --presets [list]                            A comma-separated list of preset names.\n  --plugins [list]                            A comma-separated list of plugin names.\n  --config-file [path]                        Path to a .babelrc file to use.\n  --env-name [name]                           The name of the 'env' to use when loading configs and plugins. Defaults to the value of BABEL_ENV, or else\n                                              NODE_ENV, or else 'development'.\n  --root-mode [mode]                          The project-root resolution mode. One of 'root' (the default), 'upward', or 'upward-optional'.\n  --source-type [script|module]               \n  --no-babelrc                                Whether or not to look up .babelrc and .babelignore files.\n  --ignore [list]                             List of glob paths to **not** compile.\n  --only [list]                               List of glob paths to **only** compile.\n  --no-highlight-code                         Enable or disable ANSI syntax highlighting of code frames. (on by default)\n  --no-comments                               Write comments to generated output. (true by default)\n  --retain-lines                              Retain line numbers. This will result in really ugly code.\n  --compact [true|false|auto]                 Do not include superfluous whitespace characters and line terminators.\n  --minified                                  Save as many bytes when printing. (false by default)\n  --auxiliary-comment-before [string]         Print a comment before any injected non-user code.\n  --auxiliary-comment-after [string]          Print a comment after any injected non-user code.\n  -s, --source-maps [true|false|inline|both]  \n  --source-map-target [string]                Set `file` on returned source map.\n  --source-file-name [string]                 Set `sources[0]` on returned source map.\n  --source-root [filename]                    The root from which all sources are relative.\n  --module-root [filename]                    Optional prefix for the AMD module formatter that will be prepended to the filename on module definitions.\n  -M, --module-ids                            Insert an explicit id for modules.\n  --module-id [string]                        Specify a custom name for module ids.\n  -x, --extensions [extensions]               List of extensions to compile when a directory has been the input. [.js,.jsx,.es6,.es,.mjs,.cjs]\n  --keep-file-extension                       Preserve the file extensions of the input files.\n  -w, --watch                                 Recompile files on changes.\n  --skip-initial-build                        Do not compile files before watching.\n  -o, --out-file [out]                        Compile all input files into a single file.\n  -d, --out-dir [out]                         Compile an input directory of modules into an output directory.\n  --relative                                  Compile into an output directory relative to input directory or file. Requires --out-dir [out]\n  -D, --copy-files                            When compiling a directory copy over non-compilable files.\n  --include-dotfiles                          Include dotfiles when compiling and copying non-compilable files.\n  --no-copy-ignored                           Exclude ignored files when copying non-compilable files.\n  --verbose                                   Log everything. This option conflicts with --quiet\n  --quiet                                     Don't log anything. This option conflicts with --verbose\n  --delete-dir-on-start                       Delete the out directory before compilation.\n  --out-file-extension [string]               Use a specific extension for the output files\n  -V, --version                               output the version number\n  -h, --help                                  display help for command\n```\n\n## Compile JavaScript with Babel\n\n### npx babel src/input.js --out-dir lib --presets=@babel/env\n\n```\n➜  babel-learning git:(main) cat src/input.js \nconst fn = () =\u003e 1;\n➜  babel-learning git:(main) ✗ npx babel src/input.js --out-dir lib --presets=@babel/env\nSuccessfully compiled 1 file with Babel (465ms).\n➜  babel-learning git:(main) ✗ cat lib/input.js\n\"use strict\";\n\nvar fn = function fn() {\n  return 1;\n};\n```\n\n### babel.transformSync\n\nYou can also call `babel.transformSync` from your own program with the `code` as\nthe first argument and an option object specifying \nthe `presets` and `plugins`: \n\n`➜  babel-learning git:(main) ✗ cat src/hello-babel.js` \n```js\nconst babel = require(\"@babel/core\");\n\nconst code = `\nlet f = (x) =\u003e console.log(x);\nf(\"Hello, Babel!\");\n`;\nconst result = babel.transformSync(\n  code, \n  {\n    presets: [\"@babel/preset-env\"], // for compiling ES2015+ syntax\n    plugins: [\"@babel/plugin-transform-arrow-functions\"]\n  }\n);\nconsole.log(result.code); \n```\n\nWhen executed we get:\n\n`➜  babel-learning git:(main) ✗ node src/hello-babel.js` \n```js\n\"use strict\";\n\nvar f = function f(x) {\n  return console.log(x);\n};\nf(\"Hello, Babel!\");\n```\n\n\n### Babel, the Web and Source Maps\n\nSee section [/src/babel-tutorial/README.md](/src/babel-tutorial/README.md).\n\n## Babylon\n\nBabylon was the parser that Babel used to parse JavaScript code.\nNot any more. Now Babel uses `@babel/parser` which is a fork of Babylon.\nSee [src/hello-babylon.mjs](src/hello-babylon.mjs) for an example of using Babylon.\n\n## Traversal\n\nSee section [traversal.md](doc/traversal.md). It includes an example\nusing the modules babel-traverse and babel-generator and compact-js-ast\n\n## Writing my first Babel Plugin\n\nSee section [first-plugin.md](doc/first-plugin.md).\n\n## Visiting the AST in a Babel Plugin\n\nSee section [Visiting](doc/visiting.md)\n\n## Manipulating the AST in a Babel Plugin\n\nSee section [Manipulation](doc/manipulation.md)\n\n## Babel Template and Babel Types and Babel Generator\n\nSee section [doc/template.md](doc/template.md).\n\nFor another example using templates see section *Babel Templates* at file [/src/manipulating-ast-with-js/README.md](babel-templates/src/manipulating-ast-with-js/README.md#babel-templates).\n\n## Scope\n\nSee section [Scope](doc/scope.md)\n\n## Plugin Options\n\nSee section [Plugin Options](doc/plugin-options.md)\n\n## Babel Handbook at jamiebuilds/babel-handbook\n\n* [Babel Handbook at jamiebuilds/babel-handbook](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md) This document covers how to create Babel plugins and is recommended by the Babel people.\n  * [kentcdodds babel-plugin-handbook](https://github.com/kentcdodds/babel-plugin-handbook) forked from jamiebuilds/babel-handbook.\n  \n## Babel Plugin Examples\n\n\n* See section [Babel Plugin Examples](/src/awesome/README.md)\n* [version](/src/awesome/version)\n* [Reading \"Babel Macros\" by Tan Liu: The case of facebook/idx](/tan-liu-babel-macros/tan-liu-babel-macros.md#the-case-of-facebookidx)\n\n## Babel Macros\n\nSee \n\n- Section [Reading \"Babel Macros\" by Tan Liu](/doc/tan-liu-babel-macros/tan-liu-babel-macros.md)\n- [Learning Babel Macros](https://github.com/ULL-ESIT-PL/learning-babel-macros/tree/main) at ULL-ESIT-PL/learning-babel-macros repo by Casiano\n\n## Reproducing Nicolo Ribaudo's talk at HolyJS 2019\n\nSee chapter [Reproducing Nicolo Ribaudo's talk at HolyJS 2019](/doc/nicolo-howto-talk/README.md)\n\n## The Babel Parser\n\nSee \n\n- See section [tokenizer.md](/doc/parser/tokenizer.md).\n- Section [parser.md](doc/parser.md)\n- [Commented Reading of \"Creating custom JavaScript syntax with Babel\"](/doc/tan-liu-article.md)\n- [tc39](/doc/parser/tc39.md)\n\n## Project \"Creating custom JavaScript syntax with Babel\"\n\nSee [Commented Reading of \"Creating custom JavaScript syntax with Babel\"](/doc/tan-liu-article.md)\n\n## Adrian's Final Degree Project\n\n[Adrian](https://github.com/AdrianMoraRodriguez) is working in his Final Degree Project on extending JS arrays and objects with a `else` clause \ndefining the default behavior when the property does not exists in the array. \n\n```javascript\nlet a = [1, 2, 3, else x =\u003e x * x];\n\nconsole.log(a[2]);  // 3\nconsole.log(a[5]);  // 25 (porque 5 * 5 = 25)\n```\n\nSee [/src/array-else/README.md](/src/array-else/README.md) to know more about Adrian's transpiler. \n\n## Pablo's Final Degree Project\n\n[Pablo](https://github.com/PSantanaGlez13) is working in his Final Degree Project on extending JS with *Assignable functions* whose behavior can be changed via assignments:\n\n`➜  left-side git:(main) ✗ cat left-side-original.mjs`\n```js\nfunction @@ foo(bar) {\n  return bar * 2;\n}\nfoo(10) = 5;\n```\n\nSee [/src/left-side/README.md](/src/left-side/README.md) to know more about Pablo's transpiler. \n\n## Building and publishing your Babel version\n\nSee section [Building and publishing your Babel version](/doc/building-publishing.md).   \n\n## Exercises\n\nSee section [Exercises](doc/exercises/README.md).\n\n## References\n\nSee section [References](doc/references.md).\n\n## Contributing\n\nMake a fork of this repo, make your changes and make a pull request.\n\n- If you find a type, an error, make an [issue](https://github.com/ULL-ESIT-PL/babel-learning/issues) or let us know in the [Discussions](https://github.com/ULL-ESIT-PL/babel-learning/discussions).\n- If you find an interesting reference, tutorial, etc. please let us know either by \nmodifying the [doc/references.md](doc/references.md) file followed by the pull request or \njust make an issue.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Full-esit-pl%2Fbabel-learning","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Full-esit-pl%2Fbabel-learning","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Full-esit-pl%2Fbabel-learning/lists"}