`
leeqq
  • 浏览: 137876 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

babel插件开发

    博客分类:
  • web
阅读更多

在开发中需要使用babel将目前浏览器还不支持的js特性,转化为浏览器能运行的版本。

然而有一些业务上的特性,babel是不可能帮我们做的,需要自己去开发babel插件并运用到我们的项目里面

 

比如说有两个类

class A {
    doSomething() {
        console.log('在A里面干了一些事情');
    }
}

class B extends A {
    doSomething() {
        console.log('在B里面干了一些事情');
    }
}

 

类B在自己的类里面写了自己的方法,但是如果我们的项目要求我们A的子类如果需要实现自己的doSomething必须要先执行A的doSomething。因为A中可能干了一些通用的事情,不必要每个子类自己再实现一遍,如果不调用父类A的方法可能会导致一些未知的错误或者其它问题。这样的需求靠人工复查代码显然是费时费力又难以保证品质的。还是交给程序比较靠谱。

 

编写插件文件 myplugin.js

module.exports = function(babel) {
  const t = babel.types;

  return {
    visitor: {
      ClassMethod (path) {    
        if (path.node.key.name == 'doSomething' && path.parentPath.parent.superClass && path.parentPath.parent.superClass.name === 'A') {
          var hasCallSuper = false;
          path.traverse({
            CallExpression(path){
              if (t.isMemberExpression(path.node.callee) && t.isSuper(path.node.callee.object) && 'doSomething' === path.node.callee.property.name) {
                hasCallSuper = true;
                path.stop();
              }
            }
          });
          if (!hasCallSuper) {
            throw path.buildCodeFrameError('A的子类如果实现了doSomething,需要实现A的doSomething。请添加\nsuper.doSomething();\n')
          }
        }
      }
    }
  };
};

 

大致讲一下插件的实现:

主要就是在visitor里面定义各种类型的检测方法。此处ClassMethod就是用来检测类方法的

首先判断方法名字是不是doSomething并且存在父类,且父类名字是A

然后通过path.traverse方法对doSomething方法的进行遍历,traverse方法的参数其实也是visitor。

这是CallExpression则是方法调用。

如果是成员函数,并且调用者是super方法名是doSomething,则标记已经调用过super.doSomething

 

最后如果没有调用过。刚通过 throw path.buildCodeFrameError('错误提示消息') 来提示用户

 

运行效果如下图:


  

给出错误消息并提示了代码位置。

 

 

以上只是一个简单的应用场景,根据不同业务场景,需要编写更为复杂的插件。

 

 

 

  • 大小: 183.8 KB
分享到:
评论

相关推荐

    简易的babel插件开发入门例子

    简易的babel 插件开发入门例子

    winfredwyw#notes#Babel插件开发1

    Babel 插件开发指南参考开发第一个babel插件* 正式代码去除特点属性的值(name + custom)module.exports = function

    babeltest一个可帮助你为babel插件和预设编写测试

    这个工具的主要目的是简化在 JavaScript 开发过程中对 babel 插件和预设的测试工作。 **描述分析:** 虽然描述中没有提供详细的功能或用法,但从亮点的提示我们可以推测,"babel-test" 应该具有以下特点: 1. **...

    优化国际化文案的Babel插件

    为了有效地管理和优化这一过程,开发者常常使用各种工具和库,其中Babel插件就是一个重要的解决方案。本文将深入探讨“优化国际化文案的Babel插件”,以及它如何帮助我们减小应用的bundle大小。 首先,让我们理解...

    Babel插件用于带任何函数调用

    标题 "Babel插件用于带任何函数调用" 指的是在JavaScript开发过程中,使用Babel这个转换工具时,特定的插件可以处理带有任意函数调用的代码。Babel是一个广泛使用的JavaScript编译器,它允许开发者使用最新版本的...

    babelcodemod重写JavaScript使用babel插件

    3. **Babel插件**:Babel插件是实现特定转换规则的模块,用户可以通过编写或选择插件来扩展Babel的功能,以适应自己的项目需求。 4. **AST(抽象语法树)**:AST是程序源代码的结构化表示,Babel和其他类似工具通过...

    babelplugintester用于测试babel插件的工具类

    这意味着它不仅适用于JavaScript开发者,特别是那些编写或维护Babel插件的人,还适用于整个前端工程团队,因为确保代码质量是每个开发流程的重要部分。 **文件名解析:** “babel-utils-babel-plugin-tester-8c...

    Babel插件将有用的细节注入到控制台语句中

    标题中的"Babel插件将有用的细节注入到控制台语句中"揭示了这个主题的核心——一个Babel插件,它的作用是增强控制台日志输出的功能。Babel是一个广泛使用的JavaScript转换工具,它允许开发者使用最新的JavaScript...

    JavaScript_最山羊Babel插件.zip

    学习和理解Babel插件的工作方式对于提升JavaScript开发技能非常重要。通过编写或自定义插件,开发者可以根据项目需求实现特定的代码转换,增强代码的可读性、可维护性和跨平台兼容性。此外,熟悉Babel还能帮助开发者...

    Babel:Babel插件系统详解.docx

    Babel:Babel插件系统详解.docx

    react-一个babel插件它将Reactjs组件编译为本机DOM指令以消除运行时对react库的需求

    为了优化性能,减少对React库的依赖,开发者可以使用特定的工具,比如我们这里提到的"react-一个babel插件"。 这个插件的工作原理是将React组件转换为原生的DOM操作指令。Babel是一个广泛使用的JavaScript编译器,...

    babel模块化导入插件实现了按需加载的功能来满足常规业务需求

    4. **babel-plugin-auto-import**:这是一个Babel插件,自动处理导入,确保只引入实际使用的模块,实现按需加载。这可以进一步优化代码体积,减少网络传输的数据量。 5. **JavaScript生态**:JavaScript有着丰富的...

    babelmacros启用零配置可导入的babel插件

    标题中的"babelmacros启用零配置可导入的babel插件"指的是`babel-macros`,这是一个非常有用的工具,它允许开发者在使用Babel转换JavaScript代码时,实现自定义的预处理逻辑,而且无需进行繁琐的配置。`babel-macros...

    Babel:Babel社区贡献与插件开发.docx

    Babel:Babel社区贡献与插件开发.docx

    Babel插件将JSX代码位置插入到DOM中

    本篇文章将深入探讨Babel插件`transform-react-jsx-location`以及它是如何将JSX代码的位置信息插入到DOM中的。 首先,`transform-react-jsx`是Babel的一个核心插件,它的主要任务是将JSX元素转换为React....

    用babel插件实现glmatrix的语法糖

    通过编写自定义的Babel插件,我们可以扩展Babel的功能,使其能根据我们的需求对源代码进行特定的转换。 在本例中,`babel-plugin-transform-gl-matrix`插件的目的是将gl-matrix的API转换为更直观、更简洁的形式。...

    一个Babel7转换插件用于将CommonJS转换为ESM

    本篇文章将深入探讨Babel 7中的转换插件,特别是如何使用`babel-plugin-transform-commonjs`将CommonJS转换为ESM。 首先,让我们了解CommonJS和ESM的区别。CommonJS采用同步导入机制,允许在代码中使用`require()`...

    generator-babel-plugin:Yeoman的Babel插件生成器

    生成器-babel-plugin Babel Plugin Generator for Yeoman。 用法 全局安装yeoman和发电机 $ npm i -g yo $ npm i -g generator-babel-plugin ... 要详细了解babel插件开发,请参阅 执照 麻省理工学院

    fasterjs一个Babel插件可以将惯用的Javascript编译为更快更优化的代码

    总的来说,faster.js作为一款Babel插件,为JavaScript开发提供了额外的性能优化手段。它通过智能地分析和转化代码,帮助开发者编写出更快、更高效的JavaScript应用程序。然而,使用时也需谨慎,确保优化策略与项目...

    babel-plugin-dev-debug:用于开发人员调试的babel插件

    用于开发人员调试的babel插件 为什么 有时我们需要在开发环境中编写一些逻辑以用于调试和开发目的 但是,我们不希望将调试代码发布到生产环境中 该插件旨在解决此问题 安装 npm i babel-plugin-dev-debug 用法 将...

Global site tag (gtag.js) - Google Analytics