如何在JavaScript中使用宏

　　介绍

今天就跟大家聊聊有关如何在JavaScript中使用宏,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

JavaScript是什么

JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。

在语言当中,宏常见用途有实现DSL。通过宏,开发者可以自定义一些语言的格式,比如实现JSX语法。在WASM已经实现的今天,用其他语言来写网页其实并不是没有可能。像铁锈语言就带有强大的宏功能,这使得基于生锈的紫杉框架,不需要实现类似巴别塔的东西,而是靠语言本身就能实现类似JSX的语法。一个紫杉组件的例子,支持类JSX的语法。

impl  Component  for  MyComponent  { 　　,,,//,… 　　 　　,,,fn 视图(及自我),→,Html  { 　　,,,,,,,let  onclick =, self.link.callback(| _ |,味精::点击); 　　,,,,,,,html !, { 　　,,,,,,,,,,,& lt; button  onclick=onclick> {}, self.props.button_text  & lt;/button> 　　,,,,,,,} 　　,,,} 　　}

JavaScript宏的局限性

不同于生锈,JavaScript本身是不支持宏的,所以整个工具链也是没有考虑宏的。因此,你是可以写个识别自定义语法的宏,但是由于配套的工具链并不支持,比如最常见的VSCode和打印稿,你会得到一个语法错误同。样对于巴别塔本身所用的解析器也是不支持扩展语法的,除非你另叉出来一个巴别塔,因此babel-plugin-macros不支持自定义语法。不过,借助模板字符串函数,我们可以曲线救国,至少获得部分自定义语法树的能力。一个GraphQL的例子,支持在JavaScript中直接编写GraphQL。

import  {, gql },得到& # 39;graphql.macro& # 39;; 　　 　　const  query =, gql” 　　query 才能;User  { 　　,,,用户(id: 5), { 　　,,,,lastName 　　,,,,,…UserEntry1 　　,,,} 　　,,} 　　”;//,,在编译期会转换成,↓,↓,↓,↓,↓↓ 　　 　　const  query =, { 　　“kind"才能:,“Document" 　　“definitions"才能:,[{ 　　,,,…

为什么要用宏而非巴别塔插件

巴贝尔插件的能力确实远大于宏,而且有些情况下确实是不得不用插件。宏比起巴别塔插件好的一点在于,宏的理念在于开箱即用。使用反应的开发者,相信都听过的大名鼎鼎的Create-React-App,帮你封装好了各种底层细节,开发者专注于编写代码即可。但是CRA的问题在于其封装的太严了,但凡你有一点需要自定义巴贝尔插件的需求,基本上就需要执行纱react-script排出,将所有底层细节暴露出来。而对于宏来说,你只需要在项目的巴别塔配置内添加一个babel-plugin-macros插件,那么对于任何自定义的巴别塔宏都可以完美支持,而不是像插件一样,需要下载各种各样的插件。CRA已经内置了babel-plugin-macros,你可以在CRA项目中使用任意的巴别塔宏。

如何写一个宏?

<强>介绍

一个宏非常像一个宝贝插件,因此事先了解如何编写宝贝插件是非常有帮助的,对于如何编写宝贝插件,巴贝尔官方有一本手册,专门介绍了如何从零编写一个宝贝插件。在知道如何编写宝贝插件之后,我们首先通过一个使用宏的例子,来介绍下,巴别塔是如何识别文件中的宏的。是某种的特殊的语法,还是用烂的美元符号?

import  preval 得到& # 39;preval.macro& # 39; 　　 　　const  one =,普雷瓦尔'module.exports =, 1, +, 2,安康;1,安康;1 '

这是非常常见的一个宏,其作用是在编译期间执行字符串中的JavaScript代码,然后将执行的结果替换到相应的地方,如上的代码在编译期会被展开为:

import  preval 得到& # 39;preval.macro& # 39; 　　 　　const  one =, 1

从使用来方式来看,唯一与识别宏沾点关系的就是*。宏字符,这也确实就是巴别塔如何识别宏的方式,实际上不仅对于*。宏观的形式,巴贝尔认为库名匹配正则/(/)宏(\ c ? js) ?美元/表达式的库就是巴别塔宏,这些匹配表达式的一些例子:

& # 39; my.macro& # 39; 　　& # 39;my.macro.js& # 39; 　　& # 39;my.macro.cjs& # 39; 　　& # 39;我/宏# 39; 　　& # 39;我/macro.js& # 39; 　　& # 39;我/macro.cjs& # 39;

编写

接下来,我们将简单编写一个importURL宏,其作用是通过url来引入一些库,并在编译期间将这些库的代码预先拉取下来,处理一下然后引入到文件中。我知道有些Webpack插件已经支持从url来引入库,不过这同样是一个很好的例子来学习如何编写宏,为了有趣!以及如何在NodeJS中发起同步请求!:)

如何在JavaScript中使用宏