当前位置： 首页 > news >正文

nodejs 012:Babel（巴别塔）语言转换与代码兼容

news 2026/3/31 18:40:39

这里写目录标题

    • 安装 Babel
    • 配置
      • presets配置：常见的 Babel Presets
      • plugins配置：以 plugin-transform-class-properties 的类中属性为例
      • index.jsx

  • Babel 是一个独立的 JavaScript 编译器，主要用于将现代 JavaScript 代码转换为旧版本的 JavaScript，以提高兼容性。

安装 Babel

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

配置

  • 然后需要配置 Babel，通过创建一个 .babelrc 文件或在 babel.config.json 中设置Babel 配置。
  • Babel 的配置通常包括 presets 和 plugins。其中 presets 用于指定一组预设的转换规则，plugins则通过自定义的插件形式进行代码兼容转换。
  • babel.config.json 示例：
{"presets": ["@babel/preset-env","@babel/preset-react"],"plugins": ["@babel/plugin-transform-runtime"]
}

presets配置：常见的 Babel Presets

  1. @babel/preset-react：
    • 这个 preset 用于转换 React 代码。它包括转换 JSX 语法的插件。
    • 配置示例：
// https://babel.nodejs.cn/docs/babel-preset-react
{"presets": [["@babel/preset-react",{"pragma": "dom", // default pragma is React.createElement (only in classic runtime)"pragmaFrag": "DomFrag", // default is React.Fragment (only in classic runtime)"throwIfNamespace": false, // defaults to true"runtime": "classic" // defaults to classic// "importSource": "custom-jsx-library" // defaults to react (only in automatic runtime)}]]
}

  1. @babel/preset-typescript：

    • 这个 preset 用于将 TypeScript 代码转换为 JavaScript 代码，移除 TypeScript 特有的类型信息。

  2. @babel/preset-env：

    • 这个 preset 用于将现代 JavaScript 代码转换为兼容的 JavaScript 代码。它根据目标环境（如浏览器或 Node.js 的版本）自动选择需要的插件和 polyfills。
    • 可以通过配置 targets 字段指定要支持的浏览器或环境。例如：
      {"presets": [["@babel/preset-env",{"targets": "> 0.25%, not dead"}]]
}
    • 上面的配置表示目标是市场份额大于 0.25% 的浏览器，并且不是“已死”的浏览器（即不再接收更新的浏览器）。

plugins配置：以 plugin-transform-class-properties 的类中属性为例

  • Babel 是一个 JavaScript 编译器，允许开发者使用最新的 JavaScript 语法和特性，并将代码转译成兼容旧版本浏览器的代码。为了扩展 Babel 的功能，有很多插件可供使用。
  • 命令进行安装（如果没有打包工具帮助自动安装的话）：npm install --save-dev @babel/plugin-transform-class-properties
  • .babelrc或（babel.config.json）配置
    "plugins": [["@babel/plugin-transform-class-properties",{ "loose": true }]// 类中属性语言https://babel.nodejs.cn/docs/babel-plugin-transform-class-properties]
  • 比如对以下.html文件的渲染
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="root"></div><script src="./js/index.jsx"></script> 
</body>
</html>

index.jsx

  • 由
import { h, Component, render } from 'preact';class App extends Component { constructor(props) { // constructor(props): 构造函数是类组件的初始化方法super(props);this.state = {// this.state: 定义组件的初始状态。在这里，state 是一个对象，用于存储组件的内部数据。Text: "WORLD",};//  事件处理函数的绑定等代码,函数bind到this对象上// this.onIpcChange = this.onIpcChange.bind(this);}render() { return(<h1>HELLO {this.state.Text}</h1>)}
}render(<App />,document.querySelector('#root'))
  • 简化为
import { h, Component, render } from 'preact';class App extends Component { state = {Text: "WORLD",};render() { return(<h1>HELLO {this.state.Text}</h1>)}
}render(<App />,document.querySelector('#root'))

在这里插入图片描述

相关文章：

nodejs 012:Babel（巴别塔）语言转换与代码兼容

这里写目录标题 安装 Babel配置presets配置&#xff1a;常见的 Babel Presetsplugins配置&#xff1a;以 plugin-transform-class-properties 的类中属性为例index.jsx Babel 是一个独立的 JavaScript 编译器&#xff0c;主要用于将现代 JavaScript 代码转换为旧版本的 JavaScr…...

编程日记 2024/9/21 20:48:22

时间安全精细化管理平台存在未授权访问漏洞

漏洞描述 登录--时间&amp;安全精细化管理平台存在未授权访问漏洞导致与员工信息泄露 FOFA&#xff1a; body"登录--时间&amp;安全精细化管理平台" 漏洞复现 POC: IP/acc/_checkinoutlog_/...

编程日记 2024/9/21 20:47:21

软件卸载工具（windows系统）-geek

有时候软件卸载会很麻烦&#xff0c;使用geek会比较方便。但是针对一些特别大的软件&#xff0c;geek也好像会稍微费点劲&#xff08;比如MATLAB2022A&#xff09;,不过针对一般常规软件的卸载&#xff0c;geek就可以有效地完全卸载了&#xff0c;使用方法也很简单&#xff0c;…...

编程日记 2024/9/21 20:43:16

第三篇 第14篇 工程计价依据

第三篇 工程计价 第14篇 工程计价依据 14.1 工程造价管理标准体系与工程定额体系 14.1.1 工程造价管理标准体系 1.基础标准 工程造价术语标准建筑工程计价设备材料划分标准有关建设工程费用构成通则。建设工程费用构成和分类是工程计价最重要的基础工作。 2.管理规范 建筑…...

编程日记 2024/9/21 20:41:14

java 异常-Exception

异常的概念 Java 语言中&#xff0c;将程序执行中发生的不正常情况称为“异常”。&#xff08;开发过程中的语法错误和逻辑错误不是异常&#xff09; 执行过程中所发生的异常事件可分为两大类 &#xff08;1&#xff09;Error&#xff08;错误&#xff09;&#xff1a;Java 虚…...

编程日记 2024/9/21 20:40:13

爬虫逆向学习(六)：补环境过某数四代

声明&#xff1a;本篇文章内容是整理并分享在学习网上各位大佬的优秀知识后的实战与踩坑记录 引用博客&#xff1a; https://blog.csdn.net/shayuchaor/article/details/103629294 https://blog.csdn.net/qq_36291294/article/details/128600583 https://blog.csdn.net/weixin_…...

编程日记 2024/9/21 20:39:12

IO流体系（FiletOutputStream）

书写步骤&#xff1a; 1.创建字节输出流对象 细节1:参数是字符串表示的路径或者是File对象都是可以的 细节2:如果文件不存在会创建一个新的文件&#xff0c;但是要保证父级路径是存在的。 细节3:如果文件已经存在&#xff0c;则会清空文件 2.写数据 细节:write方法的参数…...

编程日记 2024/9/21 20:38:10

网络设备登录——《路由与交换技术》实验报告

目录 一、实验目的 二、实验设备和环境 三、实验记录 1.通过 Console 登录 步骤1:连接配置电缆。 步骤2:启动PC,运行超级终端。 步骤3:进入Console 配置界面 2.通过 Telnet 登录 步骤1:通过 Console 接口配置 Telnet 用户。 步骤2:配置 super 口令 步骤3:配置登录欢迎…...

编程日记 2024/9/21 20:36:08

CSS——网格布局（display: grid）之下篇

CSS——网格布局&#xff08;display: grid&#xff09;之下篇 前面我们介绍了网格布局的基础的创建以及一些比较基础的属性&#xff0c;下面我们将介绍网格布局的剩余部分&#xff0c;还将结合实例来进行细致的讲解&#xff08;图文并茂&#xff0c;生动形象有内涵&#xff0…...

编程日记 2024/9/21 20:35:07

低势期操作

《周易》讲事务发展有六个阶段&#xff1a; 第一阶段&#xff1a;潜龙勿用。 第二阶段&#xff1a;见龙在田。 第三阶段&#xff1a;终日乾乾。 第四阶段&#xff1a;或跃在渊。 第五阶段&#xff1a;飞龙在天。 第六阶段&#xff1a;亢龙有悔。 现在大环境不好&#xff…...

编程日记 2024/9/21 20:33:05

IMS 呼叫流程(详细)

目录 业务模型 典型组网如图1所示 信令流程 具体的语音流程如图2所示 主叫信令面流程 01：UE_A->P-CSCF/ATCF 02：P-CSCF/ATCF_A->PCRF_A 03：PCRF_A->PCSCF/ATCF_A 04：P-CSCF/ATCF_A 处理(把S-CSCF加到Route) 05：S-CSCF_A->MMTel AS/SCC AS_A 06：MM…...

编程日记 2024/9/21 20:32:02

系统架构设计师：系统架构设计

简简单单 Online zuozuo： 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo ：本心、输入输出、结果 简简单单 Online zuozuo ： 文章目录 系统架构设计师：系统架构设计前言软件架构设计与生命周期SA 实现阶段主要关注的内容A…...

编程日记 2024/9/21 20:31:01

win11不显示已经打开的窗口

...

编程日记 2024/9/21 20:28:59

数学建模常用模型全面总结（含适用条件、优点、局限性和应用场景）

目录 1. 代数模型&#xff08;Algebraic Models&#xff09;2. 微分方程模型&#xff08;Differential Equation Models&#xff09;3. 概率模型&#xff08;Probabilistic Models&#xff09;4. 优化模型&#xff08;Optimization Models&#xff09;5. 统计模型&#xff08;S…...

编程日记 2024/9/21 20:27:58

RabbitMQ消费者确认和重复机制

消费者确认机制 为了确认消费者是否成功处理消息&#xff0c;RabbitMQ提供了消费者确认机制&#xff08;Consumer Acknowledgement&#xff09;。即&#xff1a;当消费者处理消息结束后&#xff0c;应该向RabbitMQ发送一个回执&#xff0c;告知RabbitMQ自己消息处理状态。回执…...

编程日记 2024/9/21 20:25:55

【Verilog学习日常】—牛客网刷题—Verilog企业真题—VL77

编写乘法器求解算法表达式 描述 编写一个4bit乘法器模块&#xff0c;并例化该乘法器求解c12*a5*b&#xff0c;其中输入信号a,b为4bit无符号数&#xff0c;c为输出。注意请不要直接使用*符号实现乘法功能。 模块的信号接口图如下&#xff1a; 要求使用Verilog HDL语言实现以上…...

编程日记 2024/9/21 20:24:53

thinkPHP 8.0.4 安装

windows 上安装最新版 thinkPHP8.0.4 下载phpStudy V8.1&#xff1a;小皮面板安装Composer2.x&#xff0c;Composer是PHP的一个依赖管理工具&#xff0c;主要功能包括依赖管理、版本控制、自动加载、扩展开发以及集成其他工具。安装 php8.0.2 4. 网站-管理-compose&#xff0c…...

编程日记 2024/9/21 20:21:50

在k8s中，客户端访问服务的链路流程，ingress---＞service---＞deployment---＞pod---＞container

ingress是一个API资源。 其核心作用是nginx网页服务器。 当客户端访问服务器不同的url时, 用不同的location提供服务。 在k8s之外&#xff0c;nginx的配置一般如下&#xff1a; http {server {listen 80;server_name localhost;location / {root html; …...

编程日记 2024/9/21 20:19:48

寄存器二分频电路

verilog代码 module div2_clk ( input clk, input rst,output clk_div);reg clk_div_r; assign clk_div clk_div_r;always(posedge clk) beginif(rst)beginclk_div_r < 1b0;endelsebeginclk_di…...

编程日记 2024/9/21 20:18:46

Kafka3.8.0+Centos7.9的安装参考

Kafka3.8.0Centos7.9的安装参考 环境准备 操作系统版本&#xff1a;centos7.9 用户/密码&#xff1a;root/1qazXSW 主机名 IP地址 安装软件 下载地址 k1 192.168.207.131 jdk1.8zookeeper3.9.2kafka_2.13-3.8.0efak-web-3.0.1 1&#xff09; Java Downloads | Oracle …...

编程日记 2024/9/21 20:16:44

终极指南：Laravel DataTables 性能优化实战——不同场景下的表现对比

终极指南&#xff1a;Laravel DataTables 性能优化实战——不同场景下的表现对比 【免费下载链接】laravel-datatables jQuery DataTables API for Laravel 4|5|6|7|8|9|10 项目地址: https://gitcode.com/gh_mirrors/la/laravel-datatables Laravel DataTables 是一款强…...

编程新知 2026/3/31 17:37:27

3D Face HRN效果验证：使用MeshLab量化评估3D重建PSNR与SSIM指标

3D Face HRN效果验证&#xff1a;使用MeshLab量化评估3D重建PSNR与SSIM指标 1. 项目背景与验证意义 3D人脸重建技术近年来取得了显著进展&#xff0c;但如何客观评估重建质量一直是个关键问题。传统的主观视觉评估方法存在明显局限性——不同观察者可能有不同的判断标准&…...

编程新知 2026/3/31 17:31:21

Qwen3.5-4B模型Matlab数据分析加速：模型调用与结果可视化

Qwen3.5-4B模型Matlab数据分析加速&#xff1a;模型调用与结果可视化 1. 引言&#xff1a;当科研遇上大模型 科研工作中最耗时的环节往往不是实验本身&#xff0c;而是数据处理和报告撰写。想象一下这样的场景&#xff1a;你刚完成一组复杂的实验&#xff0c;面对几十页的仪器…...

编程新知 2026/3/31 17:27:11

Linux dmesg实战指南：从内核消息解析到故障排查（附实用技巧与常见问题）

1. 初识dmesg&#xff1a;你的Linux系统健康检查仪 刚接触Linux系统管理时&#xff0c;我总把dmesg当成"高级版系统日志"。直到有次服务器突然宕机&#xff0c;才发现这个命令简直就是系统故障的"黑匣子"。想象一下&#xff0c;当你的电脑突然蓝屏&#xf…...

编程新知 2026/3/31 17:13:04

3大突破：让网课学习效率提升300%的智能方案

3大突破&#xff1a;让网课学习效率提升300%的智能方案 【免费下载链接】auto-play-course 简单好用的刷课脚本[支持平台:职教云,智慧职教,资源库] 项目地址: https://gitcode.com/gh_mirrors/hc/auto-play-course 在数字化学习普及的今天&#xff0c;职业教育学生平均每…...

编程新知 2026/3/31 17:02:43

Asp.Net MVC杂谈之:—步步打造表单验证框架[重排版](1)

在实际使用中,我们可以考虑多种形式来进行这一验证(注:本文目前只研究服务器端验证的情况),最直接的方式莫过于对每个表单值手动用C#代码进行验证了,比如: if(!Int32.TryParse(Request.Form[“age”], out age)){ xxxx… } If(age < xxx || age > xxx){ xxxx… }…...

编程新知 2026/3/31 17:00:42

北京联通IPTV组播配置实战：OpenWRT与udpxy的完美结合

1. 为什么需要OpenWRTudpxy方案 家里换了新电视后&#xff0c;突然想把闲置的北京联通IPTV利用起来。传统机顶盒接线麻烦不说&#xff0c;还占用了宝贵的HDMI接口。经过实测&#xff0c;用OpenWRT路由器配合udpxy插件转换组播信号&#xff0c;才是真正的"一劳永逸"解…...

编程新知 2026/3/31 16:07:45

Kandinsky-5.0-I2V-Lite-5s实战案例：用会议合影生成带入场动画的团队介绍视频

Kandinsky-5.0-I2V-Lite-5s实战案例&#xff1a;用会议合影生成带入场动画的团队介绍视频 1. 项目背景与价值 想象一下这个场景&#xff1a;公司刚开完年度战略会议&#xff0c;团队拍了一张大合影。现在需要制作一个团队介绍视频&#xff0c;传统方式需要找专业剪辑师&#…...

编程新知 2026/3/31 14:38:05

基于WebRTC的P2P文件传输系统：架构设计与实现原理

基于WebRTC的P2P文件传输系统&#xff1a;架构设计与实现原理 【免费下载链接】filepizza :pizza: Peer-to-peer file transfers in your browser 项目地址: https://gitcode.com/GitHub_Trending/fi/filepizza 在当今数字时代&#xff0c;文件传输已成为日常工作和协作…...

编程新知 2026/3/31 13:47:07

视觉问答技术全解析：从原理到实践的LAVIS框架应用指南

视觉问答技术全解析&#xff1a;从原理到实践的LAVIS框架应用指南 【免费下载链接】LAVIS LAVIS - A One-stop Library for Language-Vision Intelligence 项目地址: https://gitcode.com/gh_mirrors/la/LAVIS 技术原理&#xff1a;机器如何"看懂"并"回答…...

编程新知 2026/3/31 12:31:49