babel介绍以及插件写法

Babel

• 定义和主要功能

  • Babel 是一个 JavaScript 编译器，它的主要作用是将较新的 JavaScript 语法（如 ES6 +）转换为向后兼容的 JavaScript 版本（通常是 ES5）。这样，你就可以在不支持最新语法的浏览器或环境中运行使用了新语法的代码。例如，它可以把箭头函数() => {}转换为传统的函数表达式function() {}，将let和const声明转换为var声明，并处理块级作用域等相关问题。

• 工作原理

  • Babel 通过解析 JavaScript 代码生成抽象语法树（AST），然后对 AST 进行转换操作，最后再将转换后的 AST 生成为新的 JavaScript 代码。这个过程涉及到一系列的预设（presets）和插件（plugins）。预设是一组插件的集合，用于处理特定的语法转换任务，如@babel/preset - env可以根据你的目标环境自动选择需要转换的语法；插件则用于更精细的语法转换，比如处理特定的新语法特性或者自定义的代码转换逻辑。

• 应用场景

  • 在前端开发中，当你使用了最新的 JavaScript 语法编写代码，但需要兼容旧浏览器时，Babel 是必不可少的工具。在构建现代 JavaScript 应用（如 React、Vue 等项目）时，它也用于处理组件代码中的新语法，确保代码能够在各种浏览器环境下正确运行。在后端开发中，如果你的 JavaScript 运行环境不支持某些新语法，Babel 也可以帮助进行代码转换。

整个demo

-package.json
-.babelrc
-test.js
-src
  --index.js

package.json

{
  "name": "babeltest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "@babel/cli": "^7.25.9",
    "@babel/core": "^7.26.0",
    "@babel/plugin-transform-arrow-functions": "^7.25.9",
    "@babel/plugin-transform-runtime": "^7.25.9",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.26.0",
    "regenerator-runtime": "^0.14.1"
  },
  "scripts": {
    "build": "babel src/index.js --out-file babel/output.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/generator": "^7.26.2",
    "@babel/runtime": "^7.26.0",
    "@babel/runtime-corejs3": "^7.26.0",
    "core-js": "^3.39.0"
  }
}

src/index.js

    //测试文件，index.js
console.log('log=>11',11);
const arrow = () => {
    console.log('测试箭头函数')
}

const p = new Promise((resolve, reject) => {
    resolve('测试Promise')
})

const list = [1, 2, 3, 4].map((item) => item * 2)

.test.js(自定义插件)

• 功能:去除console.log

const generate =require('@babel/generator').default;
module.exports = function (babel) {
    return {
      visitor: {
        CallExpression(path) {
            // console.log(generate(path.node.callee));
            const name = generate(path.node.callee).code
            if( name ==='console.log'){
                const {line,column}=path.node.loc.start
                    path.remove();
                    console.log('log-zcw=>line,colum',line,column);
                    return
            }
            console.log(name);
        }
      }
    };
  };

.babelrc

{
    "presets": [
        ["@babel/preset-env"]
    ],
    "plugins": [
        "./test.js"
    ]
}
  

运行

• 运行完毕可以看到babel/output.js已经有编译的代码,引入"./test.js"后,已经看不到console.log('log=>11',11);了

npm run build