babel之转译代码

作者: RickyWu585 | 来源:发表于2022-01-24 10:35 被阅读0次

babel的原理

  1. parse:把代码code1变成AST
  • AST:用来表示源代码的对象,主要信息在program的Node里面
import {parse} from '@babel/parser';
import traverse from '@babel/traverse';
import generate from '@babel/generator';

const code = `let a = 'let';let b = 2`;
const ast = parse(code, {sourceType: 'module'});
console.log(ast);
image.png
  1. traverse:遍历AST进行修改
import {parse} from '@babel/parser';
import traverse from '@babel/traverse';
import generate from '@babel/generator';

const code = `let a = 'let';let b = 2`;
const ast = parse(code, {sourceType: 'module'});
traverse(ast, {
  enter: item => {
    // 如果节点的类型是变量声明
    if (item.node.type === 'VariableDeclaration') {
      // 如果是let声明的,变成var
      if (item.node.kind === 'let') {
        item.node.kind = 'var';
      }
    }
  }
});
  1. generate:把AST变成代码code2
import {parse} from '@babel/parser';
import traverse from '@babel/traverse';
import generate from '@babel/generator';

const code = `let a = 'let';let b = 2`;
const ast = parse(code, {sourceType: 'module'});
traverse(ast, {
  enter: item => {
    // 如果节点的类型是变量声明
    if (item.node.type === 'VariableDeclaration') {
      // 如果是let声明的,变成var
      if (item.node.kind === 'let') {
        item.node.kind = 'var';
      }
    }
  }
});
// 用generate把ast转为代码
const result = generate(ast,{},code)
console.log(result.code);
image.png
  1. let,const都能转为es5
import {parse} from '@babel/parser';
import * as babel from '@babel/core';

const code = `let a = 'let';let b = 2; const c = 3`;
const ast = parse(code, {sourceType: 'module'});
const result = babel.transformFromAstSync(ast, code, {
  presets: ['@babel/preset-env']
});
console.log(result.code);
image.png
  1. 把文件转为es5代码
import {parse} from '@babel/parser';
import * as babel from '@babel/core';
import * as fs from 'fs';

const code = fs.readFileSync('./test.js').toString();
const ast = parse(code, {sourceType: 'module'});
const result = babel.transformFromAstSync(ast, code, {
  presets: ['@babel/preset-env']
});
fs.writeFileSync('./test.es5.js', result.code);

相关文章

  • babel之转译代码

    babel的原理 parse:把代码code1变成AST AST:用来表示源代码的对象,主要信息在program的...

  • 基于webpack ,babel 工具将es6语法转化为es5

    代码目录结构: ### babel 转译es6 -> es5 - 安装babel - npm install ba...

  • system万能模块加载器

    当我们直接用babel转译我们的es6代码,再将转译的代码引入文件中是不能用的,这时我们就需要system来帮我们...

  • babel学习笔记

    babel 转译 安装以下依赖: @babel/core调用 Babel 的 API 进行转码 babel-loa...

  • Babel

    Babel 是 JavaScript 的转译器。用于将 ES Next 的代码转换成浏览器或者其他环境支持的代码。...

  • 17 提高构建性能

    webpack提高构建性能方式 尽可能少用loader; 使用babel-loader时,指定代码转译范围; 使用...

  • 读深入ES6记[五]

    第九章:使用Babel和Broccoli来编写ES6 1.流行的转译器 转译器,即源代码到源代码的编译器 非标准J...

  • 快速搭建 React + webpack + ES6 项目

    本 react 项目结合 babel 和 webpack-dev-server,可以转译所编写的ES6代码并且实现...

  • 2019-10-21Vue脚手架安装命令(mac版)

    安装脚手架的命令(终端) 项目安装(终端安装) babel转译es6-->es5 -安装 babel babel ...

  • babel的原理及其使用

    写代码的时候会使用es6或者es7的代码,直接运行,某些代码浏览器不识别,这时候可是使用babel进行转译成 es...

网友评论

    本文标题:babel之转译代码

    本文链接:https://www.haomeiwen.com/subject/piqbhrtx.html