barretlee / Babel Plugin Ast
使用 babel 进行 AST 分析和处理
Stars: ✭ 44
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Babel Plugin Ast
Astexplorer.app
https://astexplorer.net with ES Modules support and Hot Reloading
Stars: ✭ 65 (+47.73%)
Mutual labels: webpack, ast, babel-plugin
Snackui
SnackUI 🍑 - the final React style library. With an *optimizing compiler* that lets you write views naturally, with easier DX, working on native and web at once, all while being faster than hand-rolling your own CSS.
Stars: ✭ 55 (+25%)
Mutual labels: webpack, babel-plugin
Compiled
A familiar and performant compile time CSS-in-JS library for React.
Stars: ✭ 1,235 (+2706.82%)
Mutual labels: webpack, babel-plugin
Babel Plugin React Persist
Automatically useCallback() & useMemo(); memoize inline functions
Stars: ✭ 91 (+106.82%)
Mutual labels: ast, babel-plugin
React Loadable
⏳ A higher order component for loading components with promises.
Stars: ✭ 16,238 (+36804.55%)
Mutual labels: webpack, babel-plugin
Babel Plugin Prismjs
A babel plugin to use PrismJS with standard bundlers.
Stars: ✭ 114 (+159.09%)
Mutual labels: webpack, babel-plugin
babel-plugin-detective
Babel plugin that scans the AST for require calls and import statements
Stars: ✭ 26 (-40.91%)
Mutual labels: babel-plugin, ast
I18nize React
Internationalize react apps within a lunch break
Stars: ✭ 389 (+784.09%)
Mutual labels: ast, babel-plugin
Redux Json Router
Declarative, Redux-first routing for React/Redux browser applications.
Stars: ✭ 37 (-15.91%)
Mutual labels: webpack
File Upload Component
React 16.0/Angular 1.6/Angular 5.0 components for file upload with multiple file selection, preview images, download, file thumbnail
Stars: ✭ 36 (-18.18%)
Mutual labels: webpack
Grunt Amdcheck
Uses AST to find and remove unused dependencies in AMD modules.
Stars: ✭ 41 (-6.82%)
Mutual labels: ast
Webpack React
📦 A sample project to demonstrate bundling ES6, React, SASS and Bootstrap with Webpack
Stars: ✭ 36 (-18.18%)
Mutual labels: webpack
Webpack Aliyun Oss
一个webpack(version >= 4)插件，上传资源到阿里云oss。可以作为webpack插件使用，也可独立使用
Stars: ✭ 36 (-18.18%)
Mutual labels: webpack
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+2209.09%)
Mutual labels: webpack
Ng Static Site Generator
ng-static-site-generator is a webpack-based command line build tool that builds an Angular app and Jekyll-style blog entry html files into a static html and css website. It also supports building a client app so you can have static pages that are also capable of running dynamic functionality coded in Angular.
Stars: ✭ 42 (-4.55%)
Mutual labels: webpack
Minisauras
An open-source CI/CD automation tool based on GitHub Actions that pulls all the JavaScript and CSS files from your base branch, minify them and creates a pull-request with a new branch.
Stars: ✭ 40 (-9.09%)
Mutual labels: webpack
使用 babel 进行 AST 分析和处理
babel 插件的官方手册已经相当详实了，似乎没有太多必要再写一遍，不过为了小组分享，还是花了几个小时整理了一番。
针对上图中的 Parser、Traversal、Transform、Generator 分别写了几个简单的 Demo，跟着一步一步来，结合文档，应该可以完全掌握。
Parser
const babylon = require('babylon');
const code = `
function plus(a, b) {
return a + b;
}
`;
const ast = babylon.parse(code, {
sourceType: 'module'
});
traversal
遍历节点，筛选遍历
const traversal = require('babel-traverse').default;
traversal(ast, {
Identifier: function (path) {
console.log(path.node.name);
}
});
进出节点
traversal(ast, {
Identifier: {
enter: function (path) {
console.log(path.node.name, 'enter');
},
exit: function (path) {
console.log(path.node.name, 'exit\n');
}
}
});
局部遍历
traversal(ast, {
FunctionDeclaration: function (path) {
if (path.node.id.name !== 'plus') return;
path.traverse({
Identifier: {
enter: function (path) {
console.log(path.node.name, 'enter');
},
exit: function (path) {
console.log(path.node.name, 'exit\n');
}
}
});
}
});
transform
traversal(ast, {
FunctionDeclaration: function (path) {
path.traverse({
Identifier: {
enter: function (path) {
if (types.isIdentifier(path.node, { name: "a" })) {
// 节点替换
path.replaceWith(types.Identifier('x'), path.node);
}
},
exit: function (path) {
console.log(path.node.name);
}
}
});
}
});
工具
在做 AST 转换的时候，下面两个东西可以很大程度帮到你：
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].