在开发中需要使用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('错误提示消息') 来提示用户
运行效果如下图:
给出错误消息并提示了代码位置。
以上只是一个简单的应用场景,根据不同业务场景,需要编写更为复杂的插件。
相关推荐
简易的babel 插件开发入门例子
Babel插件开发.docx
Babel 插件开发指南参考开发第一个babel插件* 正式代码去除特点属性的值(name + custom)module.exports = function
这个工具的主要目的是简化在 JavaScript 开发过程中对 babel 插件和预设的测试工作。 **描述分析:** 虽然描述中没有提供详细的功能或用法,但从亮点的提示我们可以推测,"babel-test" 应该具有以下特点: 1. **...
为了有效地管理和优化这一过程,开发者常常使用各种工具和库,其中Babel插件就是一个重要的解决方案。本文将深入探讨“优化国际化文案的Babel插件”,以及它如何帮助我们减小应用的bundle大小。 首先,让我们理解...
标题 "Babel插件用于带任何函数调用" 指的是在JavaScript开发过程中,使用Babel这个转换工具时,特定的插件可以处理带有任意函数调用的代码。Babel是一个广泛使用的JavaScript编译器,它允许开发者使用最新版本的...
3. **Babel插件**:Babel插件是实现特定转换规则的模块,用户可以通过编写或选择插件来扩展Babel的功能,以适应自己的项目需求。 4. **AST(抽象语法树)**:AST是程序源代码的结构化表示,Babel和其他类似工具通过...
这意味着它不仅适用于JavaScript开发者,特别是那些编写或维护Babel插件的人,还适用于整个前端工程团队,因为确保代码质量是每个开发流程的重要部分。 **文件名解析:** “babel-utils-babel-plugin-tester-8c...
标题中的"Babel插件将有用的细节注入到控制台语句中"揭示了这个主题的核心——一个Babel插件,它的作用是增强控制台日志输出的功能。Babel是一个广泛使用的JavaScript转换工具,它允许开发者使用最新的JavaScript...
学习和理解Babel插件的工作方式对于提升JavaScript开发技能非常重要。通过编写或自定义插件,开发者可以根据项目需求实现特定的代码转换,增强代码的可读性、可维护性和跨平台兼容性。此外,熟悉Babel还能帮助开发者...
Babel:Babel插件系统详解.docx
为了优化性能,减少对React库的依赖,开发者可以使用特定的工具,比如我们这里提到的"react-一个babel插件"。 这个插件的工作原理是将React组件转换为原生的DOM操作指令。Babel是一个广泛使用的JavaScript编译器,...
4. **babel-plugin-auto-import**:这是一个Babel插件,自动处理导入,确保只引入实际使用的模块,实现按需加载。这可以进一步优化代码体积,减少网络传输的数据量。 5. **JavaScript生态**:JavaScript有着丰富的...
标题中的"babelmacros启用零配置可导入的babel插件"指的是`babel-macros`,这是一个非常有用的工具,它允许开发者在使用Babel转换JavaScript代码时,实现自定义的预处理逻辑,而且无需进行繁琐的配置。`babel-macros...
Babel:Babel社区贡献与插件开发.docx
本篇文章将深入探讨Babel插件`transform-react-jsx-location`以及它是如何将JSX代码的位置信息插入到DOM中的。 首先,`transform-react-jsx`是Babel的一个核心插件,它的主要任务是将JSX元素转换为React....
本篇文章将深入探讨Babel 7中的转换插件,特别是如何使用`babel-plugin-transform-commonjs`将CommonJS转换为ESM。 首先,让我们了解CommonJS和ESM的区别。CommonJS采用同步导入机制,允许在代码中使用`require()`...
通过编写自定义的Babel插件,我们可以扩展Babel的功能,使其能根据我们的需求对源代码进行特定的转换。 在本例中,`babel-plugin-transform-gl-matrix`插件的目的是将gl-matrix的API转换为更直观、更简洁的形式。...
生成器-babel-plugin Babel Plugin Generator for Yeoman。 用法 全局安装yeoman和发电机 $ npm i -g yo $ npm i -g generator-babel-plugin ... 要详细了解babel插件开发,请参阅 执照 麻省理工学院
总的来说,faster.js作为一款Babel插件,为JavaScript开发提供了额外的性能优化手段。它通过智能地分析和转化代码,帮助开发者编写出更快、更高效的JavaScript应用程序。然而,使用时也需谨慎,确保优化策略与项目...