https://github.com/vipulpathak113/ast-learning
Repo for Abstract Syntax Tree for usage in babel, eslint, etc
https://github.com/vipulpathak113/ast-learning
abstract-syntax-tree ast babel custom-plugins eslint javascript
Last synced: about 2 months ago
JSON representation
Repo for Abstract Syntax Tree for usage in babel, eslint, etc
- Host: GitHub
- URL: https://github.com/vipulpathak113/ast-learning
- Owner: vipulpathak113
- Created: 2025-05-25T16:32:12.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-28T18:21:12.000Z (11 months ago)
- Last Synced: 2025-07-28T20:28:15.167Z (11 months ago)
- Topics: abstract-syntax-tree, ast, babel, custom-plugins, eslint, javascript
- Language: JavaScript
- Homepage:
- Size: 148 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Abstract Syntax Tree (AST) & Babel Learning
## What is Babel?
Babel is a powerful JavaScript compiler that
- Transforms modern JavaScript (ES6+) into backwards compatible code
- Enables JSX transformation for React
- Allows custom code transformations through plugins
- Provides polyfills for new JavaScript features
## Understanding AST
An Abstract Syntax Tree (AST) represents the syntactic structure of source code in a tree format. Each node in the tree represents a construct in the source code.
### Babel's Three-Stage Process
1. **Parse**: Convert source code into AST
2. **Transform**: Modify AST using plugins/presets
3. **Generate**: Convert modified AST back to code
## Getting Started
### Installation
```bash
# Install core dependencies
npm install --save-dev @babel/core @babel/cli babel-loader
npm install --save-dev @babel/preset-env
```
### Custom Plugin Development
```javascript
module.exports = function (babel) {
const { types: t } = babel;
return {
name: "my-custom-plugin",
visitor: {
// Your transformations here
}
};
};
```
### Example: Console Logger Plugin
This plugin adds function names to console calls.
Input:
```javascript
function test() {
console.log("Hello");
}
```
Output:
```javascript
function test() {
console.log("called inside 'test'", "Hello");
}
```
## Configuration
### Webpack Setup
```javascript
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['./custom-scripts/babel']
}
}
}
]
}
};
```
## Development Tools
### AST Explorer
Visit [AST Explorer](https://astexplorer.net/) to:
- Visualize AST structure
- Test transformations
- Debug plugin logic
### Common Babel APIs
- `@babel/core`: Main transformation engine
- `@babel/types`: AST node utilities
- `@babel/traverse`: AST traversal
- `@babel/generator`: Code generation
## Running the Project
```bash
# Start development server
npm start
# Build for production
npm run build
```
## Resources
- [Babel Documentation](https://babeljs.io/docs/en/)
- [AST Explorer](https://astexplorer.net/)
- [Babel Plugin Handbook](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md)