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

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

这里写目录标题

    • 安装 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'))

在这里插入图片描述

http://www.lryc.cn/news/442934.html

相关文章:

  • 时间安全精细化管理平台存在未授权访问漏洞
  • 软件卸载工具(windows系统)-geek
  • 第三篇 第14篇 工程计价依据
  • java 异常-Exception
  • 爬虫逆向学习(六):补环境过某数四代
  • IO流体系(FiletOutputStream)
  • 网络设备登录——《路由与交换技术》实验报告
  • CSS——网格布局(display: grid)之下篇
  • 低势期操作
  • IMS 呼叫流程(详细)
  • 系统架构设计师:系统架构设计
  • win11不显示已经打开的窗口
  • 数学建模常用模型全面总结(含适用条件、优点、局限性和应用场景)
  • RabbitMQ消费者确认和重复机制
  • 【Verilog学习日常】—牛客网刷题—Verilog企业真题—VL77
  • thinkPHP 8.0.4 安装
  • 在k8s中,客户端访问服务的链路流程,ingress--->service--->deployment--->pod--->container
  • 寄存器二分频电路
  • Kafka3.8.0+Centos7.9的安装参考
  • Redis——持久化策略
  • 并查集LRU cache
  • SpringCloud的学习(三),Resilience4j
  • 【计算机网络篇】计算机网络概述
  • UDS诊断-面试题2
  • ovirt error: Network not found: no network with matching name ‘vdsm-ovirtmgmt‘
  • 2024百度的组织架构和产品分布
  • Java中List、ArrayList与顺序表
  • 缓存技巧 · Spring Cache Caffeine 高性能缓存库
  • RabbitMq中交换机(Exchange)、队列(Queue)和路由键(Routing Key)
  • 解码 OpenAI 的 o1 系列大型语言模型