zoukankan      html  css  js  c++  java
  • Babel 及其工作原理

    一、什么是 Babel

    Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其它环境中。

    // Babel 输入:ES2015 箭头函数
    [1,2,3].map((n)=>n+1)
    
    // Babel 输出:ES5 语法实现的同等功能
    [1,2,3].map(function(n){
      return n+1
    })

    二、Babel 的工作原理

    首先把原始代码转成抽象语法树(Abstract Syntax Tree,AST),然后基于这个 AST 做转换,每个转换被处理成插件的形式,最后把 AST 还原成代码。

    三、安装

    这里使用 Webpack

    npm install --save-dev babel-loader @babel/core @babel/preset-env

    安装成功后,要在 webpack.config.js 中进行简单的开启 Babel:

    module: {
      rules: [
        { test: /.js$/, exclude: /node_modules/, loader: "babel-loader"}
      ]
    }

    上面的安装只是开启了 Babel,还没选择使用 plugin,接下来是进行 plugin 的配置:

    在项目根目录创建 .babelrc 文件,文件内容如下:

    {
    "presets": ["@babel/preset-env"]
    }

    (这里使用 presets 而非 plugin 的原因:presets 是 plugin 的集合)

  • 相关阅读:
    Java验证码
    Java内存泄漏问题
    Java常见异常总结
    Java编码与乱码问题
    Spring:源码解读Spring IOC原理
    Quartz 定时邮件发送多个备份文件
    spring-boot 多线程
    java并发基础
    Java多线程中wait语句的具体使用技巧
    多线程的死锁
  • 原文地址:https://www.cnblogs.com/Leophen/p/12721955.html
Copyright © 2011-2022 走看看