1. 主页
  2. 发布
  3. 短网址二维码
  4. Base64编码解码
  5. 移动版blog
Babel插件使用及介绍
作者:晨曦沐枫|发表时间:2018-10-6 14:03:57 |分类:其它

一. Babel介绍

    静态分析是在不需要执行代码的前提下对代码进行分析的处理过程 (执行代码的同时进行代码分析即是动态分析)。 静态分析的目的是多种多样的, 它可用于语法检查,编译,代码高亮,代码转换,优化,压缩等等场景。


二. Webpack中如何使用 ? 

    1. 在使用webpack做打包工具的时候,babel只是提供了最基础的代码编译能力,主要用到的一些代码转换则是通过插件的方式实现的。在loader中配置插件有两种方式:presets及plugins

    2. presets配置的也是插件,只是优先级比较高,而且他的执行顺序是从左到右的

    3. 而plugins的优先级顺序则是从右到左的

    4. 我们经常用到的插件会包括:ES6/7转ES5代码的babel-plugin-es2015,React jsx代码转换的babel-plugin-react,对新的js标准特性有不同支持程度的babel-plugin-stage-0等(不同阶段js标准特性的制定是不一样的,babel插件支持程度也就不一样,0表示完全支持),将浏览器里export语法转换为common规范exports/module.exports的babel-plugin-add-module-exports,根据运行时动态插入polyfill的babel-plugin-transform-runtime(一般不建议使用babel-polyfill,一股脑将所有polyfill插入,打的包会很大。但是babel-polyfill会具备一些对象新增的API能力,而transform-runtime是不具备此能力,它只提供一些新版本出现的对象,具体使用需要均衡开发场景来看)


三. Babel转换基本流程

    Babel将源码转换AST之后,通过遍历AST树(其实就是一个js对象),对树做一些修改,然后再将AST转成code,即成源码。

    将js源码转换为AST用到的模块叫:babylon,对树进行遍历并做修改用到的模块叫:babel-traverse,将修改后的AST再生成js代码用到的模块则是:babel-generator。而babel-core模块则是将三者结合使得对外提供的API做了一个简化,使用babel-core只需要执行以下的简单代码即可:

    

import { transform } from 'babel-core';
var result = babel.transform("code();", options);
result.code;
result.map;
result.ast;

    我们在Node中使用的时候一般都是使用的三步转换的方式,方便做更多的配置及操作。所以整个的难点主要就在对AST的操作上,为了能对AST做一些操作后进而能对js代码做到修改,babel对js代码语法提供了各种类型,比如:箭头函数类型ArrowFunctionExpression,for循环里的continue语句类型:ContinueStatement等等,我们主要就是根据这些不同的语法类型来对AST做操作(生成/替换/增加/删除节点),具体有哪些类型全部在: babel-types



Babel参考文档


标签: Babel webpack Babel使用详解 最后修改时间:2018-11-6 1:04:55
晨曦沐枫

魔都漂泊码农一枚,平常热衷于分享探讨一些新技术,喜欢挑战又不忘初心,所以写了这么一个站点和大家分享交流,主要分享还是前端技术为主,也有记录工作经验和生活感悟。

由于个人水平有限,所以博客中的文章难免有错误或者不正确的地方,欢迎在文章下方留言,楼主看到会及时改正。

博客是我利用空闲时间维护的一个小项目,如有异常或者报错(一般异常都hold住了,手动微笑),欢迎留言或者邮件,楼主尽早修正,楼主已推出移动版blog,欢迎使用。

联系邮箱:myco_xmy@qq.com